[2018年10月3日編集]
devdocsへのリンクの更新：2.0- https ://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html および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
[2016年1月21日編集]
2016年1月20日の時点で、magento2 devdocsはUIコンポーネントの拡張ドキュメントで更新されました。広範囲にチェックしたことはありませんが、数日前に提供した応答よりも多くの情報が含まれている可能性があるため、時間を節約するために、http：//devdocs.magento.com/guides/v2.0/uiをご覧ください。-library / ui-library-secondary.html
[/編集]
Magento2を使用して1か月以上になりますが、これがグリッドを作成する新しい方法について気づいたことです。
Magento 2 UIグリッドコンポーネント
1）内部のレイアウトファイルはCompany/Module/view/adminhtml/layout/module_controller_action.xml、グリッドを次のようにuiComponentとして定義します。
<?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はCompany/Module/view/adminhtml/ui_component/listing_name.xmlファイルで定義されています。ファイル名は、レイアウトファイルで使用されるuiComponent名と同じである必要があります。ファイルの構造は一見非常に複雑に見えるかもしれませんが、いつものようにこれらはいくつかの繰り返しノードです。シンプルにするには、スライスします。コンポーネントファイルのメインノードは<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">です。これは修正されており、名前空間の場所属性が必要だと思います。次が内部4つのノード典型的には<listing />、ノードは：<argument />、<dataSource />、<container />および<columns />。ただし、これは厳密な設定ではありません。<argument />ノードを複製してより多くの構成を提供したり<container />、何らかの理由で「スティッキー」コンテナを追加するcmsページリストのようにしたりする可能性があります。
最初のノードは<argument />です。このノードは、コンポーネントのデータを定義します。通常、次のようなものを提供する必要があります。
<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 />ノードには属性が必要ですname。この場合data、コンポーネントに関する基本情報を定義します。<item />構成の特定の部分ごとに複数のノードが含まれています。js_configリストxml構成内のデータと依存関係のプロバイダーをコンポーネントに伝えます（これはJavaScriptハッシュに変換されると思います）。provider値は、レイアウトファイルで使用されるリスト名と、後で使用される一意のデータソース名で構成されます。これらのリストには、私は、Magentoの中で確認providerし、deps同じです。私はこれが異なることの用途がわからない。spinnerグリッドの列が定義されているノードの名前を取ります。buttonsグリッドの上部にボタンを追加できます。ほとんどの場合、Add newボタンだけです。ボタンにはいくつかの要素があります：name要素IDとして使用されlabel、ボタンが言うこと、classボタンクラス、およびurlそれが指すリンクです。アスタリスクは、現在のURLの一部に置き換えられます。他の可能な<item />ボタンのノードは、次のとおりです。id、title、type（リセット、提出またはボタン）、 onclick（代わりにurl、それが優先されます）、 、style、。value disabledボタン要素はMagento\Ui\Component\Control\Buttonクラスによってレンダリングされます。
次に<dataSource />ノードがあります：
<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>
nameで使用される<dataSource />ノードは、で使用されるものと一致しなければならないargument/js_config/providerとしますargument/js_config/deps。次のノードは、グリッドのデータの準備を担当するクラスを定義します。class引数には、で一致する一意の名前が必要di.xmlです。primaryFieldNameデータベースのプライマリ列とrequestFieldNamehttpリクエストの変数に関連しています。それらは等しいかもしれませんが、そうする必要はありません。CMSページリストではpage_idas primaryFieldNameとidasを使用しrequestFieldNameます。update_urlは、フィルタリングとソートのためのajax呼び出しが送信されるエントリポイントを指します。の2番目の引数は<dataSource />、グリッドのajax呼び出しの送信と処理のjs部分を処理するjavascriptファイルを参照します。デフォルトのファイルはMagento/Ui/view/base/web/js/grid/provider.jsです。
別のノードは<container />です。
<container name="listing_top"> ... </container>
たくさんのデータが含まれているので、私もそれを分割させてください。その子はページ全体の一部です。最初の子<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>
レイアウトとすべてのアクションを処理するノックアウトテンプレートを定義し、デフォルトで Magento/Ui/view/base/web/templates/grid/toolbar.html
次のノードは（または可能） <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>
このノードは、グリッドにブックマーク機能を追加します。管理者は、異なる列を表示するグリッドの異なる「プロファイル」を設定できます。そのおかげで、テーブルのすべての列をグリッドに追加し、ユーザーに関連する情報をユーザーに決定させることができます。namespaceレイアウトファイルで使用される名前と一致する必要があります。
別のノードは <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>
ここで設定する3つの値があります。最初providerのパターンは、[listing_name_from_layout]。[listing_name_from_layout]。[listing_columns_node_name]（ノードリスト/引数/スピナーなど）のパターンに従います。componentは、グリッドを表示するjsファイルと、デフォルトでMagento/Ui/view/base/web/js/grid/controls/columns.jstemplateを使用するポイントを指しますMagento/Ui/view/base/web/templates/grid/controls/columns.html。最後の項目はdisplayArea、列コントロールを表示する必要がある場所を定義します。（デフォルトgetRegion('dataGridActions')：）で定義されているファイル内を参照します。container/argument/config/templateMagento/Ui/view/base/web/templates/grid/toolbar.html
次のノードは <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>
このノードは、ページに全文検索を追加します。プレースホルダーとして「キーワードで検索」する単一のテキスト入力フィールドとしてグリッドの上にあります。ここで何のオプションを使用できるかはわかりませんが、listing_filters_chipsはMagento/Ui/view/base/web/js/grid/filters/chips.jsファイルを参照します。
次のノードは <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>
このノードは、グリッドの右上にある[フィルター]ボタンをクリックした後に表示される列フィルターの構成を定義します。columnsProvider前のノードと同様の構造に従っているため、[listing_name_from_layout]。[listing_name_from_layout]。[listing_columns_node_name]。storegeConfig[listing_name_from_layout]。[listing_name_from_layout]。[container_node_name] [bookmark_node_name]のようになります。でtemplates項目ノードあなたは、特定のフィルタオプションをレンダリングするために使用されているファイルを定義することができます。この場合、selectのみが定義さMagento/Ui/view/base/web/js/form/element/ui-select.jsれcomponent、Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlノックアウトテンプレートとして使用されます。Magento/Ui/view/base/web/js/form/element他の可能性を確認してください。ここではselectのみが定義され、デフォルト値をオーバーライドします：Magento/Ui/view/base/web/js/form/element/select.jsおよびMagento/Ui/view/base/web/templates/grid/filters/elements/select.html。フィルターおよびその他のノードのデフォルト値はで定義されていMagento/Ui/view/base/ui_component/etc/definition.xmlます。
次のノードは<massAction />、マスアクション選択をグリッドに追加することを可能にします
<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>
name引数は一意でなければなりません。最初の子ノード<argument />は基本データを定義します。provider他のノードと同じ構造に従い、列ノード名とそのid列を参照します。この列には、一括アクションで処理するために選択されたアイテムのチェックボックスが保持されます。component一括アクションのレンダリングと処理に使用するファイルを定義します。デフォルト値はMagento_Ui/js/grid/massactions（を指すMagento/Ui/view/base/web/js/grid/massactions.js）です。Magento_Ui/js/grid/tree-massactions構造のようなツリーを追加するために使用できます。上記の場合、「有効」および「無効」オプションを示す「ステータスの変更」アクションを追加するために使用します。<argument />ノードの後に、必要な<action />数のアクションと同じ数のノードを追加できます。各<action />ノードは同様のスキームに従います。最初のケース（削除アクション）では、ノードに一意の名前が必要です。次にargument、構成が含まれますlabel選択オプション、urlデータを送信するエンドポイント、およびconfirm送信前に確認モードを追加するエンドポイントに表示されます。URLが2番目のノードで定義されたクラスによってステータスごとに提供されるためurl、最初のargumentノードの「ステータスの変更」アクションの場合は省略されargumentます。クラスはZend \ Stdlib \ JsonSerializableインターフェースを実装する必要があります。Magento\Customer\Ui\Component\MassAction\Group\Options参考として確認してください。
最後に、<container />ノードに<paging />ページネーションを定義するノードがあります。
<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>
以下のための構造providerとselectProvider、今は明らかです。
そして、基本グリッドの最後のノードは<columns />です。管理者が使用できる列のすべての定義が含まれています。ノードは次のように定義されます
<columns name="listing_columns"> ... </columns>
また、name属性は、他のノードを参照するときに使用されます。最初の子は
<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>
ここで行ったことはprovider、リストで使用されているスキームに従って正しい値を提供することだけでした。fieldActionノードでは、セルをクリックしたときに起動されるアクションを定義できます。デフォルト設定呼び出し編集アクション
次は <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>
このノードは、使用する一括アクションのチェックボックスで列を定義します。名前は、上記のいくつかのノードでドットの後に参照されます。
その後、同じ形式で任意の数の列を追加できます。
<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>
ほとんどの内部アイテムノードがすべて必要というわけではありません。彼らは定義しています：
filter-列のフィルタータイプ。これは、フィルターブロックで使用されます。使用可能な値は、text、select、dateRangeです。selectが使用<item name="options">...</item>される場合、フィルター選択のオプションを提供するクラスとして使用されます
component-列のレンダリングに使用されるjsファイルを定義します。利用可能なオプションはにありますMagento/Ui/view/base/web/js/grid/columns/*。selectが提供され、filterがselectに設定されます。テキストフィルタの場合、この値は必要ありません。
dataType-列の値に使用されるデータ型の情報を提供します。selectを使用する場合はselectを使用し、dateRangeを使用する場合はdate-
bodyTmplノックアウトがセルをレンダリングするために使用するhtmlファイルを定義します。デフォルトでは、ui / grid / cells / textが使用されます（Magento/Ui/view/base/web/templates/grid/cells/text.html）。他のオプションはMagento/Ui/view/base/web/templates/grid/cells/*ディレクトリにあります。ui/grid/cells/htmlセルでhtmlコンテンツを使用できます。
label -これは列ヘッダーとフィルターブロックに表示されます
sortOrder -注文
visible-列を表示するかどうか。これはブックマークの列を定義するために使用できますが、デフォルトでは表示しません。
最後に、単一のアイテムに対して実行できるアクション列を追加できます。
<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>
indexFieldデータベース内の列名を参照します。アクションクラスはメソッドを拡張Magento\Ui\Component\Listing\Columns\Columnおよび定義する必要がありますprepareDataSource。参考Magento/Cms/Ui/Component/Listing/Column/PageActions.phpとしてご覧ください
3）グリッドを完成させるには、Company / Module / etc / di.xmlにいくつかの要素を定義する必要があります
まず、ノードで使用されたプロバイダークラスを定義します 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>
collection標準のコレクションクラスに解決し、filerPool新しい要素を定義します。
<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>
これは明らかにフィルタリングと検索で何かをしなければなりません。今のところ、常にデフォルト値を使用しています。
次に、データソースを登録します。
<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>
この場合、ノード名は<dataSource />xmlのリストのノードで使用されているものと一致する必要があり、コレクションではなくGridCollectionクラスに解決されます。通常のコレクションクラスを拡張し、さらに実装する必要がありMagento\Framework\Api\Search\SearchResultInterfaceます。
最後に、グリッドコレクションを構成します（引数名はかなり明白です）
<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>