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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace ViMagento\HelloWorld\Controller\Adminhtml\Post; use Magento\Framework\View\Result\PageFactory; use Magento\Backend\App\Action; class Index extends \Magento\Backend\App\Action { protected $_pageFactory; public function __construct(Action\Context $context, PageFactory $pageFactory) { $this->_pageFactory = $pageFactory; parent::__construct($context); } public function execute() { $resultPage = $this->_pageFactory->create(); $resultPage->getConfig()->getTitle()->prepend(__('ViMagento Hello World Listing')); return $resultPage; } } |
Bước 2: Tạo layout
ViMagento/HelloWorld/view/adminhtml/layout/helloworld_post_index.xml
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <title>ViMagento HelloWorld Listing</title> </head> <body> <referenceContainer name="content"> <uiComponent name="helloworld_post_listing" /> </referenceContainer> </body> </page> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="helloworld_post_listing_data_source" xsi:type="string">helloworld_post_collection</item> </argument> </arguments> </type> <virtualType name="helloworld_post_collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> <arguments> <argument name="mainTable" xsi:type="string">helloworld_post</argument> <argument name="resourceModel" xsi:type="string">ViMagento\HelloWorld\Model\ResourceModel\Post</argument> </arguments> </virtualType> </config> |
Bước 4: Tạo Grid Listing với Ui Component
ViMagento/HelloWorld/view/adminhtml/ui_component/helloworld_post_listing.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<?xml version="1.0" encoding="UTF-8"?> <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">helloworld_post_listing.helloworld_post_listing_data_source</item> </item> </argument> <settings> <spinner>helloworld_post_columns</spinner> <deps> <dep>helloworld_post_listing.helloworld_post_listing_data_source</dep> </deps> <buttons> <button name="add"> <url path="*/*/add"/> <class>primary</class> <label translate="true">Add new</label> </button> </buttons> </settings> <listingToolbar name="listing_top"> <settings> <sticky>true</sticky> </settings> <bookmark name="bookmarks"/> <exportButton name="export_button"/> <columnsControls name="columns_controls"/> <filters name="listing_filters" /> <paging name="listing_paging"/> <massaction name="listing_massaction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item> </item> </argument> <action name="delete"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">delete</item> <item name="label" xsi:type="string" translate="true">Delete</item> <item name="url" xsi:type="url" path="*/*/delete"/> <item name="confirm" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Delete Row</item> <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item> </item> </item> </argument> </action> </massaction> </listingToolbar> <dataSource name="helloworld_post_listing_data_source" component="Magento_Ui/js/grid/provider"> <settings> <updateUrl path="mui/index/render"/> <storageConfig> <param name="indexField" xsi:type="string">post_id</param> </storageConfig> </settings> <aclResource>ViMagento_HelloWorld::listing</aclResource> <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="helloworld_post_listing_data_source"> <settings> <requestFieldName>id</requestFieldName> <primaryFieldName>post_id</primaryFieldName> </settings> </dataProvider> </dataSource> <!-- columns --> <columns name="helloworld_post_columns"> <selectionsColumn name="ids"> <settings> <indexField>post_id</indexField> </settings> </selectionsColumn> <!-- Column id --> <column name="post_id" sortOrder="10"> <settings> <filter>text</filter> <label translate="true">ID</label> </settings> </column> <!-- Column title --> <column name="name" sortOrder="20"> <settings> <filter>text</filter> <label translate="true">Name</label> </settings> </column> <!-- Column status --> <column name="status" component="Magento_Ui/js/grid/columns/select" sortOrder="30"> <settings> <filter>select</filter> <label translate="true">Status</label> <dataType>select</dataType> <options class="ViMagento\HelloWorld\Model\Config\Status"/> </settings> </column> <column name="content" sortOrder="40"> <settings> <filter>text</filter> <label translate="true">Content</label> </settings> </column> <actionsColumn name="actions" class="ViMagento\HelloWorld\Ui\Component\Listing\Grid\Column\Action"> <settings> <indexField>post_id</indexField> </settings> </actionsColumn> </columns> </listing> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<listingToolbar name="listing_top"> <settings> <sticky>true</sticky> </settings> <bookmark name="bookmarks"/> <exportButton name="export_button"/> <columnsControls name="columns_controls"/> <filters name="listing_filters" /> <paging name="listing_paging"/> <massaction name="listing_massaction"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item> </item> </argument> <action name="delete"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="type" xsi:type="string">delete</item> <item name="label" xsi:type="string" translate="true">Delete</item> <item name="url" xsi:type="url" path="*/*/delete"/> <item name="confirm" xsi:type="array"> <item name="title" xsi:type="string" translate="true">Delete Row</item> <item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item> </item> </item> </argument> </action> </massaction> </listingToolbar> |
Sau đó các bạn xóa cache: php bin/magento cache:clean và truy cập vào controller của bạn
Thư mục view sai rồi bạn ơi phải nằm trong adminhtml chứ
Ở bài trước nhé
Mình làm theo hướng dẫn nhưng nó ra blank page nhỉ. Minh dùng magento 2.4.1
http://localhost/admin/helloworld/post/index
System log
[2021-02-14 19:02:04] main.INFO: Broken reference: the ‘helloworld_post_listing’ element cannot be added as child to ‘content’, because the latter doesn’t exist [] []
Nội dung các file:
ViMagento/HelloWorld/etc/adminhtml/routes.xml
ViMagento/HelloWorld/etc/adminhtml/menu.xml
ViMagento/HelloWorld/Controller/Adminhtml/Post/Index.php
ViMagento/HelloWorld/etc/di.xml
ViMagento/HelloWorld/view/adminhtml/layout/helloworld_post_index.xml
ViMagento/HelloWorld/view/adminhtml/ui_component/helloworld_post_listing.xml
Bạn check giúp mình nhé, ko biết có sai sót gì ko, mình là new comer Magento. Xin cám ơn 😉
Fix menu.xml như sau:
Sau đó nhớ xài lệnh:
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:clean
column name=”id” bạn chuyển thành post_id là được nhé
Đây b nhé: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-actionscolumn.html