UI Bileşenleri ile Standart Magento 2 Izgarasını Yükseltme (Bölüm 2)
Yayınlanan: 2016-10-18Bir önceki yazımızda, temel koşullar ve bunlarla çalışmamızı sağlayacak arayüz ile bir modülün nasıl oluşturulacağını anlatmıştık. Oluşturma işlemi sırasında standart Magento bloklarını kullandık. Ancak, Magento 2 çok daha fazlasını yapabilir.
UI bileşenleri yardımıyla arayüzü iyileştirme olasılığından bahsediyorum. Bu bileşenler Magento/UI modülü ile eklenir.
*bu bileşenler v.2.0'da bulunabilse de, 2.1 sürümünü kullanmanızı şiddetle tavsiye ederiz.
Bu makaleden, standart Izgarayı (düzende bulunur: app/code/Vendor/Rules/view/adminhtml/layout/vendor_rules_example_rule_index.xml ) nasıl yeniden oluşturacağınızı ve onu UI bileşenleriyle nasıl zenginleştireceğinizi öğreneceksiniz.
Sadece karşılaştırın. Bu eski bir ızgaradır:
UX bileşenleri ile yapılmış yeni bir tane ile:
Gördüğünüz gibi, yükseltilmiş bir Izgara çok daha kullanıcı dostu ve zaman kazandıran, ölçeklenmesi daha kolay olacak, birçok harika ekstra özelliğe sahip olacak (örneğin, mevcut Grid durumunu kaydedebilen yer imleri) ve akıllı filtreler ayarlayacaktır.
Haydi başlayalım.
Öncelikle modülde bazı değişiklikler yapmanız gerekiyor. Bunu nasıl yapacağınız aşağıda açıklanmıştır:
1) Gerekli bileşenleri bildirmek için yeni bir dosya oluşturun:
> uygulama/kod/Satıcı/Kurallar/etc/di.xml
<?xml version="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">
<argümanlar>
<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>
</argümanlar>
</virtualType>
<virtualType name="VendorRulesRuleGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<argümanlar>
<argument name="appliers" xsi:type="dizi">
<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>
</argüman>
</argümanlar>
</virtualType>
<type name="Satıcı\Kurallar\Model\KaynakModel\Kural\Grid\Koleksiyon">
<argümanlar>
<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">Satıcı\Kurallar\Model\KaynakModel\Kural</argument>
</argümanlar>
</type>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<argümanlar>
<argument name="koleksiyonlar" xsi:type="dizi">
<item name="vendor_rules_rule_listing_data_source" xsi:type="string">Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection</item>
</argüman>
</argümanlar>
</type>
</config>
VendorRulesRuleGridDataProvide — bu sanal tür, kullanıcı arabirimi kuralları kılavuzu için veri sağlar. VendorRulesRuleGridFilterPool , mevcut filtreleri eklemenize/değiştirmenize izin veren filtreleme işlevi ekler.
Grid'in bu özel koleksiyonla doğru şekilde çalışmasını sağlamak için onu mevcut tüm koleksiyonlar listesine eklemeniz gerektiğini unutmayın. Bunu yapmak için, Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory koleksiyonlarına Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection koleksiyon değerine dayalı sınıfla satıcı_rules_rule_listing_data_source ekleyin.
2) UI Grid için, `Magento\Framework\Api\Search\SearchResultInterface' arayüzünü temsil edecek ayrı bir koleksiyona ihtiyacımız var.
Izgara ve filtrelerle çalışmanıza izin verecek standart yöntemleri içerir. Bu sınıf, koleksiyonlara göre aramanın çalışma şeklini değiştirerek kişisel ihtiyaçlarınıza göre özelleştirilebilir.
> app/code/Vendor/Rules/Model/ResourceModel/Rule/Grid/Collection.php
<?php
ad alanı Satıcı\Kurallar\Model\KaynakModel\Kural\Grid;
Vendor\Rules\Model\ResourceModel\Rule\Collection öğesini RuleCollection olarak kullanın;
Magento\Framework\Api\Search\SearchResultInterface kullanın;
Magento\Framework\Api\SearchCriteriaInterface kullanın;
Magento\Framework\Data\Collection\Db\FetchStrategyInterface kullanın;
Magento\Framework\Data\Collection\EntityFactory'yi kullanın;
Magento\Framework\Event\ManagerInterface'i kullanın;
Magento\Framework\Model\ResourceModel\Db\AbstractDb'yi kullanın;
Psr\Log\LoggerInterface'i kullanın;
class Collection, RuleCollection'ı genişletir, SearchResultInterface'i uygular
{
/**
* Toplamalar
*
* @var \Magento\Çerçeve\Arama\ToplamaArayüz
*/
korumalı $toplamalar;
/**
* kurucu
*
* @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 $ modeli
* @param $bağlantısı
* @param \Magento\Çerçeve\Model\KaynakModel\Db\AbstractDb $kaynak
*/
genel işlev __construct(
Varlık Fabrikası $ varlık Fabrikası,
LoggerInterface $ kaydedici,
FetchStrategyInterface $fetchStrateji,
YöneticiArayüz $eventManager,
$mainTablo,
$eventÖnek,
$eventNesne,
$kaynak Modeli,
$model = 'Magento\Çerçeve\Görünüm\Element\UiComponent\Veri Sağlayıcı\Belge',
$bağlantı = boş,
AbstractDb $kaynak = boş
) {
parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $bağlantı, $resource);
$this->_eventPrefix = $eventPrefix;
$this->_eventObject = $eventObject;
$this->_init($model, $resourceModel);
$bu->setMainTable($mainTable);
}
/**
* @return \Magento\Framework\Search\AggregationInterface
*/
genel işlev getAggregations()
{
$this->toplamaları döndür;
}
/**
* @param \Magento\Framework\Search\AggregationInterface $toplamalar
* @dönüş $ this
*/
public function setAggregations($aggregations)
{
$this->toplamalar = $toplamalar;
}
/**
* Koleksiyon için tüm kimlikleri alın
* EAV koleksiyonuyla geriye dönük uyumluluk
*
* @param int $ limiti
* @param int $ ofset
* @dönüş dizisi
*/
public function getAllIds($limit = null, $offset = null)
{
return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
}
/**
* Arama kriterlerini alın.
*
* @return \Magento\Framework\Api\SearchCriteriaInterface|null
*/
genel işlev getSearchCriteria()
{
null döndür;
}
/**
* Arama kriterlerini belirleyin.
*
* @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
* @dönüş $ this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
genel işlev setSearchCriteria(SearchCriteriaInterface $searchCriteria = null)
{
$bunu döndür;
}
/**
* Toplam sayıyı alın.
*
* @dönüş int
*/
genel işlev getTotalCount()
{
$this->getSize() döndür;
}
/**
* Toplam sayımı ayarlayın.
*
* @param int $totalCount
* @dönüş $ this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
genel işlev setTotalCount($totalCount)
{
$bunu döndür;
}
/**
* Öğe listesi ayarlayın.
*
* @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
* @dönüş $ this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
genel işlev setItems(dizi $items = null)
{
$bunu döndür;
}
}
?>3) Ana koleksiyonu aşağıda açıklanan şekilde değiştirin (özel koleksiyonumuz ondan devralındığı için önemlidir). Aşağıdaki değişiklikleri yapmalısınız:
> app/code/Vendor/Rules/Model/ResourceModel/Rule/Collection.php
<?php
ad alanı Satıcı\Kurallar\Model\KaynakModel\Kural;
class Collection, \Magento\Rule\Model\ResourceModel\Rule\Collection\AbstractCollection öğesini genişletir
{
/**
* Kaynak modelini ayarlayın ve alan eşlemesini belirleyin
*
* @dönüş geçersiz
*/
korumalı işlev _construct()
{
$this->_init('Satıcı\Kurallar\Model\Kural', 'Satıcı\Kurallar\Model\KaynakModel\Kural');
}
/**
* Belirtilen tarihe göre filtre koleksiyonu.
* Koleksiyonu yalnızca etkin kurallara göre filtreleyin.
*
* @param string|null $şimdi
* @kullanın $this->addStoreGroupDateFilter()
* @dönüş $ this
*/
genel işlev setValidationFilter($now = null)
{
if (!$this->getFlag('validation_filter')) {
$this->addDateFilter($şimdi);
$this->addIsActiveFilter();
$this->setOrder('sort_order', self::SORT_ORDER_DESC);
$this->setFlag('validation_filter', true);
}
$bunu döndür;
}
/**
* Tarihten veya tarihe filtre
*
* @param $şimdi
* @dönüş $ this
*/
genel işlev addDateFilter($şimdi)
{
$this->getSelect()->nerede(
'from_date null veya from_date <= ?',
$şimdi
)->nerede(
'to_date null veya to_date >= ?',
$şimdi
);
$bunu döndür;
}
}
?>
4) Ardından, Izgara düzeninden eski işaretlemeyi kaldırın ve oraya bir UI listesi ekleyin:
> uygulama/kod/Satıcı/Kurallar/görünüm/adminhtml/layout/vendor_rules_example_rule_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="menu">
<action method="setActive">
<argument name="itemId" xsi:type="string">Vendor_Rules::vendor_rules</argument>
</action>
</referenceBlock>
<referenceBlock name="page.title">
<action method="setTitleClass">
<argument name="class" xsi:type="string">karmaşık</argument>
</action>
</referenceBlock>
<referenceContainer name="içerik">
<uiComponent name="vendor_rules_rule_listing"/>
</referenceContainer>
</body>
</sayfa>Temel olarak, sayfa içeriğine (ana eylem) bahsi geçen ` seller_rules_rule_listing` i ekliyoruz, ürün menümüzün durumunu 'Aktif' olarak değiştiriyoruz ve başlık sınıfını ayarlıyoruz.
5) Bir sonraki adımda, buraya yerleştirilecek olan UI listesini sandık:
> app/code/Satıcı/Rules/view/adminhtml/ui_component/vendor_rules_rule_listing.xml
<?xml version="1.0"?>
<listing xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
<argument name="data" xsi:type="dizi">
<item name="js_config" xsi:type="dizi">
<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>
</ite>
<item name="spinner" xsi:type="string">vendor_rules_rule_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">ekle</item>
<item name="label" xsi:type="string" translate="true">Yeni Kural Ekle</item>
<item name="class" xsi:type="string">birincil</item>
<item name="url" xsi:type="string">*/*/newaction</item>
</ite>
</ite>
</argüman>
<dataSource name="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>
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</ite>
</argüman>
</argüman>
<argument name="data" xsi:type="dizi">
<item name="js_config" xsi:type="dizi">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</ite>
</argüman>
</dataSource>
<container name="listing_top">
<argument name="data" xsi:type="dizi">
<item name="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>
</ite>
</argüman>
<yer imi adı="yer imleri">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">vendor_rules_rule_listing</item>
</ite>
</ite>
</argüman>
</yer imi>
<bileşen adı="columns_controls">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="dizi">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns</item>
</ite>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</ite>
</argüman>
</bileşen>
<filters name="listing_filters">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns</item>
<item name="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>
</ite>
<item name="şablonlar" xsi:type="dizi">
<item name="filtreler" xsi:type="dizi">
<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>
</ite>
</ite>
</ite>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.${ $.index }:visible</item>
</ite>
</ite>
</ite>
<item name="gözlemciler" xsi:type="dizi">
<item name="column" xsi:type="string">sütun</item>
</ite>
</argüman>
</filtreler>
<paging name="listing_paging">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="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>
</ite>
<item name="selectProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids</item>
</ite>
</argüman>
</paging>
</konteyner>
<columns name="vendor_rules_rule_columns">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="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">geçerli</item>
</ite>
</ite>
</argüman>
<selectionsColumn name="ids">
<argument name="data" xsi:type="dizi">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">yanlış</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">rule_id</item>
</ite>
</argüman>
</selectionsColumn>
<sütun name="kural_id">
<argument name="data" xsi:type="dizi">
<item name="js_config" xsi:type="dizi">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</ite>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="dataType" xsi:type="string">metin</item>
<item name="sorting" xsi:type="string">artan</item>
<item name="align" xsi:type="string">sol</item>
<item name="label" xsi:type="string" translate="true">Kimlik</item>
<item name="sortOrder" xsi:type="number">1</item>
</ite>
</argüman>
</sütun>
<sütun adı="ad">
<argument name="data" xsi:type="dizi">
<item name="js_config" xsi:type="dizi">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</ite>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">metin</item>
<item name="dataType" xsi:type="string">metin</item>
<item name="align" xsi:type="string">sol</item>
<item name="label" xsi:type="string" translate="true">Ad</item>
</ite>
</argüman>
</sütun>
<sütun adı="is_active">
<argument name="data" xsi:type="dizi">
<item name="options" xsi:type="array">
<item name="active" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Etkin</item>
</ite>
<item name="etkin değil" xsi:type="array">
<item name="value" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">Etkin değil</item>
</ite>
</ite>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">seç</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="editor" xsi:type="string">seç</item>
<item name="dataType" xsi:type="string">seç</item>
<item name="label" xsi:type="string" translate="true">Etkin</item>
<item name="sortOrder" xsi:type="number">65</item>
</ite>
</argüman>
</sütun>
<sütun name="sort_order">
<argument name="data" xsi:type="dizi">
<item name="js_config" xsi:type="dizi">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</ite>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">metin</item>
<item name="dataType" xsi:type="string">sayı</item>
<item name="align" xsi:type="string">sol</item>
<item name="label" xsi:type="string" translate="true">Öncelik</item>
</ite>
</argüman>
</sütun>
<column name="from_date" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="dizi">
<item name="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">tarih</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Başlat</item>
</ite>
</argüman>
</sütun>
<column name="to_date" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="dizi">
<item name="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">tarih</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">Bitiş</item>
</ite>
</argüman>
</sütun>
<actionsColumn name="actions" class="Satıcı\Rules\Ui\Component\Listing\Column\RuleActions">
<argument name="data" xsi:type="dizi">
<item name="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>
</ite>
</argüman>
</actionsColumn>
</sütunlar>
<kapsayıcı adı="yapışkan">
<argument name="data" xsi:type="dizi">
<item name="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>
</ite>
</argüman>
</konteyner>
</listeleme>
` dataSource ` listesi, ` di.xml` içinde yarattığımız tür olan dataProvider`a bir bağlantı içerir. Izgara için gerekli olan girdi verilerini içerir.
Buradan, dosyalanan anahtarı tanımlamamız gerekiyor - bizim durumumuzda bu ` rule_id `.
Ek olarak, özel düğmelerinizi de ekleyebilirsiniz, bunları 'düğmeler' bölümünde açıklamanız yeterlidir. Örneğimizde, ` */*/newaction ` adresine sahip standart 'Ekle' düğmesini ekledik (yoldaki * mevcut anlama karşılık gelir).
` konteyner adı = ”listing_top” ` bazı ekstra listeleme bileşenleri içerir: filtreler, sayfalandırma, vb. Bunları kişisel gereksinimlerinize göre değiştirebilirsiniz.
` column name=“vendor_rules_rule_columns” ` varsayılan Izgaradakiyle hemen hemen aynı olan sütunu içerir. Tek anlamlı fark, bir dizi eylemi tanıtan yeni bir ` actionColumn` sütunudur: düzenleme ve silme. Gerekirse bu eylemler genişletilebilir.
Muhtemelen fark ettiğiniz gibi, bu sütunda yeni bir sınıf var. Nasıl oluşturabileceğimizi öğrenelim:
> app/code/Vendor/Rules/Ui/Component/Listing/Column/RuleActions.php
<?php
ad alanı Vendor\Rules\Ui\Component\Listing\Column;
class RuleActions, \Magento\Ui\Component\Listing\Columns\Column öğesini genişletir
{
/**
* Düzenlenecek URL yolu
*
* @var dizesi
*/
const URL_PATH_EDIT = 'vendor_rules/example_rule/düzenle';
/**
* Silinecek URL yolu
*
* @var dizesi
*/
const URL_PATH_DELETE = 'vendor_rules/example_rule/delete';
/**
* URL oluşturucu
*
* @var \Magento\Framework\UrlInterface
*/
korumalı $urlBuilder;
/**
* Yapıcı
*
* @param \Magento\Framework\UrlInterface $urlBuilder
* @param \Magento\Framework\View\Element\UiComponent\ContextInterface $bağlam
* @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
* @param dizisi $bileşenleri
* @param dizisi $veri
*/
genel işlev __construct(
\Magento\Framework\UrlInterface $urlBuilder,
\Magento\Framework\Görünüm\Element\UiComponent\ContextInterface $bağlam,
\Magento\Framework\Görünüm\Element\UiComponentFactory $uiComponentFactory,
dizi $bileşenleri = [],
dizi $veri = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($bağlam, $uiComponentFactory, $bileşenler, $veri);
}
/**
* Veri Kaynağını Hazırlayın
*
* @param dizisi $dataSource
* @dönüş dizisi
*/
public function readyDataSource(dizi $dataSource)
{
if (!isset($dataSource['data']['items'])) {
$dataSource döndür;
}
foreach ($dataSource['data']['items'] as &$item) {
if (!isset($item['rule_id'])) {
devam et;
}
$item[$this->getData('name')] = [
'düzenle' => [
'href' => $this->urlBuilder->getUrl(
statik::URL_PATH_EDIT,
[
'id' => $item['rule_id'],
]
),
'etiket' => __('Düzenle'),
],
'sil' => [
'href' => $this->urlBuilder->getUrl(
statik::URL_PATH_DELETE,
[
'id' => $item['rule_id'],
]
),
'etiket' => __('Sil'),
'onayla' => [
'title' => __('"${ $.$data.name }"'yi silin'),
'message' => __('"${ $.$data.name }" kuralını silmek istemediğinizden emin misiniz?'),
],
],
];
}
$dataSource döndür;
}
}
?>Bu sınıf, Grid'den eylemleri işlemekten sorumludur. Buradan, URL'leri veya iletilen parametrenin adını değiştirmek mümkündür. Bizim durumumuzda anahtar, rule_id'dir (değerinin anlaşılmasını kolaylaştırmak için 'id' adı altında iletilir).
Şuna benziyor:
Her şeyi doğru şekilde yaptıysanız, ızgaranız şöyle görünmelidir:
Örnekten de anlaşılacağı gibi, mevcut standart Grid'i UI'ye dönüştürmek oldukça kolaydır. Standart Izgara işlevselliğini genişletmeye ek olarak, Magento 2 işlevselliğinin bu bölümüyle çalışmayı basitleştirmenize de olanak tanır.
PS Serinin bir sonraki makalesinde, kütle-eylemler ve ekstra sütunlar ekleme olasılığını açıklayacağız.
Bizi izlemeye devam edin!