UI コンポーネントを使用した標準 Magento 2 グリッドのアップグレード (パート 2)
公開: 2016-10-18前回の記事では、基本的な条件とそれらを操作できるインターフェイスを備えたモジュールを作成する方法について説明しました。 作成プロセスでは、標準の Magento ブロックを使用しました。 ただし、Magento 2 にはさらに多くの機能があります。
UI コンポーネントの助けを借りてインターフェイスを改善する可能性について話しています。 これらのコンポーネントは、Magento/UI モジュールで追加されます。
*これらのコンポーネントは v.2.0 に含まれていますが、2.1 バージョンを使用することを強くお勧めします。
この記事では、標準のグリッド (レイアウト: app/code/Vendor/Rules/view/adminhtml/layout/vendor_rules_example_rule_index.xmlにあります) を作り直し、UI コンポーネントで強化する方法を学びます。
比較するだけです。 これは古いグリッドです:
UX コンポーネントで作成された新しいもの:
ご覧のように、アップグレードされたグリッドはより使いやすく、時間を節約し、スケーリングが容易になり、多くの優れた追加機能 (現在のグリッドの状態を保存できるブックマークなど) とスマート フィルターの設定を備えています。
それでは始めましょう。
まず、モジュールにいくつかの変更を加える必要があります。 その方法は次のとおりです。
1) 必要なコンポーネントを宣言する新しいファイルを作成します。
> アプリ/コード/ベンダー/ルール/etc/di.xml
<?xml バージョン="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">Vendor\Rules\Model\ResourceModel\Rule\Collection</argument>
<argument name="filterPool" xsi:type="object" shared="false">VendorRulesRuleGridFilterPool</argument>
</引数>
</virtualType>
<virtualType name="VendorRulesRuleGridFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
<引数>
<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>
</引数>
</引数>
</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>
</引数>
</タイプ>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<引数>
<引数名="コレクション" xsi:type="配列">
<item name="vendor_rules_rule_listing_data_source" xsi:type="string">Vendor\Rules\Model\ResourceModel\Rule\Grid\Collection</item>
</引数>
</引数>
</タイプ>
</config>
VendorRulesRuleGridDataProvide — この仮想タイプは、ルールの UI グリッドにデータを提供します。 VendorRulesRuleGridFilterPoolは、既存のフィルタを追加/変更できるフィルタリング機能を追加します。
この特定のコレクションでグリッドが正しく機能するようにするには、使用可能なすべてのコレクションのリストに追加する必要があります。 これを行うには、vendor \Rules\Model\ResourceModel\Rule\Grid\Collection をコレクション値ベースのクラスでvendor_rules_rule_listing_data_sourceを Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory コレクションに追加します。
2) UI グリッドの場合、 `Magento\Framework\Api\Search\SearchResultInterface`インターフェイスを表す別のコレクションが必要です。
これには、グリッドとフィルターを操作できる標準メソッドが含まれています。 このクラスは、コレクションによる検索の動作方法を変更することで、個人のニーズに合わせてカスタマイズできます。
> アプリ/コード/ベンダー/ルール/モデル/リソースモデル/ルール/グリッド/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 を使用します。
クラス コレクションは RuleCollection を拡張します SearchResultInterface を実装します
{
/**
* 集計
*
* @var \Magento\Framework\Search\AggregationInterface
*/
保護された $aggregations;
/**
* コンストラクター
*
* @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 $モデル
* @param $接続
* @param \Magento\Framework\Model\ResourceModel\Db\AbstractDb $resource
*/
パブリック関数 __construct(
EntityFactory $entityFactory,
ロガーインターフェース $logger,
FetchStrategyInterface $fetchStrategy,
ManagerInterface $eventManager,
$メインテーブル、
$eventPrefix、
$イベントオブジェクト、
$リソースモデル、
$model = 'Magento\Framework\View\Element\UiComponent\DataProvider\Document',
$コネクション=ヌル、
AbstractDb $resource = null
) {
parent::__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
*/
パブリック関数 getAggregations()
{
$this->集計を返します。
}
/**
* @param \Magento\Framework\Search\AggregationInterface $aggregations
* @return $this
*/
パブリック関数 setAggregations($aggregations)
{
$this->aggregations = $aggregations;
}
/**
* コレクションのすべての ID を取得する
* EAV コレクションとの下位互換性
*
* @param int $limit
* @param int $offset
* @return 配列
*/
public function getAllIds($limit = null, $offset = null)
{
return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
}
/**
* 検索条件を取得します。
*
* @return \Magento\Framework\Api\SearchCriteriaInterface|null
*/
パブリック関数 getSearchCriteria()
{
null を返します。
}
/**
* 検索条件を設定します。
*
* @param \Magento\Framework\Api\SearchCriteriaInterface $searchCriteria
* @return $this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
パブリック関数 setSearchCriteria(SearchCriteriaInterface $searchCriteria = null)
{
$これを返します。
}
/**
*合計数を取得します。
*
* @return int
*/
パブリック関数 getTotalCount()
{
$this->getSize(); を返します。
}
/**
*合計数を設定します。
*
* @param int $totalCount
* @return $this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
パブリック関数 setTotalCount($totalCount)
{
$これを返します。
}
/**
※設定項目一覧です。
*
* @param \Magento\Framework\Api\ExtensibleDataInterface[] $items
* @return $this
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function setItems(array $items = null)
{
$これを返します。
}
}
?>3) 以下に説明する方法でメイン コレクションを変更します (カスタム コレクションはそこから継承されるため、これは重要です)。 次の変更を行う必要があります。
> アプリ/コード/ベンダー/ルール/モデル/リソースモデル/ルール/Collection.php
<?php
名前空間 Vendor\Rules\Model\ResourceModel\Rule;
class Collection extends \Magento\Rule\Model\ResourceModel\Rule\Collection\AbstractCollection
{
/**
* リソース モデルを設定し、フィールド マッピングを決定する
*
* @return void
*/
保護された関数 _construct()
{
$this->_init('Vendor\Rules\Model\Rule', 'Vendor\Rules\Model\ResourceModel\Rule');
}
/**
*指定された日付でコレクションをフィルタリングします。
* コレクションをアクティブなルールのみにフィルターします。
*
* @param 文字列|null $now
* @use $this->addStoreGroupDateFilter()
* @return $this
*/
パブリック関数 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);
}
$これを返します。
}
/**
*日付からまたは日付フィルターまで
*
* @param $now
* @return $this
*/
パブリック関数 addDateFilter($now)
{
$this->getSelect()->where(
'from_date が null または from_date <= ?',
$今
)->どこで(
'to_date が null または to_date >= ?',
$今
);
$これを返します。
}
}
?>
4) 次に、グリッド レイアウトから古いマークアップを削除し、そこに UI リストを追加します。
> app/code/Vendor/Rules/view/adminhtml/layout/vendor_rules_example_rule_index.xml
<?xml バージョン="1.0"?>
<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<本体>
<referenceBlock name="メニュー">
<action method="setActive">
<argument name="itemId" xsi:type="string">Vendor_Rules::vendor_rules</argument>
</アクション>
</referenceBlock>
<referenceBlock name="page.title">
<action method="setTitleClass">
<argument name="class" xsi:type="string">complex</argument>
</アクション>
</referenceBlock>
<referenceContainer name="content">
<uiComponent name="vendor_rules_rule_listing"/>
</referenceContainer>
</body>
</ページ>基本的に、前述の ` vendor_rules_rule_listing ` をページ コンテンツに追加し (メイン アクション)、製品メニューのステータスを「アクティブ」に変更し、タイトル クラスを設定するだけです。
5) 次のステップでは、ここに配置される UI リストを作成します。
> app/code/Vendor/Rules/view/adminhtml/ui_component/vendor_rules_rule_listing.xml
<?xml バージョン="1.0"?>
<listing xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
<引数名="データ" xsi:type="配列">
<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 name="spinner" xsi:type="string">vendor_rules_rule_columns</item>
<アイテム名="ボタン" xsi:type="配列">
<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>
</アイテム>
</アイテム>
</引数>
<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>
<引数名="データ" xsi:type="配列">
<item name="config" xsi:type="array">
<item name="update_url" xsi:type="url" path="mui/index/render"/>
</アイテム>
</引数>
</引数>
<引数名="データ" xsi:type="配列">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</アイテム>
</引数>
</データソース>
<コンテナ名="listing_top">
<引数名="データ" xsi:type="配列">
<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>
</アイテム>
</引数>
<ブックマーク名="ブックマーク">
<引数名="データ" xsi:type="配列">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">vendor_rules_rule_listing</item>
</アイテム>
</アイテム>
</引数>
</ブックマーク>
<コンポーネント名="columns_controls">
<引数名="データ" xsi:type="配列">
<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 name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</アイテム>
</引数>
</コンポーネント>
<filters name="listing_filters">
<引数名="データ" xsi:type="配列">
<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 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 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 name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</アイテム>
</引数>
</フィルター>
<ページング名="listing_paging">
<引数名="データ" xsi:type="配列">
<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 name="selectProvider" xsi:type="string">vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids</item>
</アイテム>
</引数>
</ページング>
</コンテナ>
<columns name="vendor_rules_rule_columns">
<引数名="データ" xsi:type="配列">
<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>
</アイテム>
</アイテム>
</引数>
<selectionsColumn name="ids">
<引数名="データ" xsi:type="配列">
<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">rule_id</item>
</アイテム>
</引数>
</selectionsColumn>
<列名="rule_id">
<引数名="データ" xsi:type="配列">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</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>
</アイテム>
</引数>
</列>
<列名="名前">
<引数名="データ" xsi:type="配列">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</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>
</アイテム>
</引数>
</列>
<列名="is_active">
<引数名="データ" xsi:type="配列">
<アイテム名="オプション" xsi:type="配列">
<item name="active" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">アクティブ</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 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>
</アイテム>
</引数>
</列>
<列名="sort_order">
<引数名="データ" xsi:type="配列">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</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>
</アイテム>
</引数>
</列>
<column name="from_date" class="Magento\Ui\Component\Listing\Columns\Date">
<引数名="データ" xsi:type="配列">
<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">日付</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">開始</item>
</アイテム>
</引数>
</列>
<column name="to_date" class="Magento\Ui\Component\Listing\Columns\Date">
<引数名="データ" xsi:type="配列">
<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">日付</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="label" xsi:type="string" translate="true">終了</item>
</アイテム>
</引数>
</列>
<actionsColumn name="actions" class="Vendor\Rules\Ui\Component\Listing\Column\RuleActions">
<引数名="データ" xsi:type="配列">
<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>
</アイテム>
</引数>
</actionsColumn>
</列>
<コンテナ名="スティッキー">
<引数名="データ" xsi:type="配列">
<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>
</アイテム>
</引数>
</コンテナ>
</リスト>
リスト` dataSource `には` dataProvider `へのリンクが含まれています – これは` di.xml `で作成したタイプです。 グリッドに必要な入力データが含まれています。
ここから、キー フィールドを定義する必要があります — この場合は ` rule_id ` です。
さらに、カスタム ボタンを追加することもできます。「ボタン」セクションで説明するだけです。 この例では、アドレス ` */*/newaction ` (パス内の * は現在の意味に対応します) を持つ標準の「追加」ボタンを追加しました。
` container name="listing_top" ` には、いくつかの追加のリスト コンポーネントが含まれています: フィルター、ページネーションなど。 個人的な要件に応じて変更できます。
` columns name="vendor_rules_rule_columns" ` には、デフォルトのグリッドとほぼ同じ列が含まれています。 唯一の意味のある違いは、一連のアクション (編集と削除) を導入する新しい ` actionsColumn ` 列です。 これらのアクションは、必要に応じて拡張することもできます。
お気づきかもしれませんが、このコラムには新しいクラスがあります。 作成方法を学びましょう。
> app/code/Vendor/Rules/Ui/Component/Listing/Column/RuleActions.php
<?php
namespace Vendor\Rules\Ui\Component\Listing\Column;
class RuleActions extends \Magento\Ui\Component\Listing\Columns\Column
{
/**
* 編集する URL パス
*
* @var 文字列
*/
const URL_PATH_EDIT = 'vendor_rules/example_rule/edit';
/**
* 削除する URL パス
*
* @var 文字列
*/
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 配列 $components
* @param 配列 $data
*/
パブリック関数 __construct(
\Magento\Framework\UrlInterface $urlBuilder,
\Magento\Framework\View\Element\UiComponent\ContextInterface $context,
\Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
配列 $components = [],
配列 $data = []
) {
$this->urlBuilder = $urlBuilder;
parent::__construct($context, $uiComponentFactory, $components, $data);
}
/**
* データソースの準備
*
* @param 配列 $dataSource
* @return 配列
*/
public function prepareDataSource(array $dataSource)
{
if (!isset($dataSource['data']['items'])) {
$dataSource を返します。
}
foreach ($dataSource['data']['items'] as &$item) {
if (!isset($item['rule_id'])) {
継続する;
}
$item[$this->getData('name')] = [
'編集' => [
'href' => $this->urlBuilder->getUrl(
static::URL_PATH_EDIT、
[
'id' => $item['rule_id'],
]
)、
'ラベル' => __('編集'),
]、
'削除' => [
'href' => $this->urlBuilder->getUrl(
static::URL_PATH_DELETE,
[
'id' => $item['rule_id'],
]
)、
'ラベル' => __('削除'),
'確認' => [
'title' => __('"${ $.$data.name}" を削除'),
'message' => __('ルール「${ $.$data.name }」を削除してもよろしいですか?'),
]、
]、
];
}
$dataSource を返します。
}
}
?>このクラスは、グリッドからのアクションの処理を担当します。 ここから、URL や送信パラメータの名前を変更できます。 この場合、キーは rule_id です (その値を理解しやすくするために、「id」という名前で送信されます)。
次のようになります。
すべてを正しく行った場合、グリッドは次のようになります。
例からわかるように、既存の標準グリッドを UI に変換するのは非常に簡単です。 標準のグリッド機能を拡張するだけでなく、Magento 2 機能のこの部分の操作を簡素化することもできます。
PSシリーズの次の記事では、質量 (アクションと余分な列) を追加する可能性について説明します。
乞うご期待！