การอัพเกรด Standard Magento 2 Grid ด้วย UI Components (ตอนที่ 2)
เผยแพร่แล้ว: 2016-10-18ในบทความที่แล้ว เราได้อธิบายวิธีสร้างโมดูลที่มีเงื่อนไขพื้นฐานและอินเทอร์เฟซที่จะให้เราทำงานกับมันได้ ในระหว่างขั้นตอนการสร้าง เราใช้บล็อควีโอไอพีมาตรฐาน อย่างไรก็ตาม Magento 2 นั้นสามารถทำอะไรได้อีกมาก
ฉันกำลังพูดถึงความเป็นไปได้ในการปรับปรุงอินเทอร์เฟซด้วยความช่วยเหลือของส่วนประกอบ UI ส่วนประกอบเหล่านี้ถูกเพิ่มด้วยโมดูล Magento/UI
*แม้ว่าส่วนประกอบเหล่านี้จะสามารถพบได้ใน v.2.0 เราขอแนะนำให้คุณใช้เวอร์ชัน 2.1
จากบทความนี้ คุณจะได้เรียนรู้วิธีสร้าง Grid มาตรฐานขึ้นใหม่ (อยู่ในเลย์เอาต์: app/code/Vendor/Rules/view/adminhtml/layout/vendor_rules_example_rule_index.xml ) และเสริมแต่งด้วยองค์ประกอบ UI
แค่เปรียบเทียบ นี่คือตารางเก่า:
ด้วยองค์ประกอบใหม่ที่สร้างด้วยส่วนประกอบ UX:
อย่างที่คุณเห็น Grid ที่อัปเกรดแล้วจะใช้งานง่ายขึ้นและประหยัดเวลา ปรับขนาดได้ง่ายขึ้น มีฟีเจอร์พิเศษมากมาย (เช่น บุ๊กมาร์กที่สามารถบันทึกสถานะ Grid ปัจจุบันได้) และตั้งค่าตัวกรองอัจฉริยะ
เริ่มกันเลย
ขั้นแรก คุณต้องทำการเปลี่ยนแปลงบางอย่างในโมดูล ด้านล่างนี้เป็นวิธีการ:
1) สร้างไฟล์ใหม่เพื่อประกาศส่วนประกอบที่จำเป็น:
> app/code/Vendor/Rules/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">
<อาร์กิวเมนต์>
<argument name="collection" xsi:type="object" shared="false">ผู้ขาย\Rules\Model\ResourceModel\Rule\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">VendorRulesRuleGridFilterPool</argument>
</arguments>
</virtualType>
<virtualType name="VendorRulesRuleGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<อาร์กิวเมนต์>
<ชื่ออาร์กิวเมนต์="appliers" xsi:type="array">
<item name="ปกติ" 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>
</อาร์กิวเมนต์>
</arguments>
</virtualType>
<type name="Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection">
<อาร์กิวเมนต์>
<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>
</arguments>
</type>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<อาร์กิวเมนต์>
<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>
</อาร์กิวเมนต์>
</arguments>
</type>
</config>
VendorRulesRuleGridDataProvide — ประเภทเสมือนนี้ให้ข้อมูลสำหรับกริด UI ของกฎ ในทางกลับกัน VendorRulesRuleGridFilterPool จะเพิ่มฟังก์ชันการกรองที่ช่วยให้คุณสามารถเพิ่ม/แก้ไขตัวกรองที่มีอยู่ได้
หมายเหตุ เพื่อให้ Grid ทำงานได้อย่างถูกต้องกับคอลเล็กชันนี้ คุณต้องเพิ่มลงในรายการของคอลเลกชันที่มีอยู่ทั้งหมด ในการทำเช่นนั้น ให้เพิ่ม vendor_rules_rule_listing_data_source ด้วยคลาสตามค่าคอลเลกชัน: Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection ลงใน Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory collections
2) สำหรับ UI Grid เราจำเป็นต้องมีคอลเล็กชันแยกต่างหากซึ่งจะแสดงอินเทอร์เฟซ "Magento\Framework\Api\Search\SearchResultInterface "
มันมีวิธีการมาตรฐานที่จะช่วยให้คุณทำงานกับกริดและตัวกรอง ชั้นเรียนนี้สามารถปรับแต่งตามความต้องการส่วนบุคคลของคุณได้โดยเปลี่ยนวิธีการทำงานของการ ค้นหาตามคอลเล็กชัน
> app/code/Vendor/Rules/Model/ResourceModel/Rule/Grid/Collection.php
<?php
เนมสเปซ Vendor\Rules\Model\ResourceModel\Rule\Grid;
ใช้ Vendor\Rules\Model\ResourceModel\Rule\Collection เป็น RuleCollection
ใช้ Magento\Framework\Api\Search\SearchResultInterface;
ใช้ Magento\Framework\Api\SearchCriteriaInterface;
ใช้ Magento\Framework\Data\Collection\Db\FetchStrategyInterface;
ใช้ Magento\Framework\Data\Collection\EntityFactory;
ใช้ Magento\Framework\Event\ManagerInterface;
ใช้ Magento\Framework\Model\ResourceModel\Db\AbstractDb;
ใช้ Psr\Log\LoggerInterface;
class Collection ขยาย RuleCollection ใช้ SearchResultInterface
{
/**
* การรวม
*
* @var \Magento\Framework\Search\AggregationInterface
*/
การรวม $ ที่ได้รับการป้องกัน;
/**
* ตัวสร้าง
*
* @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 $การเชื่อมต่อ
* @param \Magento\Framework\Model\ResourceModel\Db\AbstractDb $resource
*/
ฟังก์ชั่นสาธารณะ __construct(
EntityFactory $entityFactory,
LoggerInterface $logger,
FetchStrategyInterface $fetchStrategy,
ผู้จัดการอินเทอร์เฟซ $eventManager,
$mainTable,
$eventPrefix,
$eventObject,
$resource Model,
$model = 'Magento\Framework\View\Element\UiComponent\DataProvider\Document',
การเชื่อมต่อ $ = null
AbstractDb $resource = null
) {
parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $connection, $resource);
$this->_eventPrefix = $eventPrefix;
$this->_eventObject = $eventObject;
$this->_init($model, $resourceModel);
$นี้->setMainTable($mainTable);
}
/**
* @return \Magento\Framework\Search\AggregationInterface
*/
ฟังก์ชั่นสาธารณะ getAggregations()
{
คืนค่า $this->agregations;
}
/**
* @param \Magento\Framework\Search\AggregationInterface $aggregations
* @return $นี้
*/
ฟังก์ชั่นสาธารณะ setAggregations($ aggregations)
{
$this->การรวมตัว = $การรวม;
}
/**
* ดึงรหัสทั้งหมดสำหรับคอลเลกชัน
* ความเข้ากันได้ย้อนหลังกับคอลเลกชัน EAV
*
* @param int $limit
* @param int $offset
* @return อาร์เรย์
*/
ฟังก์ชั่นสาธารณะ getAllIds($limit = null, $offset = null)
{
คืนค่า $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
}
/**
* รับเกณฑ์การค้นหา
*
* @return \Magento\Framework\Api\SearchCriteriaInterface|null
*/
ฟังก์ชั่นสาธารณะ getSearchCriteria()
{
คืนค่าเป็นโมฆะ;
}
/**
* กำหนดเกณฑ์การค้นหา
*
* @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
* @return $นี้
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
ฟังก์ชันสาธารณะ setSearchCriteria(SearchCriteriaInterface $searchCriteria = null)
{
ส่งคืน $this;
}
/**
* รับจำนวนรวม
*
* @return int
*/
ฟังก์ชั่นสาธารณะ getTotalCount()
{
คืนค่า $this->getSize();
}
/**
* ตั้งนับรวม
*
* @param int $totalCount
* @return $นี้
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
ฟังก์ชันสาธารณะ setTotalCount($totalCount)
{
ส่งคืน $this;
}
/**
* ตั้งค่ารายการ
*
* @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
* @return $นี้
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
ฟังก์ชันสาธารณะ setItems(array $items = null)
{
ส่งคืน $this;
}
}
?>3) แก้ไขคอลเล็กชันหลักตามที่อธิบายไว้ด้านล่าง (เป็นสิ่งสำคัญ เนื่องจากคอลเล็กชันแบบกำหนดเองของเราได้รับการสืบทอดมาจากคอลเล็กชันดังกล่าว) คุณควรทำการเปลี่ยนแปลงต่อไปนี้:
> app/code/Vendor/Rules/Model/ResourceModel/Rule/Collection.php
<?php
เนมสเปซ Vendor\Rules\Model\ResourceModel\Rule;
คอลเลคชันคลาสขยาย \Magento\Rule\Model\ResourceModel\Rule\Collection\AbstractCollection
{
/**
* ตั้งค่าแบบจำลองทรัพยากรและกำหนดการทำแผนที่ภาคสนาม
*
* @return เป็นโมฆะ
*/
ฟังก์ชันที่ได้รับการป้องกัน _construct()
{
$this->_init('Vendor\Rules\Model\Rule', 'Vendor\Rules\Model\ResourceModel\Rule');
}
/**
* การรวบรวมตัวกรองตามวันที่ระบุ
* กรองคอลเล็กชันเป็นกฎที่ใช้งานอยู่เท่านั้น
*
* @param string|null $ตอนนี้
* @ ใช้ $this->addStoreGroupDateFilter()
* @return $นี้
*/
ฟังก์ชั่นสาธารณะ setValidationFilter($ ตอนนี้ = null)
{
if (!$this->getFlag('validation_filter')) {
$this->addDateFilter($ตอนนี้);
$this->addIsActiveFilter();
$this->setOrder('sort_order', ตนเอง::SORT_ORDER_DESC);
$this->setFlag('validation_filter', จริง);
}
ส่งคืน $this;
}
/**
* จากวันที่หรือถึงวันที่กรอง
*
* @param $ตอนนี้
* @return $นี้
*/
ฟังก์ชั่นสาธารณะ addDateFilter($ ตอนนี้)
{
$this->getSelect()->where(
'from_date เป็นโมฆะหรือ from_date <= ?',
$ตอนนี้
) -> ที่ไหน (
'to_date เป็นโมฆะหรือ to_date >= ?',
$ตอนนี้
);
ส่งคืน $this;
}
}
?>
4) ถัดไป ลบมาร์กอัปเก่าออกจากเลย์เอาต์ Grid และเพิ่มรายการ UI ที่นั่น:
> app/code/Vendor/Rules/view/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">ซับซ้อน</argument>
</action>
</referenceBlock>
<referenceContainer name="content">
<uiComponent name="vendor_rules_rule_listing"/>
</referenceContainer>
</body>
</page>โดยพื้นฐานแล้ว เราเพียงแค่เพิ่ม ` vendor_rules_rule_listing ` ที่กล่าวถึงลงในเนื้อหาของหน้า (การดำเนินการหลัก) เปลี่ยนสถานะของเมนูผลิตภัณฑ์ของเราเป็น 'ใช้งานอยู่' และตั้งค่าคลาสชื่อ
5) ในขั้นตอนต่อไป เราจะสร้างรายการ UI ที่จะวางไว้ที่นี่:
> app/code/Vendor/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">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="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>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">เพิ่ม</item>
<item name="label" xsi:type="string" translate="true">เพิ่มกฎใหม่</item>
<item name="class" xsi:type="string">หลัก</item>
<item name="url" xsi:type="string">*/*/newaction</item>
</item>
</item>
</อาร์กิวเมนต์>
<dataSource name="vendor_rules_rule_listing_data_source">
<ชื่ออาร์กิวเมนต์="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>
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</item>
</อาร์กิวเมนต์>
</อาร์กิวเมนต์>
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</อาร์กิวเมนต์>
</dataSource>
<ชื่อคอนเทนเนอร์="listing_top">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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>
</item>
</อาร์กิวเมนต์>
<bookmark name="ที่คั่นหนังสือ">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">vendor_rules_rule_listing</item>
</item>
</item>
</อาร์กิวเมนต์>
</bookmark>
<component name="columns_controls">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="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>
</อาร์กิวเมนต์>
</component>
<filters name="listing_filters">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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>
</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">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>
</item>
</item>
</item>
<ชื่อรายการ="ผู้สังเกตการณ์" xsi:type="array">
<item name="column" xsi:type="string">คอลัมน์</item>
</item>
</อาร์กิวเมนต์>
</filters>
<ชื่อเพจ="listing_paging">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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>
</item>
<item name="selectProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids</item>
</item>
</อาร์กิวเมนต์>
</paging>
</container>
<columns name="vendor_rules_rule_columns">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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">ปัจจุบัน</item>
</item>
</item>
</อาร์กิวเมนต์>
<selectionsColumn name="ids">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">เท็จ</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">rule_id</item>
</item>
</อาร์กิวเมนต์>
</selectionsColumn>
<column name="rule_id">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="dataType" xsi:type="string">ข้อความ</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="align" xsi:type="string">ซ้าย</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="sortOrder" xsi:type="number">1</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<column name="name">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">ข้อความ</item>
<item name="dataType" xsi:type="string">ข้อความ</item>
<item name="align" xsi:type="string">ซ้าย</item>
<item name="label" xsi:type="string" translate="true">ชื่อ</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<column name="is_active">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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">ใช้งานอยู่</item>
</item>
<item name="inactive" xsi:type="array">
<item name="value" xsi:type="string">0</item>
<item name="label" xsi:type="string" translate="true">ไม่ทำงาน</item>
</item>
</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">เลือก</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
<item name="editor" xsi:type="string">เลือก</item>
<item name="dataType" xsi:type="string">เลือก</item>
<item name="label" xsi:type="string" translate="true">ใช้งานอยู่</item>
<item name="sortOrder" xsi:type="number">65</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<column name="sort_order">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
</item>
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">ข้อความ</item>
<item name="dataType" xsi:type="string">หมายเลข</item>
<item name="align" xsi:type="string">ซ้าย</item>
<item name="label" xsi:type="string" translate="true">ลำดับความสำคัญ</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<column name="from_date" class="Magento\Ui\Component\Listing\Columns\Date">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sorting" xsi:type="string">รายละเอียด</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="dataType" xsi:type="string">วันที่</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">เริ่ม</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<column name="to_date" class="Magento\Ui\Component\Listing\Columns\Date">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sorting" xsi:type="string">รายละเอียด</item>
<item name="filter" xsi:type="string">dateRange</item>
<item name="dataType" xsi:type="string">วันที่</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">สิ้นสุด</item>
</item>
</อาร์กิวเมนต์>
</คอลัมน์>
<actionsColumn name="actions" class="Vendor\Rules\Ui\Component\Listing\Column\RuleActions">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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>
</item>
</อาร์กิวเมนต์>
</actionsColumn>
</columns>
<ชื่อคอนเทนเนอร์="เหนียว">
<ชื่ออาร์กิวเมนต์="data" xsi:type="array">
<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>
</item>
</อาร์กิวเมนต์>
</container>
</listing>
รายการ ` dataSource `มีลิงก์ไปยัง ` dataProvider ` – ประเภทที่เราสร้างขึ้นใน ` di.xml ` มันมีข้อมูลอินพุตที่จำเป็นสำหรับกริด
จากที่นี่ เราต้องกำหนดคีย์ที่ยื่น — ในกรณีของเราคือ ` rule_id `
นอกจากนี้ คุณยังสามารถเพิ่มปุ่มที่กำหนดเองได้ เพียงอธิบายในส่วน 'ปุ่ม' ในตัวอย่างของเรา เราได้เพิ่มปุ่ม 'เพิ่ม' มาตรฐานที่มีที่อยู่ ` */*/newaction ` ( * ในพาธสอดคล้องกับความหมายปัจจุบัน)
` ชื่อคอนเทนเนอร์=”listing_top” ` มีองค์ประกอบรายการพิเศษบางอย่าง: ตัวกรอง การแบ่งหน้า ฯลฯ คุณสามารถเปลี่ยนได้ตามความต้องการส่วนบุคคลของคุณ
` ชื่อคอลัมน์=“vendor_rules_rule_columns” ` มีคอลัมน์ที่เกือบจะเหมือนกัน เช่นเดียวกับในตารางเริ่มต้น ความแตกต่างที่มีความหมายเพียงอย่างเดียวคือคอลัมน์ ` actionsColumn ` ใหม่ที่แนะนำชุดของการดำเนินการ: แก้ไขและลบ การดำเนินการเหล่านี้สามารถขยายได้หากจำเป็น
อย่างที่คุณอาจสังเกตเห็น คอลัมน์นี้มีคลาสใหม่ มาเรียนรู้ว่าเราจะสร้างมันได้อย่างไร:
> app/code/Vendor/Rules/Ui/Component/Listing/Column/RuleActions.php
<?php
เนมสเปซ Vendor\Rules\Ui\Component\Listing\Column;
คลาส RuleActions ขยาย \Magento\Ui\Component\Listing\Columns\Column
{
/**
* เส้นทาง URL ที่จะแก้ไข
*
* @var string
*/
const URL_PATH_EDIT = 'vendor_rules/example_rule/edit';
/**
* เส้นทาง URL ที่จะลบ
*
* @var string
*/
const URL_PATH_DELETE = 'vendor_rules/example_rule/delete';
/**
* ตัวสร้าง URL
*
* @var \Magento\Framework\UrlInterface
*/
ป้องกัน $urlBuilder;
/**
* ตัวสร้าง
*
* @param \Magento\Framework\UrlInterface $urlBuilder
* @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
* @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
* @param array $components
* @param array $data
*/
ฟังก์ชั่นสาธารณะ __construct(
\Magento\Framework\UrlInterface $urlBuilder,
\Magento\Framework\View\Element\UiComponent\ContextInterface $context,
\Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
อาร์เรย์ $components = [],
อาร์เรย์ $data = []
) {
$this->urlBuilder = $urlBuilder;
ผู้ปกครอง ::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* เตรียมแหล่งข้อมูล
*
* @param array $dataSource
* @return อาร์เรย์
*/
ฟังก์ชันสาธารณะ prepareDataSource(array $dataSource)
{
if (!isset($dataSource['data']['items'])) {
ส่งคืน $dataSource;
}
foreach ($dataSource['data']['items'] เป็น &$item) {
if (!isset($item['rule_id'])) {
ดำเนินต่อ;
}
$item[$this->getData('name')] = [
'แก้ไข' => [
'href' => $this->urlBuilder->getUrl(
คงที่::URL_PATH_EDIT,
[
'id' => $item['rule_id'],
]
),
'label' => __('แก้ไข'),
],
'ลบ' => [
'href' => $this->urlBuilder->getUrl(
คงที่::URL_PATH_DELETE,
[
'id' => $item['rule_id'],
]
),
'label' => __('ลบ'),
'ยืนยัน' => [
'title' => __('ลบ "${ $.$data.name }"'),
'message' => __('คุณแน่ใจหรือว่าไม่ต้องการลบกฎ "${ $.$data.name }" ?'),
],
],
];
}
ส่งคืน $dataSource;
}
}
?>คลาสนี้รับผิดชอบการดำเนินการจากกริด จากที่นี่ คุณสามารถเปลี่ยน URL หรือชื่อของพารามิเตอร์ที่ส่งได้ ในกรณีของเรา กุญแจสำคัญคือ rule_id (ถูกส่งภายใต้ชื่อ 'id' เพื่อให้เข้าใจถึงคุณค่าของมันได้ง่ายขึ้น)
ดูเหมือนว่านี้:
หากคุณทำทุกอย่างถูกต้อง ตารางของคุณควรมีลักษณะดังนี้:
ดังที่เราเห็นจากตัวอย่าง การเปลี่ยน Grid มาตรฐานที่มีอยู่ให้เป็น UI นั้นค่อนข้างง่าย นอกจากการขยายฟังก์ชัน Grid มาตรฐานแล้ว ยังช่วยให้คุณทำงานกับส่วนนี้ของฟังก์ชัน Magento 2 ได้ง่ายขึ้น
PS ในบทความถัดไปของซีรีส์ เราจะอธิบายความเป็นไปได้ของการเพิ่มมวล—การกระทำและคอลัมน์เพิ่มเติม
คอยติดตาม!