Chuyển tới nội dung
Trang chủ » Tạo Grid trong Magento 2 với Ui Component

Tạo Grid trong Magento 2 với Ui Component

Magento 2 Tạo Grid để quản lý dữ liệu với Ui Component
Magento 2 Tạo Grid để quản lý dữ liệu với Ui Component

Trong bài viết này tôi sẽ hướng dẫn các bạn tạo một Grid đơn giản sử dụng Ui Component để quản lý dữ liệu trong Magento 2. Ở đây tôi sử dụng bảng helloworld_post và module ViMagento_HelloWorld đã được cài đặt ở các bài trước. Nếu bạn nào chưa tạo có thể tham khảo các bài sau:

  • Tạo module trong Magento 2
  • Tạo bảng với db_schema.xml
  • Tạo model, resource model và collection trong Magento 2

Trong bài viết này tôi sử dụng bảng helloworld_post với các column post_id, name, status, content, created_at.

Bước 1: Tạo Controller Admin

ViMagento/HelloWorld/Controller/Adminhtml/Post/Index.php

Bước 2: Tạo layout

ViMagento/HelloWorld/view/adminhtml/layout/helloworld_post_index.xml

Bước 3: Tạo di.xml

Tạo nguồn cung cấp dữ liệu cho grid. Các bạn tạo file: ViMagento/HelloWorld/etc/di.xml

Bước 4: Tạo Grid Listing với Ui Component

ViMagento/HelloWorld/view/adminhtml/ui_component/helloworld_post_listing.xml

Có một số điểm lưu ý ở đây:

  • helloworld_post_listing: chính là tên file hiện tại
  • helloworld_post_listing_data_source: là data source đã tạo trong file di.xml ở bước 3

Ở trên ngoài thêm một grid tôi còn thêm các thành phần như search, phân trang, export… bằng cách thêm đoạn sau:

Sau đó các bạn xóa cache: php bin/magento cache:clean và truy cập vào controller của bạn

Magento 2 Tạo Grid để quản lý dữ liệu với Ui Component
Magento 2 Tạo Grid để quản lý dữ liệu với Ui Component

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *