[编辑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合作了一个多月，这就是我注意到的有关创建网格的新方法的内容。
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 />节点需要attribute name。在这种情况下，data定义有关组件的基本信息。它<item />为配置的每个特定部分包含多个节点。js_config告诉组件清单xml配置中的数据和依赖项的提供者在哪里（我认为这将转换为javascript哈希）。provider值包括布局文件中使用的列表名称和稍后将使用的唯一数据源名称。在那些列表中，我签入了magento provider，deps并且相同。我不确定有什么不同。spinner获取定义网格列的节点的名称。buttons允许在网格顶部添加按钮。在大多数情况下，这只是Add new按钮。按钮具有几个元素：namelabel该按钮用作元素id，是class按钮类，是按钮url指向的链接。Asteriks替换为当前网址的一部分。其他可能<item />对按钮节点是：id，title，type（复位，或提交按钮）， onclick（而不是url，它的优先级）， ，style，。value disabledButton元素按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调用的入口点。中的第二个参数是<dataSource />指javascript文件，该文件处理发送和处理网格ajax调用的js部分。默认文件是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.js使用template的点Magento/Ui/view/base/web/templates/grid/controls/columns.html。最后一项是displayArea定义需要在何处显示列控件的项。它引用getRegion('dataGridActions')在container/argument/config/template（默认值：）中定义的文件中Magento/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.jsas component和Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlas用作剔除模板。调查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在第一argument节点是由在第二类中定义每状态提供的URL被中省略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>将用作提供过滤器select选项的类。
component-定义用于呈现列的js文件。可用的选项在中Magento/Ui/view/base/web/js/grid/columns/*。选择是提供的，过滤器设置为选择。对于文本过滤器，不需要此值。
dataType-提供用于列值的数据类型信息。对于select使用，对于dateRange使用日期，也要选择select-
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中用于节点的名称匹配，并且它不解析为collection，而是解析为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>