[EDIT 3 Okt 2018]
Perbarui untuk tautan ke devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html dan https://devdocs.magento.com/guides/v2. 0 / ui-components / ui-secondary.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 21 Jan 2016]
Pada 20/01/2016 magento2 devdocs telah diperbarui dengan dokumentasi tambahan komponen UI. Saya belum memeriksanya secara ekstensif tetapi mereka mungkin berisi lebih banyak informasi daripada respons yang saya berikan beberapa hari yang lalu, jadi untuk kepentingan waktu Anda, Anda mungkin ingin melihat http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-secondary.html
[/SUNTING]
Saya telah bekerja dengan Magento2 selama lebih dari sebulan sekarang dan inilah yang saya perhatikan tentang cara baru membuat kisi-kisi.
Komponen grid Magento 2 UI
1) file tata letak di dalam Company/Module/view/adminhtml/layout/module_controller_action.xmldefine grid sebagai uiComponent dengan:
<?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 didefinisikan dalam Company/Module/view/adminhtml/ui_component/listing_name.xmlfile. Nama file harus sama dengan nama uiComponent yang digunakan dalam file tata letak. Struktur file mungkin tampak cukup kompleks pada pandangan pertama tetapi seperti biasa ini adalah beberapa node yang berulang. Untuk membuatnya sederhana, mari kita iris. Simpul utama dari file komponen adalah <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Itu diperbaiki dan saya percaya itu memerlukan atribut lokasi namespace. Berikutnya ada biasanya 4 node di dalam <listing />simpul: <argument />, <dataSource />, <container />dan <columns />. Namun ini bukan pengaturan yang ketat karena <argument />simpul mungkin diduplikasi untuk menyediakan lebih banyak konfigurasi atau <container />seperti dalam daftar halaman cms yang menambahkan wadah "lengket" karena beberapa alasan.
Node pertama adalah <argument />. Node ini mendefinisikan data untuk komponen. Biasanya Anda perlu memberikan sesuatu seperti ini:
<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 />simpul membutuhkan atribut name. Dalam hal ini datamendefinisikan informasi dasar tentang komponen. Ini berisi beberapa <item />simpul untuk setiap bagian spesifik dari konfigurasi. js_configmemberitahu komponen di mana penyedia data dan dependensi dalam konfigurasi xml daftar (yang saya pikir dikonversi ke hash javascript). providernilai terdiri dari daftar nama yang digunakan dalam file tata letak dan nama sumber data unik yang akan digunakan nanti. Dalam daftar itu saya memeriksa magento providerdan depssama. Saya tidak yakin apa gunanya memiliki perbedaan ini. spinnermengambil nama node tempat kolom grid didefinisikan. buttonsmemungkinkan untuk menambahkan tombol ke bagian atas kotak. Dalam kebanyakan kasus itu hanya Add newtombol. Tombol memiliki beberapa elemen:namedigunakan sebagai id elemen, labeladalah apa yang dikatakan tombol, classadalah kelas tombol dan urlmerupakan tautan yang ditunjuknya. Asteriks digantikan oleh bagian dari url saat ini. Mungkin lain <item />node tombol adalah: id, title, type(reset, mengirimkan atau tombol), onclick(bukan url, itu mendahului), style, value, disabled. Elemen tombol diberikan oleh Magento\Ui\Component\Control\Buttonkelas.
Selanjutnya kita memiliki <dataSource />simpul:
<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>
namedigunakan dalam <dataSource />simpul harus cocok dengan yang digunakan dalam argument/js_config/providerdan argument/js_config/deps. Node berikutnya mendefinisikan kelas mana yang bertanggung jawab untuk menyiapkan data untuk grid. classargumen membutuhkan nama unik yang akan dicocokkan di.xml. primaryFieldNameberkaitan dengan kolom primer basis data dan requestFieldNamevariabel dalam permintaan http. Mereka mungkin sama tetapi tidak harus, daftar halaman menggunakan CMS page_idsebagai primaryFieldNamedan idsebagai requestFieldName. update_urlmengacu pada titik masuk di mana ajax panggilan untuk pemfilteran dan penyortiran dikirim. Argumen kedua <dataSource />mengacu pada file javascript yang menangani js bagian dari mengirim dan memproses panggilan ajax untuk grid. File default adalah Magento/Ui/view/base/web/js/grid/provider.js.
Node lain adalah <container />.
<container name="listing_top"> ... </container>
Karena mengandung banyak data, izinkan saya membaginya juga. Anak-anaknya adalah bagian dari seluruh halaman. Anak pertama <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>
Ini mendefinisikan knockout template yang bertanggung jawab untuk menangani tata letak dan semua tindakan dan dengan poin default Magento/Ui/view/base/web/templates/grid/toolbar.html
Node berikutnya adalah (atau bisa juga) <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>
Node ini menambahkan fitur bookmark ke grid. Ini memungkinkan admin untuk mengatur "profil" yang berbeda dari kisi yang menampilkan kolom yang berbeda. Berkat itu, Anda dapat menambahkan semua kolom dari tabel ke kisi dan membiarkan pengguna memutuskan informasi mana yang relevan dengannya. namespaceharus sama dengan nama yang digunakan dalam file tata letak.
Node lain adalah <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>
Kami memiliki 3 nilai untuk dikonfigurasi di sini. Pertama adalah provideryang mengikuti pola [listing_name_from_layout]. [Listing_name_from_layout]. [Listing_columns_node_name] (seperti pada listing node / argumen / spinner). componentmerujuk ke file js yang menampilkan kisi dan dengan titik default Magento/Ui/view/base/web/js/grid/controls/columns.jsyang menggunakan template Magento/Ui/view/base/web/templates/grid/controls/columns.html. Item terakhir adalah displayAreayang menentukan di mana kontrol kolom perlu ditampilkan. Itu merujuk getRegion('dataGridActions')pada file yang didefinisikan dalam container/argument/config/template(default:) Magento/Ui/view/base/web/templates/grid/toolbar.html.
Node berikutnya adalah <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>
Node ini menambahkan pencarian teks lengkap ke halaman. Itu terletak di atas grid sebagai bidang input teks tunggal dengan "Cari berdasarkan kata kunci" sebagai placeholder. Saya tidak yakin opsi apa yang mungkin ada di sini karena saya tidak bermain sebanyak ini tetapi listing_filters_chips merujuk ke Magento/Ui/view/base/web/js/grid/filters/chips.jsfile.
Node berikutnya adalah <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>
Node ini mendefinisikan konfigurasi untuk pemfilteran kolom yang terlihat setelah mengklik tombol "Filter" di kanan atas grid. columnsProvidermengikuti struktur yang sama seperti node sebelumnya, jadi [listing_name_from_layout]. [listing_name_from_layout]. [listing_columns_node_name]. storegeConfigseperti [listing_name_from_layout]. [listing_name_from_layout]. [container_node_name] [bookmark_node_name]. Dalam templatessimpul item, Anda dapat menentukan file mana yang digunakan untuk memberikan opsi filter tertentu. Dalam hal ini hanya pilih yang didefinisikan dan menggunakan Magento/Ui/view/base/web/js/form/element/ui-select.jssebagai componentdan Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlsebagai templat knockout. Lihatlah ke dalam Magento/Ui/view/base/web/js/form/elementuntuk melihat kemungkinan lain. Hanya pilih yang ditentukan di sini untuk mengganti nilai default: Magento/Ui/view/base/web/js/form/element/select.jsdan Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Nilai default untuk filter dan node lain didefinisikan dalam Magento/Ui/view/base/ui_component/etc/definition.xml.
Node berikutnya adalah <massAction />dan memungkinkan untuk menambahkan aksi massa pilih ke grid
<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>
nameargumen harus unik. Node anak pertama <argument />mendefinisikan data dasar. providermengikuti struktur yang sama dengan node lain dan merujuk ke nama simpul kolom dan kolom id-nya. Kolom ini akan berisi kotak centang dengan item yang dipilih untuk diproses secara massal. componentmendefinisikan file apa yang digunakan untuk membuat dan menangani aksi massal. Nilai default adalah Magento_Ui/js/grid/massactions(menunjuk ke Magento/Ui/view/base/web/js/grid/massactions.js). Anda dapat menggunakan Magento_Ui/js/grid/tree-massactionsuntuk menambahkan struktur seperti pohon. Dalam kasus di atas saya menggunakannya untuk menambahkan tindakan "Ubah status" yang menunjukkan opsi "aktifkan" dan "nonaktifkan". Setelah <argument />simpul, Anda dapat menambahkan sebanyak mungkin <action />simpul yang ingin Anda miliki. Setiap <action />node mengikuti skema serupa. Dalam kasus pertama (hapus tindakan) simpul membutuhkan nama yang unik. Kemudian argumentberisi konfigurasi di manalabeladalah apa yang terlihat dalam opsi pilih, urltitik akhir untuk mengirim data dan confirmmenambahkan modal konfirmasi sebelum mengirim. Dalam hal aksi "Ubah status" urldi argumentsimpul pertama dinonaktifkan karena url disediakan per status oleh kelas yang ditentukan dalam argumentsimpul kedua . Kelas harus mengimplementasikan antarmuka Zend \ Stdlib \ JsonSerializable. Periksa Magento\Customer\Ui\Component\MassAction\Group\Optionssebagai referensi.
Akhirnya di <container />simpul kita memiliki <paging />simpul yang mendefinisikan pagination.
<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>
Struktur untuk providerdan selectProviderharus jelas sekarang.
Dan simpul terakhir untuk grid dasar adalah <columns />. Ini berisi semua definisi kolom yang tersedia untuk digunakan oleh admin. Node didefinisikan sebagai
<columns name="listing_columns"> ... </columns>
dan atribut nama digunakan di node lain ketika merujuknya. Anak pertama adalah
<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>
Apa yang saya lakukan di sini hanya memberikan providernilai yang benar mengikuti skema yang digunakan dalam daftar. fieldActionsimpul memungkinkan untuk menentukan tindakan yang dipecat ketika diklik pada sel. Pengaturan default panggilan edit tindakan
Berikutnya adalah <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>
Node ini mendefinisikan kolom dengan kotak centang untuk tindakan massa yang akan digunakan. Nama-nama ini disebut setelah titik di beberapa node yang dijelaskan di atas.
Setelah itu Anda dapat menambahkan sejumlah kolom dalam format yang sama:
<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>
Tidak semua simpul item dalam diperlukan. Mereka mendefinisikan:
filter- jenis filter kolom. Ini digunakan dalam blok filter. Nilai yang tersedia adalah: teks, pilih, dateRange. Jika pilih digunakan <item name="options">...</item>akan digunakan sebagai kelas yang menyediakan opsi untuk filter pilih
component- Menentukan file js yang digunakan untuk membuat kolom. Opsi yang tersedia ada di Magento/Ui/view/base/web/js/grid/columns/*. pilih disediakan jika filter disetel untuk memilih. Untuk filter teks, nilai ini tidak diperlukan.
dataType- memberikan informasi tipe data yang digunakan untuk nilai kolom. Untuk pilih gunakan pilih juga, untuk dateRange tanggal digunakan
bodyTmpl- mendefinisikan file html yang digunakan oleh sistem gugur untuk membuat sel. Secara default ui / grid / sel / teks digunakan ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Opsi lain ada di Magento/Ui/view/base/web/templates/grid/cells/*direktori. ui/grid/cells/htmlmemungkinkan untuk menggunakan konten html dalam sel.
label - ini akan ditampilkan di header kolom dan blok filter
sortOrder - Memerintah
visible- Menampilkan kolom atau tidak. Ini dapat digunakan untuk menentukan kolom untuk bookmark tetapi tidak menunjukkannya secara default.
Pada akhirnya Anda bisa menambahkan aksi kolom aksi yang tersedia untuk satu item
<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>
indexFieldmengacu pada nama kolom dalam database. Kelas aksi harus meluas Magento\Ui\Component\Listing\Columns\Columndan mendefinisikan prepareDataSourcemetode. Lihat Magento/Cms/Ui/Component/Listing/Column/PageActions.phpsebagai referensi
3) untuk menyelesaikan grid, kita perlu mendefinisikan beberapa elemen di Company / Module / etc / di.xml
Pertama kita mendefinisikan kelas provider yang digunakan dalam node 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>
collectionmemutuskan ke kelas koleksi standar dan filerPoolmendefinisikan elemen baru:
<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>
Ini jelas ada hubungannya dengan penyaringan dan pencarian. Untuk saat ini saya selalu menggunakan nilai default.
Sekarang kami mendaftarkan sumber data kami:
<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>
Dalam hal ini nama simpul harus cocok dengan yang digunakan dalam <dataSource />simpul dalam daftar xml dan memutuskan untuk tidak mengumpulkan tetapi ke kelas GridCollection. Itu harus memperluas kelas koleksi reguler dan juga menerapkan Magento\Framework\Api\Search\SearchResultInterface.
Pada akhirnya kami mengkonfigurasi koleksi grid kami (nama argumen agak jelas)
<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>