Meningkatkan Standar Magento 2 Grid dengan Komponen UI (Bagian 2)
Diterbitkan: 2016-10-18Pada artikel sebelumnya, kami telah menjelaskan cara membuat modul dengan kondisi dasar dan antarmuka yang memungkinkan kami bekerja dengannya. Selama proses pembuatan, kami menggunakan blok Magento standar. Namun, Magento 2 mampu melakukan lebih banyak hal.
Saya berbicara tentang kemungkinan untuk meningkatkan antarmuka dengan bantuan komponen UI. Komponen-komponen ini ditambahkan dengan modul Magento/UI.
*walaupun komponen ini dapat ditemukan di v.2.0, kami sangat menyarankan Anda untuk menggunakan versi 2.1.
Dari artikel ini, Anda akan mempelajari cara membuat ulang Grid standar (terletak di layout: app/code/Vendor/Rules/view/adminhtml/layout/vendor_rules_example_rule_index.xml ) dan memperkayanya dengan komponen UI.
Bandingkan saja. Ini adalah jaringan lama:
dengan yang baru, dibuat dengan komponen UX:
Seperti yang Anda lihat, Grid yang ditingkatkan akan jauh lebih ramah pengguna dan menghemat waktu, lebih mudah untuk diskalakan, memiliki banyak fitur tambahan yang hebat (misalnya bookmark yang mampu menyimpan status Grid saat ini) dan mengatur filter cerdas.
Jadi ayo mulai.
Pertama, Anda perlu membuat beberapa perubahan pada modul. Di bawah ini adalah cara melakukannya:
1) Buat file baru untuk mendeklarasikan komponen yang diperlukan:
> aplikasi/kode/Vendor/Aturan/etc/di.xml
<?xml versi="1.0"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="VendorRulesRuleGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
<argumen>
<argument name="collection" xsi:type="object" shared="false">Vendor\Rules\Model\ResourceModel\Rule\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">VendorRulesRuleGridFilterPool</argument>
</argumen>
</virtualType>
<virtualType name="VendorRulesRuleGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<argumen>
<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>
</argumen>
</argumen>
</virtualType>
<type name="Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection">
<argumen>
<argument name="mainTable" xsi:type="string">vendor_rules</argument>
<argument name="eventPrefix" xsi:type="string">vendor_rules_rule_grid_collection</argument>
<argument name="eventObject" xsi:type="string">rule_grid_collection</argument>
<argument name="resourceModel" xsi:type="string">Vendor\Rules\Model\ResourceModel\Rule</argument>
</argumen>
</jenis>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<argumen>
<argument name="collections" xsi:type="array">
<item name="vendor_rules_rule_listing_data_source" xsi:type="string">Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection</item>
</argumen>
</argumen>
</jenis>
</config>
VendorRulesRuleGridDataProvide — tipe virtual ini menyediakan data untuk kisi aturan UI. VendorRulesRuleGridFilterPool , pada gilirannya, menambahkan fungsionalitas pemfilteran yang memungkinkan Anda menambahkan/ memodifikasi filter yang ada.
Catatan, untuk membuat Grid berfungsi dengan benar dengan koleksi khusus ini, Anda perlu menambahkannya ke daftar semua koleksi yang tersedia. Untuk melakukannya, tambahkan vendor_rules_rule_listing_data_source dengan kelas berbasis nilai koleksi: Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection into Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory collections.
2) Untuk UI Grid, kita memerlukan koleksi terpisah yang akan mewakili antarmuka `Magento\Framework\Api\Search\SearchResultInterface` .
Ini berisi metode standar yang memungkinkan Anda bekerja dengan Grid dan filter. Kelas ini dapat disesuaikan dengan kebutuhan pribadi Anda dengan mengubah cara kerja pencarian berdasarkan koleksi .
> app/code/Vendor/Aturan/Model/ResourceModel/Rule/Grid/Collection.php
<?php
namespace Vendor\Rules\Model\ResourceModel\Rule\Grid;
gunakan Vendor\Rules\Model\ResourceModel\Rule\Collection sebagai RuleCollection;
gunakan Magento\Framework\Api\Search\SearchResultInterface;
gunakan Magento\Framework\Api\SearchCriteriaInterface;
gunakan Magento\Framework\Data\Collection\Db\FetchStrategyInterface;
gunakan Magento\Framework\Data\Collection\EntityFactory;
gunakan Magento\Framework\Event\ManagerInterface;
gunakan Magento\Framework\Model\ResourceModel\Db\AbstractDb;
gunakan Psr\Log\LoggerInterface;
Class Collection memperluas RuleCollection mengimplementasikan SearchResultInterface
{
/**
* Agregasi
*
* @var \Magento\Framework\Search\AggregationInterface
*/
$agregasi yang dilindungi;
/**
* konstruktor
*
* @param \Magento\Framework\Data\Collection\EntityFactory $entityFactory
* @param \Psr\Log\LoggerInterface $logger
* @param \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy
* @param \Magento\Framework\Event\ManagerInterface $eventManager
* @param $mainTable
* @param $eventPrefix
* @param $eventObject
* @param $resourceModel
* @param $model
* @param $koneksi
* @param \Magento\Framework\Model\ResourceModel\Db\AbstractDb $sumber daya
*/
fungsi publik __konstruksi(
EntityFactory $entityFactory,
LoggerInterface $logger,
FetchStrategyInterface $fetchStrategy,
ManagerInterface $eventManager,
$mainTable,
$eventAwalan,
$eventObject,
$sumberdayaModel,
$model = 'Magento\Framework\View\Element\UiComponent\DataProvider\Document',
$koneksi = nol,
AbstractDb $sumber daya = null
) {
induk::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $connection, $resource);
$this->_eventPrefix = $eventPrefix;
$this->_eventObject = $eventObject;
$this->_init($model, $resourceModel);
$this->setMainTable($mainTable);
}
/**
* @return \Magento\Framework\Search\AggregationInterface
*/
fungsi publik getAggregations()
{
kembalikan $this->agregasi;
}
/**
* @param \Magento\Framework\Search\AggregationInterface $agregasi
* @kembalikan $ini
*/
fungsi publik setAggregations($aggregations)
{
$this->agregasi = $agregasi;
}
/**
* Ambil semua id untuk koleksi
* Kompatibilitas mundur dengan koleksi EAV
*
* @param int $limit
* @param int $offset
* @return array
*/
fungsi publik getAllIds($limit = null, $offset = null)
{
return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
}
/**
* Dapatkan kriteria pencarian.
*
* @return \Magento\Framework\Api\SearchCriteriaInterface|null
*/
fungsi publik getSearchCriteria()
{
kembali nol;
}
/**
* Tetapkan kriteria pencarian.
*
* @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
* @kembalikan $ini
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
set fungsi publikSearchCriteria(SearchCriteriaInterface $searchCriteria = null)
{
kembalikan $ini;
}
/**
* Dapatkan jumlah total.
*
* @kembali ke
*/
fungsi publik getTotalCount()
{
kembalikan $this->getSize();
}
/**
* Atur jumlah total.
*
* @param int $totalCount
* @kembalikan $ini
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
fungsi publik setTotalCount($totalCount)
{
kembalikan $ini;
}
/**
* Atur daftar item.
*
* @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
* @kembalikan $ini
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
fungsi publik setItems(array $items = null)
{
kembalikan $ini;
}
}
?>3) Ubah koleksi utama dengan cara yang dijelaskan di bawah ini (penting, karena koleksi khusus kami diwarisi darinya). Anda harus membuat perubahan berikut:
> aplikasi/kode/Vendor/Aturan/Model/ResourceModel/Aturan/Koleksi.php
<?php
namespace Vendor\Rules\Model\ResourceModel\Rule;
Koleksi kelas meluas \Magento\Rule\Model\ResourceModel\Rule\Collection\AbstractCollection
{
/**
* Tetapkan model sumber daya dan tentukan pemetaan lapangan
*
* @kembali batal
*/
fungsi yang dilindungi _construct()
{
$this->_init('Vendor\Rules\Model\Rule', 'Vendor\Rules\Model\ResourceModel\Rule');
}
/**
* Filter koleksi berdasarkan tanggal yang ditentukan.
* Filter koleksi hanya aturan aktif.
*
* @param string|null $sekarang
* @gunakan $this->addStoreGroupDateFilter()
* @kembalikan $ini
*/
fungsi publik setValidationFilter($now = null)
{
if (!$this->getFlag('validation_filter')) {
$this->addDateFilter($now);
$this->addIsActiveFilter();
$this->setOrder('sort_order', self::SORT_ORDER_DESC);
$this->setFlag('validation_filter', true);
}
kembalikan $ini;
}
/**
* Dari tanggal atau hingga filter tanggal
*
* @param $sekarang
* @kembalikan $ini
*/
fungsi publik addDateFilter($now)
{
$this->getSelect()->dimana(
'from_date is null atau from_date <= ?',
$sekarang
)->dimana(
'to_date is null atau to_date >= ?',
$sekarang
);
kembalikan $ini;
}
}
?>
4) Selanjutnya, hapus markup lama dari tata letak Grid dan tambahkan daftar UI di sana:
> aplikasi/kode/Vendor/Aturan/view/adminhtml/layout/vendor_rules_example_rule_index.xml
<?xml versi="1.0"?>
<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<tubuh>
<referenceBlock name="menu">
<metode tindakan="setActive">
<argument name="itemId" xsi:type="string">Vendor_Rules::vendor_rules</argument>
</tindakan>
</referenceBlock>
<referenceBlock name="page.title">
<metode tindakan="setTitleClass">
<argument name="class" xsi:type="string">kompleks</argument>
</tindakan>
</referenceBlock>
<referenceContainer name="content">
<uiComponent name="vendor_rules_rule_listing"/>
</referenceContainer>
</tubuh>
</halaman>Pada dasarnya, kami hanya menambahkan ` vendor_rules_rule_listing` yang disebutkan ke dalam konten halaman (tindakan utama), mengubah status menu produk kami menjadi 'Aktif', dan mengatur kelas judul.
5) Pada langkah selanjutnya, kami membuat daftar UI, yang akan ditempatkan di sini:
> app/code/Vendor/Aturan/view/adminhtml/ui_component/vendor_rules_rule_listing.xml
<?xml versi="1.0"?>
<listing xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
<nama argumen="data" xsi:type="array">
<nama item="js_config" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing_data_source</item>
<item name="deps" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">vendor_rules_rule_columns</item>
<nama item="tombol" xsi:type="array">
<nama item="tambahkan" xsi:type="array">
<item name="name" xsi:type="string">tambahkan</item>
<item name="label" xsi:type="string" translate="true">Tambahkan Aturan Baru</item>
<item name="class" xsi:type="string">primer</item>
<item name="url" xsi:type="string">*/*/newaction</item>
</item>
</item>
</argumen>
<nama sumber data="vendor_rules_rule_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">VendorRulesRuleGridDataProvider</argument>
<argument name="name" xsi:type="string">vendor_rules_rule_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">rule_id</argument>
<argument name="requestFieldName" xsi:type="string">rule_id</argument>
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<nama item="update_url" xsi:type="url" path="mui/index/render"/>
</item>
</argumen>
</argumen>
<nama argumen="data" xsi:type="array">
<nama item="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argumen>
</dataSource>
<nama wadah="listing_top">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
<item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
</item>
</argumen>
<nama bookmark="bookmark">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<nama item="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">vendor_rules_rule_listing</item>
</item>
</item>
</argumen>
</bookmark>
<nama komponen="columns_controls">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<nama item="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_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>
</argumen>
</komponen>
<filters name="listing_filters">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns</item>
<nama item="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<nama item="template" xsi:type="array">
<nama item="filter" xsi:type="array">
<nama item="pilih" 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>
<nama item="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.listing_filters</item>
<nama item="impor" xsi:type="array">
<item name="visible" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.${ $.index }:visible</item>
</item>
</item>
</item>
<nama item="pengamat" xsi:type="array">
<item name="column" xsi:type="string">kolom</item>
</item>
</argumen>
</filter>
<nama halaman="listing_paging">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<nama item="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids</item>
</item>
</argumen>
</halaman>
</wadah>
<nama kolom="vendor_rules_rule_columns">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<nama item="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">saat ini</item>
</item>
</item>
</argumen>
<selectionsColumn name="id">
<nama argumen="data" xsi:type="array">
<nama item="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">rule_id</item>
</item>
</argumen>
</selectionsColumn>
<nama kolom="rule_id">
<nama argumen="data" xsi:type="array">
<nama item="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<nama item="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="dataType" xsi:type="string">teks</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="align" xsi:type="string">kiri</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="sortOrder" xsi:type="number">1</item>
</item>
</argumen>
</kolom>
<nama kolom="nama">
<nama argumen="data" xsi:type="array">
<nama item="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<nama item="config" xsi:type="array">
<item name="filter" xsi:type="string">teks</item>
<item name="dataType" xsi:type="string">teks</item>
<item name="align" xsi:type="string">kiri</item>
<item name="label" xsi:type="string" translate="true">Nama</item>
</item>
</argumen>
</kolom>
<nama kolom="is_active">
<nama argumen="data" xsi:type="array">
<nama item="opsi" xsi:type="array">
<nama item="aktif" xsi:type="array">
<nama item="nilai" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Aktif</item>
</item>
<nama item="tidak aktif" xsi:type="array">
<nama item="nilai" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">Tidak aktif</item>
</item>
</item>
<nama item="config" xsi:type="array">
<item name="filter" xsi:type="string">pilih</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="editor" xsi:type="string">pilih</item>
<item name="dataType" xsi:type="string">pilih</item>
<item name="label" xsi:type="string" translate="true">Aktif</item>
<item name="sortOrder" xsi:type="number">65</item>
</item>
</argumen>
</kolom>
<nama kolom="sort_order">
<nama argumen="data" xsi:type="array">
<nama item="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<nama item="config" xsi:type="array">
<item name="filter" xsi:type="string">teks</item>
<item name="dataType" xsi:type="string">nomor</item>
<item name="align" xsi:type="string">kiri</item>
<item name="label" xsi:type="string" translate="true">Prioritas</item>
</item>
</argumen>
</kolom>
<nama kolom="from_date" class="Magento\Ui\Component\Listing\Columns\Date">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="sorting" xsi:type="string">desc</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="dataType" xsi:type="string">tanggal</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Mulai</item>
</item>
</argumen>
</kolom>
<nama kolom="to_date" class="Magento\Ui\Component\Listing\Columns\Date">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="sorting" xsi:type="string">desc</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="dataType" xsi:type="string">tanggal</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">End</item>
</item>
</argumen>
</kolom>
<actionsColumn name="actions" class="Vendor\Rules\Ui\Component\Listing\Column\RuleActions">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="indexField" xsi:type="string">rule_id</item>
<item name="urlEntityParamName" xsi:type="string">rule_id</item>
<item name="sortOrder" xsi:type="number">70</item>
</item>
</argumen>
</actionsColumn>
</kolom>
<nama wadah="lengket">
<nama argumen="data" xsi:type="array">
<nama item="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
<item name="toolbarProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top</item>
<item name="listingProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns</item>
</item>
</argumen>
</wadah>
</daftar>
Listing ` dataSource `berisi tautan ke ` dataProvider ` – tipe yang telah kita buat di ` di.xml` . Ini berisi data input yang diperlukan untuk Grid.
Dari sini, kita perlu mendefinisikan kunci yang diajukan — dalam kasus kita ini adalah ` rule_id` .
Selain itu, Anda juga dapat menambahkan tombol khusus, cukup jelaskan di bagian 'tombol'. Dalam contoh kami, kami telah menambahkan tombol 'Tambah' standar dengan alamat ` */*/newaction ` ( * di jalur sesuai dengan arti saat ini).
` container name="listing_top" ` berisi beberapa komponen daftar tambahan: filter, pagination, dll. Anda dapat mengubahnya sesuai dengan kebutuhan pribadi Anda.
` column name=“vendor_rules_rule_columns” ` berisi kolom yang hampir sama, seperti pada Grid default. Satu-satunya perbedaan yang berarti adalah kolom ` actionColumn` baru yang memperkenalkan serangkaian tindakan: edit dan hapus. Tindakan ini juga dapat diperpanjang, jika diperlukan.
Seperti yang mungkin Anda perhatikan, kolom ini memiliki kelas baru. Mari kita pelajari bagaimana kita bisa membuatnya:
> app/code/Vendor/Aturan/Ui/Component/Listing/Column/RuleActions.php
<?php
namespace Vendor\Rules\Ui\Component\Listing\Column;
class RuleActions meluas \Magento\Ui\Component\Listing\Columns\Column
{
/**
* Jalur url untuk diedit
*
* @var string
*/
const URL_PATH_EDIT = 'vendor_rules/example_rule/edit';
/**
* Jalur url untuk dihapus
*
* @var string
*/
const URL_PATH_DELETE = 'vendor_rules/example_rule/delete';
/**
* Pembuat URL
*
* @var \Magento\Framework\UrlInterface
*/
dilindungi $urlBuilder;
/**
* Konstruktor
*
* @param \Magento\Framework\UrlInterface $urlBuilder
* @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
* @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
* @param array $komponen
* @param array $data
*/
fungsi publik __konstruksi(
\Magento\Framework\UrlInterface $urlBuilder,
\Magento\Framework\View\Element\UiComponent\ContextInterface $konteks,
\Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
larik $komponen = [],
larik $data = []
) {
$this->urlBuilder = $urlBuilder;
induk::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* Siapkan Sumber Data
*
* @param array $dataSource
* @return array
*/
fungsi publik prepareDataSource(array $dataSource)
{
if (!isset($dataSource['data']['items'])) {
kembalikan $dataSource;
}
foreach ($dataSource['data']['items'] as &$item) {
if (!isset($item['rule_id'])) {
melanjutkan;
}
$item[$this->getData('nama')] = [
'edit' => [
'href' => $this->urlBuilder->getUrl(
statis::URL_PATH_EDIT,
[
'id' => $item['rule_id'],
]
),
'label' => __('Edit'),
],
'hapus' => [
'href' => $this->urlBuilder->getUrl(
statis::URL_PATH_DELETE,
[
'id' => $item['rule_id'],
]
),
'label' => __('Hapus'),
'konfirmasi' => [
'title' => __('Hapus "${ $.$data.name }"'),
'message' => __('Apakah Anda yakin ingin menghapus aturan "${ $.$data.name }" ?'),
],
],
];
}
kembalikan $dataSource;
}
}
?>Kelas ini bertanggung jawab untuk memproses tindakan dari Grid. Dari sini, dimungkinkan untuk mengubah URL atau nama parameter yang dikirimkan. Dalam kasus kami, kuncinya adalah rule_id (ditransmisikan dengan nama 'id', untuk memudahkan pemahaman nilainya).
Ini terlihat seperti ini:
Jika Anda telah melakukan semuanya dengan benar, grid Anda akan terlihat seperti ini:
Seperti yang dapat kita lihat dari contoh, cukup mudah untuk mengubah Grid standar yang ada menjadi UI. Selain memperluas fungsionalitas Grid standar, ini juga memungkinkan Anda untuk menyederhanakan bekerja dengan bagian fungsi Magento 2 ini.
PS Dalam artikel seri berikutnya, kita akan menjelaskan kemungkinan penambahan massa—aksi dan kolom tambahan.
Pantau terus!