Penjelasan tentang Grid Komponen UI di Magento 2

91

Apakah ada penjelasan dan / atau contoh konfigurasi minimum yang diperlukan untuk membuat Grid Komponen UI di Magento 2?

Saya tahu ada banyak sekali komponen inti, seperti

./vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml

Namun, file XML ini bersifat ekspansif, dan ada sedikit penjelasan tentang apa yang dilakukan setiap node, dan bagaimana Anda akan menggunakan ini untuk membangun kisi dari awal.

Ada juga modul sampel ini , tetapi itu

  1. Tampaknya kedepan formulir
  2. Tidak memiliki konteks / penjelasan tentang apa yang dilakukan setiap node

Saya mencari informasi "memulai" yang memungkinkan saya membuat kisi untuk koleksi model CRUD saya sendiri.

magento2 php layout uicomponent Alan Storm
sumber
6
Tidak cukup layak jawaban lengkap - tetapi seri Komponen UI saya adalah tempat yang baik untuk memulai: alanstorm.com/category/magento-2/#magento-2-ui
Alan Storm

Jawaban:

167

[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>
Zefiryn
sumber
1
apakah Anda mendapatkan kesempatan untuk melihat utas saya
Bojjaiah
13
Sejauh ini saya masih bisa mengalahkan dokumen, sejauh yang saya bisa lihat.
Aaron Pollock
2) uiComponent didefinisikan dalam Perusahaan / Modul / view / adminhtml / ui_component / listing_name.xml. Jadi, pada dasarnya, komponen grid tidak berfungsi di frontend?
Lachezar Raychev
posting lama saya tahu - tapi, saya sudah sampai di sini, mengikutinya (terima kasih btw, pasti salah satu penjelasan paling rinci tentang hal ini di luar sana) tapi saya mendapatkan kesalahan yang tidak tertangkap sehubungan dengan collectionFactory. khususnya fungsi argumentsResolver. Dikatakan argumen 2 harus berupa array tetapi null diberikan - Saya telah melakukan semua hal di atas - tetapi apakah ada hal lain yang harus saya lakukan? :)
treyBake
1
@AshishViradiya tautan yang diperbarui ada di atas, di bawah bagian [EDIT 3 Okt 2018]
Zefiryn
9

Untuk kisi kita membutuhkan dua file utama, satu adalah ui_component xml dan yang kedua adalah di.xml

Saya harap Anda tahu di file layout xml Anda perlu menambahkan tag uiComponent, yaitu - 

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="test_lists_listing"/>
        </referenceContainer>
    </body>
</page>

sekarang Anda perlu membuat test_lists_listing.xmlfolder di ui_component.

Misalnya app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

File ini memiliki jumlah tag

  1. <argument name="data" xsi:type="array"> : - perlu menyebutkan arugemnt seperti tombol js dll.

  2. <dataSource name="test_lists_listing_data_source">: - blok ini digunakan untuk memasok data untuk kisi-kisi dalam argumen ini <argument name="class" xsi:type="string">ListsGridDataProvider</argument>yang perlu kami sebutkan di.xml(dijelaskan di bagian di.xml )

  3. <container name="listing_top"> : - dalam blok ini kami menyebutkan filter, ekspor, bookmark (yang menyimpan data dalam tabel ui_bookmark), massaction, paging, dan fulltext (untuk melakukan pencarian teks lengkap dalam pengaturan atau tabel kolom yang harus indeks fulltext)

  4. <columns name="test_lists_columns"> : - dalam hal ini kita perlu menyebutkan semua kolom

Terakhir ada di di.xml 

<virtualType name="TestGirdFilterPool" 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>  


<virtualType name="ListsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Sugarcode\Test\Model\ResourceModel\Test\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">TestGirdFilterPool</argument>
    </arguments>
</virtualType>  


<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="test_lists_listing_data_source" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection</item>
        </argument>
    </arguments>
</type>
<type name="Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">testtable</argument>
        <argument name="eventPrefix" xsi:type="string">test_test_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">test_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test</argument>
    </arguments>
</type>
  1. TestGirdFilterPool: - sebutkan filter
  2. ListsGridDataProvider: - yang saya sebutkan di ui xml untuk penyedia data
  3. CollectionFactory: - perlu menyebutkan koleksi
  4. Kisi / Koleksi: - dalam hal ini kita harus melewati semua params seperti nama tabel, koleksi dll.

