[РЕДАКТИРОВАТЬ 3 октября 2018 г.]
Обновление ссылок на devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html и https://devdocs.magento.com/guides/v2. 0 / 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
[ПРАВКА 21 января 2016 г.]
По состоянию на 20.01.2016 в magento2 devdocs добавлена расширенная документация по компонентам пользовательского интерфейса. Я не проверял это подробно, но они могут содержать больше информации, чем ответ, который я дал несколько дней назад, поэтому в интересах вашего времени вы можете захотеть увидеть http://devdocs.magento.com/guides/v2.0/ui -library / щ-библиотека-secondary.html
[/РЕДАКТИРОВАТЬ]
Я работаю с Magento2 уже более месяца, и это то, что я заметил, о новом способе создания сеток.
Компонент сетки пользовательского интерфейса Magento 2
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используется как идентификатор элемента, 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относится к первичному столбцу базы данных и requestFieldNameк переменной в запросах http. Они могут быть равны, но не обязательно, листинг CMS использует page_idкак primaryFieldNameи idкак requestFieldName. update_urlотносится к точке входа, куда отправляются вызовы ajax для фильтрации и сортировки. Второй аргумент в <dataSource />относится к файлу javascript, который обрабатывает js часть отправки и обработки вызовов ajax для сетки. Файл по умолчанию 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который следует шаблону [list_name_from_layout]. [List_name_from_layout]. [Перечисление_columns_node_name] (как в листинге узла / аргумент / спиннер). componentссылается на файл js, который отображает сетку и по умолчанию указывает на Magento/Ui/view/base/web/js/grid/controls/columns.jsкоторый используется шаблон 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>
Этот узел добавляет полнотекстовый поиск на страницу. Он расположен над сеткой в виде единого текстового поля ввода с заполнением «Поиск по ключевому слову». Я не уверен, какие варианты возможны здесь, поскольку я не играл с этим много, но перечисление_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следует структуре, аналогичной предыдущим узлам, поэтому [list_name_from_layout]. [list_name_from_layout]. [перечисление_columns_node_name]. storegeConfigвыглядит как [имя_файла_ перечисления]. [имя_файла_ перечисления]. [имя_контейнера_символа] [имя_узла_маркинга]. В 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чтобы увидеть другие возможности. Здесь определен только выбор для переопределения значений по умолчанию: 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следует той же структуре, что и другие узлы, и ссылается на имя узла столбцов и его столбец идентификаторов. Этот столбец будет содержать флажки с выбранными элементами для массового действия для обработки. 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 use select также, для dateRange use date
bodyTmpl- определяет html-файл, используемый knockout для визуализации ячейки. По умолчанию используется пользовательский интерфейс / сетка / ячейки / текст ( 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>