[EDIT 3 tháng 10 năm 2018]
Cập nhật các liên kết đến devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html và https://devdocs.magento.com/guides/v2. 0 / ui-thành phần / ui-junior.html
2.1 - https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-listing-grid.html
2.2 - https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html
[EDIT ngày 21 tháng 1 năm 2016]
Kể từ ngày 20/01/2016 magd2 devdocs đã được cập nhật với tài liệu mở rộng về các thành phần UI. Tôi chưa kiểm tra rộng rãi nhưng chúng có thể chứa nhiều thông tin hơn phản hồi tôi đã đưa ra vài ngày trước, vì vậy bạn có thể muốn xem http://devdocs.magento.com/guides/v2.0/ui -l Library / ui-library-junior.html
[/BIÊN TẬP]
Tôi đã làm việc với Magento2 được hơn một tháng và đây là điều tôi nhận thấy về cách tạo lưới mới.
Thành phần lưới Magento 2 UI
1) tệp bố trí bên trong Company/Module/view/adminhtml/layout/module_controller_action.xmlxác định lưới là uiComponent với:
<?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">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="listing_name"/>
</referenceContainer>
</body>
</page>
2) uiComponent được định nghĩa trong Company/Module/view/adminhtml/ui_component/listing_name.xmltệp. Tên tệp phải giống với tên uiComponent được sử dụng trong tệp bố cục. Cấu trúc của tệp có vẻ khá phức tạp ngay từ cái nhìn đầu tiên nhưng như mọi khi đây là một số nút lặp lại. Để làm cho nó đơn giản cho phép cắt nó. Nút chính của tập tin thành phần là <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Nó là cố định và tôi tin rằng nó yêu cầu thuộc tính vị trí không gian tên. Tiếp theo đó thường là 4 nút bên <listing />nút: <argument />, <dataSource />, <container />và <columns />. Tuy nhiên, đây không phải là một thiết lập nghiêm ngặt vì <argument />nút có thể được sao chép để cung cấp thêm cấu hình hoặc <container />như trong danh sách trang cms có thêm thùng chứa "dính" vì một số lý do.
Nút đầu tiên là <argument />. Nút này xác định dữ liệu cho thành phần. Thông thường bạn cần cung cấp một cái gì đó như thế này:
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
<item name="deps" xsi:type="string">listing_name.listing_name_data_source</item>
</item>
<item name="spinner" xsi:type="string">listing_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New Item</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<argument />nút yêu cầu thuộc tính name. Trong trường hợp này dataxác định thông tin cơ bản về thành phần. Nó chứa nhiều <item />nút cho mỗi phần cụ thể của cấu hình. js_configcho biết thành phần nơi cung cấp dữ liệu và phụ thuộc trong cấu hình xml liệt kê (mà tôi nghĩ được chuyển đổi thành hàm băm javascript). providergiá trị bao gồm tên danh sách được sử dụng trong tệp bố cục và tên nguồn dữ liệu uniqure sẽ được sử dụng sau này. Trong những danh sách đó tôi đã kiểm tra trong magento providervà depsđều giống nhau. Tôi không chắc chắn những gì được sử dụng có sự khác biệt này. spinnerlấy tên của nút nơi các cột của lưới được xác định. buttonscho phép thêm các nút vào đầu lưới. Trong hầu hết các trường hợp, nó sẽ chỉ là Add newnút. Các nút có một số yếu tố:nameđược sử dụng làm id phần tử, labellà những gì nút nói, classlà lớp nút và urllà liên kết mà nó trỏ tới. Dấu hoa thị được thay thế bằng phần url hiện tại. Khác có thể <item />nút cho nút là: id, title, type(reset, nộp hoặc nút), onclick(thay vì url, nó có ưu tiên), style, value, disabled. Phần tử nút được hiển thị theo Magento\Ui\Component\Control\Buttonlớp.
Tiếp theo chúng ta có <dataSource />nút:
<dataSource name="listing_name_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">UniqueNameGridDataProvider</argument>
<argument name="name" xsi:type="string">listing_name_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">database_id</argument>
<argument name="requestFieldName" xsi:type="string">request_id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argument>
</dataSource>
nameđược sử dụng trong <dataSource />nút phải khớp với cái được sử dụng trong argument/js_config/providervà argument/js_config/deps. Nút tiếp theo xác định lớp nào chịu trách nhiệm chuẩn bị dữ liệu cho lưới. classđối số yêu cầu tên duy nhất sẽ được khớp trong di.xml. primaryFieldNameliên quan đến cột chính của cơ sở dữ liệu và requestFieldNamebiến trong các yêu cầu http. Họ có thể tương đương nhưng không phải, niêm yết ở trang CMS sử dụng page_idnhư primaryFieldNamevà idnhư requestFieldName. update_urlđề cập đến điểm vào nơi các lệnh gọi ajax để lọc và sắp xếp được gửi. Đối số thứ hai trong <dataSource />tham chiếu đến tệp javascript xử lý phần js của việc gửi và xử lý các lệnh gọi ajax cho lưới. Các tập tin mặc định là Magento/Ui/view/base/web/js/grid/provider.js.
Một nút khác là <container />.
<container name="listing_top"> ... </container>
Vì nó chứa rất nhiều dữ liệu nên tôi cũng chia nó ra. Con của nó là các phần của toàn bộ trang. Con đầu lòng <argument />:
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
</item>
</argument>
Nó xác định mẫu loại trực tiếp chịu trách nhiệm xử lý bố cục và tất cả các hành động và theo các điểm mặc định để Magento/Ui/view/base/web/templates/grid/toolbar.html
Nút tiếp theo là (hoặc có thể) <bookmark />
<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">listing_name</item>
</item>
</item>
</argument>
</bookmark>
Nút này thêm tính năng đánh dấu vào lưới. Nó cho phép quản trị viên thiết lập các "hồ sơ" khác nhau của lưới hiển thị các cột khác nhau. Nhờ đó, bạn có thể thêm tất cả các cột từ bảng vào lưới và để người dùng quyết định thông tin nào có liên quan đến anh ta. namespacephải khớp tên được sử dụng trong tập tin bố trí.
Một nút khác là <component />
<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_columns</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>
Chúng tôi có 3 giá trị để cấu hình ở đây. Đầu tiên là providertheo mẫu [list_name_from_layout]. [List_name_from_layout]. [List_columns_node_name] (như trong danh sách nút / đối số / spinner). componentđề cập đến tệp js hiển thị lưới và theo các điểm mặc định Magento/Ui/view/base/web/js/grid/controls/columns.jssử dụng mẫu Magento/Ui/view/base/web/templates/grid/controls/columns.html. Mục cuối cùng là displayAreađịnh nghĩa nơi các điều khiển cột cần được hiển thị. Nó đề cập đến getRegion('dataGridActions')trong tệp được định nghĩa trong container/argument/config/template(mặc định Magento/Ui/view/base/web/templates/grid/toolbar.html:).
Nút tiếp theo là <filterSearch />
<filterSearch name="fulltext">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name_data_source</item>
<item name="chipsProvider" xsi:type="string">listing_name.listing_name.listing_top.listing_filters_chips</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.search</item>
</item>
</item>
</argument>
</filterSearch>
Nút này thêm tìm kiếm toàn văn vào trang. Nó được đặt phía trên lưới dưới dạng trường nhập văn bản đơn với "Tìm kiếm theo từ khóa" dưới dạng giữ chỗ. Tôi không chắc chắn những tùy chọn nào khả thi ở đây vì tôi không chơi nhiều như vậy nhưng list_filtftimechips đề cập đến Magento/Ui/view/base/web/js/grid/filters/chips.jstệp.
Nút tiếp theo là <filters />
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">listing_name.listing_name.listing_columns</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="templates" xsi:type="array">
<item name="filters" xsi:type="array">
<item name="select" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
<item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">listing_name.listing_name.listing_columns.${ $.index }:visible</item>
</item>
</item>
</item>
<item name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</item>
</argument>
</filters>
Nút này xác định cấu hình cho lọc cột hiển thị sau khi nhấp vào nút "Bộ lọc" ở trên cùng bên phải trên lưới. columnsProvidertheo cấu trúc tương tự như các nút trước đó, vì vậy [list_name_from_layout]. [List_name_from_layout]. [list_columns_node_name]. storegeConfigđi như [list_name_from_layout]. [list_name_from_layout]. [container_node_name] [bookmark_node_name]. Trong templatesnút mục, bạn có thể xác định tệp nào được sử dụng để hiển thị các tùy chọn bộ lọc cụ thể. Trong trường hợp này chỉ chọn được định nghĩa và nó sử dụng Magento/Ui/view/base/web/js/form/element/ui-select.jsnhư componentvà Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlnhư mẫu knock-out. Nhìn vào Magento/Ui/view/base/web/js/form/elementđể thấy những khả năng khác. Chỉ chọn được xác định ở đây để ghi đè các giá trị mặc định: Magento/Ui/view/base/web/js/form/element/select.jsvà Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Giá trị mặc định cho các bộ lọc và các nút khác được xác định trong Magento/Ui/view/base/ui_component/etc/definition.xml.
Nút tiếp theo là <massAction />và cho phép thêm hành động chọn khối vào lưới
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
<item name="indexField" xsi:type="string">database_id</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="*/*/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete items</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
</item>
</item>
</argument>
</action>
<action name="change_status">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">change_status</item>
<item name="label" xsi:type="string" translate="true">Change Status</item>
</item>
</argument>
<argument name="actions" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Company\Module\Ui\Component\MassAction\Status\Options</argument>
<argument name="data" xsi:type="array">
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Change Status</item>
<item name="message" xsi:type="string" translate="true">Are you sure to change status for selected feed(s)?</item>
</item>
</argument>
</argument>
</action>
</massaction>
nameđối số nên là duy nhất. Nút con đầu tiên <argument />xác định dữ liệu cơ bản. providertheo cấu trúc tương tự như các nút khác và tham chiếu đến tên nút cột và cột ids của nó. Cột này sẽ giữ các hộp kiểm với các mục được chọn để xử lý hàng loạt. componentđịnh nghĩa tập tin nào được sử dụng để kết xuất và xử lý hành động hàng loạt. Giá trị mặc định là Magento_Ui/js/grid/massactions(trỏ đến Magento/Ui/view/base/web/js/grid/massactions.js). Bạn có thể sử dụng Magento_Ui/js/grid/tree-massactionsđể thêm cấu trúc giống như cây. Trong trường hợp trên, tôi sử dụng nó để thêm hành động "Thay đổi trạng thái" hiển thị tùy chọn "bật" và "tắt". Sau <argument />nút bạn có thể thêm bao nhiêu <action />nút bao nhiêu hành động bạn muốn có. Mỗi <action />nút theo sơ đồ tương tự. Trong trường hợp đầu tiên (xóa hành động) nút yêu cầu tên duy nhất. Sau đó argumentchứa cấu hình trong đólabellà những gì hiển thị trong tùy chọn chọn, urlđiểm cuối để gửi dữ liệu và confirmthêm phương thức xác nhận trước khi gửi. Trong trường hợp hành động "Thay đổi trạng thái" urltrong argumentnút đầu tiên được thông báo vì các url được cung cấp cho mỗi trạng thái theo lớp được xác định trong argumentnút thứ hai . Lớp nên thực hiện giao diện Zend \ Stdlib \ JsonSerializable. Kiểm tra Magento\Customer\Ui\Component\MassAction\Group\Optionsnhư một tài liệu tham khảo.
Cuối cùng trong <container />nút chúng ta có <paging />nút xác định phân trang.
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">listing_name.listing_name.listing_columns.ids</item>
</item>
</argument>
</paging>
Cấu trúc cho providervà selectProvidernên rõ ràng ngay bây giờ.
Và nút cuối cùng cho lưới cơ bản là <columns />. Nó chứa tất cả các định nghĩa về các cột có sẵn để sử dụng bởi quản trị viên. Nút được định nghĩa là
<columns name="listing_columns"> ... </columns>
và thuộc tính name được sử dụng trong các nút khác khi đề cập đến nó. Con đầu lòng là
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">listing_name.listing_name.listing_top.bookmarks</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">name_listing.name_listing.listing_columns.actions</item>
<item name="target" xsi:type="string">applyAction</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">edit</item>
<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
</item>
</item>
</item>
</item>
</argument>
Những gì tôi đã làm ở đây chỉ là cung cấp providercác giá trị chính xác theo sơ đồ được sử dụng trong danh sách. fieldActionnút cho phép xác định hành động được kích hoạt khi nhấp vào ô. Cài đặt mặc định gọi hành động chỉnh sửa
Tiếp theo là <selectionColumns />
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">id</item>
</item>
</argument>
</selectionsColumn>
Nút này xác định cột với các hộp kiểm cho hành động hàng loạt để sử dụng. Tên của nó được gọi sau dấu chấm trong một số nút được mô tả ở trên.
Sau đó, bạn có thể thêm bất kỳ số lượng cột trong cùng định dạng:
<column name="name" class="Company\Module\Ui\Component\Listing\Column\Name">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Company\Module\Model\Source\Type</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">select</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="dataType" xsi:type="string">select</item>
<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
<item name="label" xsi:type="string" translate="true">Name</item>
<item name="sortOrder" xsi:type="number">80</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</column>
Không phải tất cả các nút bên trong hầu hết là cần thiết. Họ đang xác định:
filter- loại bộ lọc của cột. Điều này được sử dụng trong khối bộ lọc. Các giá trị khả dụng là: văn bản, chọn, dateRange. Nếu chọn được sử dụng <item name="options">...</item>sẽ được sử dụng như một lớp cung cấp các tùy chọn cho bộ lọc chọn
component- định nghĩa các tệp js được sử dụng để kết xuất cột. Tùy chọn có sẵn là trong Magento/Ui/view/base/web/js/grid/columns/*. chọn được cung cấp là bộ lọc được thiết lập để chọn. Đối với bộ lọc văn bản, giá trị này là không bắt buộc.
dataType- cung cấp thông tin về kiểu dữ liệu được sử dụng cho giá trị cột. Đối với chọn sử dụng cũng chọn, đối với dateRange sử dụng ngày
bodyTmpl- xác định tệp html được sử dụng bởi loại trực tiếp để kết xuất ô. Theo mặc định ui / lưới / ô / văn bản được sử dụng ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Các tùy chọn khác được đặt trong Magento/Ui/view/base/web/templates/grid/cells/*thư mục. ui/grid/cells/htmlcho phép sử dụng nội dung html trong ô.
label - điều này sẽ được hiển thị trong tiêu đề cột và khối bộ lọc
sortOrder - đặt hàng
visible- có hay không hiển thị cột. Điều này có thể được sử dụng để xác định các cột cho dấu trang nhưng không hiển thị chúng theo mặc định.
Cuối cùng, bạn có thể thêm các hành động phù thủy cột hành động có sẵn để làm cho một mục duy nhất
<actionsColumn name="actions" class="Company\Module\Ui\Component\Listing\Column\Actions">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">107</item>
<item name="indexField" xsi:type="string">database_id</item>
</item>
</argument>
</actionsColumn>
indexFieldđề cập đến tên cột trong cơ sở dữ liệu. Lớp hành động nên mở rộng Magento\Ui\Component\Listing\Columns\Columnvà định nghĩa prepareDataSourcephương thức. Xem Magento/Cms/Ui/Component/Listing/Column/PageActions.phpnhư một tài liệu tham khảo
3) để kết thúc lưới, chúng ta cần xác định một số thành phần trong Công ty / Mô-đun / etc / di.xml
Đầu tiên chúng ta định nghĩa lớp nhà cung cấp đã được sử dụng trong nút dataSource/class
<virtualType name="UniqueNameGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<arguments>
<argument name="collection" xsi:type="object" shared="false">Company\Module\Model\Resource\Item\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">UniqueNameItemIdFilterPool</argument>
</arguments>
</virtualType>
collectiongiải quyết lớp thu thập tiêu chuẩn và filerPoolđịnh nghĩa phần tử mới:
<virtualType name="UniqueNameItemIdFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<arguments>
<argument name="appliers" xsi:type="array">
<item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
<item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
</argument>
</arguments>
</virtualType>
Điều này rõ ràng phải làm một cái gì đó với lọc và tìm kiếm. Bây giờ tôi luôn sử dụng các giá trị mặc định.
Bây giờ chúng tôi đăng ký nguồn dữ liệu của chúng tôi:
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="listing_name_data_source" xsi:type="string">Company\Module\Model\Resource\Item\Grid\Collection</item>
</argument>
</arguments>
</type>
Trong trường hợp này, tên nút phải khớp với tên được sử dụng trong <dataSource />nút trong danh sách xml và nó giải quyết không phải là bộ sưu tập mà là lớp GridCollection. Nó nên mở rộng lớp thu thập thường xuyên và thực hiện bổ sung Magento\Framework\Api\Search\SearchResultInterface.
Cuối cùng, chúng tôi định cấu hình bộ sưu tập lưới của chúng tôi (tên đối số khá rõ ràng)
<type name="Company\Module\Model\Resource\Item\Grid\Collection">
<arguments>
<argument name="mainTable" xsi:type="string">database_table_name</argument>
<argument name="eventPrefix" xsi:type="string">name_for_events</argument>
<argument name="eventObject" xsi:type="string">event_object_name</argument>
<argument name="resourceModel" xsi:type="string">Company\Module\Model\Resource\Item</argument>
</arguments>
</type>