app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
            <item name="deps" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">test_lists_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 Info</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="test_lists_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">ListsGridDataProvider</argument>
            <argument name="name" xsi:type="string">test_lists_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">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>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>
        <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">test_lists_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                </item>
            </argument>
        </exportButton>
        <container 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">test_lists_listing.test_lists_listing.test_lists_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>
        </container>
        <filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/search/search</item>
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">

            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.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">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
            </argument>


            <filterSelect name="status">
                <argument name="optionsProvider" xsi:type="configurableObject">
                    <argument name="class" xsi:type="string">Sugarcode\Test\Model\Status</argument>
                </argument>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="caption" xsi:type="string" translate="true">Select...</item>
                        <item name="label" xsi:type="string" translate="true">Status</item>
                    </item>
                </argument>
            </filterSelect>

        </filters>

        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="indexField" xsi:type="string">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="test/lists/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="edit">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">edit</item>
                        <item name="label" xsi:type="string" translate="true">Edit</item>
                        <item name="callback" xsi:type="array">
                            <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns_editor</item>
                            <item name="target" xsi:type="string">editSelected</item>
                        </item>
                    </item>
                </argument>
            </action>
            <action name="disable">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">disable</item>
                        <item name="label" xsi:type="string" translate="true">Disable</item>
                        <item name="url" xsi:type="url" path="test/lists/massDisable"/>
                    </item>
                </argument>
            </action>
            <action name="enable">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">enable</item>
                        <item name="label" xsi:type="string" translate="true">Enable</item>
                        <item name="url" xsi:type="url" path="test/lists/massEnable"/>
                    </item>
                </argument>
            </action>
        </massaction>

        <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">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                    <item name="options" xsi:type="array">
                        <item name="20" xsi:type="array">
                            <item name="value" xsi:type="number">20</item>
                            <item name="label" xsi:type="string" translate="true">20</item>
                        </item>
                        <item name="30" xsi:type="array">
                            <item name="value" xsi:type="number">30</item>
                            <item name="label" xsi:type="string" translate="true">30</item>
                        </item>
                        <item name="50" xsi:type="array">
                            <item name="value" xsi:type="number">50</item>
                            <item name="label" xsi:type="string" translate="true">50</item>
                        </item>
                        <item name="100" xsi:type="array">
                            <item name="value" xsi:type="number">100</item>
                            <item name="label" xsi:type="string" translate="true">100</item>
                        </item>
                        <item name="200" xsi:type="array">
                            <item name="value" xsi:type="number">200</item>
                            <item name="label" xsi:type="string" translate="true">200</item>
                        </item>
                    </item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="test_lists_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="editorConfig" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="clientConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="test/lists/inlineEdit"/>
                        <item name="validateBeforeSave" xsi:type="boolean">false</item>
                    </item>
                </item>

                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_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 name="controlVisibility" xsi:type="boolean">true</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.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>
            </item>
        </argument>     
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn> 
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>   
         <column name="order_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="filter_index" xsi:type="string">o.increment_id</item>
                    <item name="add_field" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Order ID</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>       
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>

        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Sugarcode\Test\Model\Status</item>
                <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                </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="editor" xsi:type="string">select</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
        </column>   


        <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Created</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                </item>
            </argument>
        </column>

        <actionsColumn name="actions" class="Sugarcode\Test\Ui\Component\Listing\Column\TestActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>
Pradeep Kumar
sumber
sortOrder tidak berfungsi untuk kolom pilihan. Jangan mengapa itu akhirnya datang
Bhupendra Jadeja
6

Tambahan Jawaban Atas

Jawaban teratasnya bagus, saya ikuti untuk membuat halaman daftar. Tapi ada masalah :

Saat Anda menerapkan filter, lalu menghapus filter, konten baris yang sama akan berulang di seluruh kisi halaman .

Larutan

Di <dataSource />simpul, di bawah <item name="update_url" xsi:type="url" path="mui/index/render"/>, tambahkan konten:

<item name="storageConfig" xsi:type="array">
    <item name="indexField" xsi:type="string">entity_id</item>
</item>

entity_id adalah kunci utama untuk koleksi daftar.

Key Shang
sumber
4

Saya menemukan jawaban Zefiryn sangat membantu dan cara yang bagus untuk memulai tanpa membaca dokumentasi lengkap dari Magento.

Yang mengatakan saya tidak mendapatkan banyak hal mengikuti jawaban ini. Terlebih lagi, begitu halaman daftar Anda berfungsi, Anda akan segera menginginkan antarmuka CRUD lainnya.

Saya menemukan modul sampel di github . Dimulai dengan utas ini untuk orientasi, kemudian porting / peretasan kode dari plugin sampel ternyata menjadi cara tercepat untuk mendapatkan antarmuka CRUD terhadap tabel kustom.

quickshiftin
sumber