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.
Contents
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 ViMagentoHelloWorldControllerAdminhtmlPost;
use MagentoFrameworkViewResultPageFactory;
use MagentoBackendAppAction;
class Index extends MagentoBackendAppAction
{
protected $_pageFactory;
public function __construct(ActionContext $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=“MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory”>
<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=“MagentoFrameworkViewElementUiComponentDataProviderSearchResult”>
<arguments>
<argument name=“mainTable” xsi:type=“string”>helloworld_post</argument>
<argument name=“resourceModel” xsi:type=“string”>ViMagentoHelloWorldModelResourceModelPost</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=“MagentoFrameworkViewElementUiComponentDataProviderDataProvider” 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=“ViMagentoHelloWorldModelConfigStatus”/>
</settings>
</column>
<column name=“content” sortOrder=“40”>
<settings>
<filter>text</filter>
<label translate=“true”>Content</label>
</settings>
</column>
<actionsColumn name=“actions” class=“ViMagentoHelloWorldUiComponentListingGridColumnAction”>
<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
