Объяснение UI Component Grid в Magento 2

Есть ли хорошее объяснение и / или пример минимальной конфигурации, необходимой для создания UI Component Grid в Magento 2?

Я знаю, что есть множество основных компонентов, таких как

./vendor/magento/module-catalog/view/adminhtml/ui_component/product_listing.xml

Тем не менее, эти XML-файлы являются обширными, и есть мало объяснений о том, что делает каждый узел, и как вы будете использовать это для создания сетки с нуля.

Там также этот пример модуля , но это

Кажется, что перед формой
Отсутствует какой-либо контекст / объяснение того, что делает каждый узел

Я ищу информацию о начале работы, которая позволила бы мне построить сетку для моей собственной коллекции моделей CRUD.

magento2 php layout uicomponent Алан Сторм
источник

Не совсем полный ответ - но моя серия компонентов пользовательского интерфейса - хорошее место для начала: alanstorm.com/category/magento-2/#magento-2-ui

Alan Storm

Ответы:

167

[РЕДАКТИРОВАТЬ 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>

Zefiryn
источник

ты получил шанс посмотреть в мою

ветку

Насколько я понимаю, это все еще намного лучше, чем документы.

Аарон Поллок

2) uiComponent определен в Company / Module / view / adminhtml / ui_component / перечислении_имя.xml. Таким образом, в принципе, компонент сетки не работает на веб-интерфейсе?

Лачезар Райчев

старый пост, который я знаю - но я пришел к этому, следил за ним (спасибо, между прочим, одно из самых подробных объяснений этого вопроса), но я получаю непонятную ошибку по отношению к collectionFactory. в частности, функция argumentsResolver. Он говорит, что аргумент 2 должен быть массивом, но задан нуль - я сделал все вышеописанное - но есть ли что-то еще, что я должен был сделать? :)

treyBake

@AshishViradiya обновленные ссылки выше, в разделе [РЕДАКТИРОВАТЬ 3 октября 2018]

Zefiryn

Для сетки нам нужны два основных файла: один - ui_component xml, а второй - di.xml.

Я надеюсь, что вы знаете, в макете XML-файла, вам нужно добавить тег uiComponent, т.е.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="test_lists_listing"/>
        </referenceContainer>
    </body>
</page>

Теперь вам нужно создать test_lists_listing.xmlв папке ui_component.

Например, приложение \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

Этот файл имеет количество тегов

<argument name="data" xsi:type="array"> : - нужно упомянуть arugemnt, как кнопка JS и т.д ..
<dataSource name="test_lists_listing_data_source">: - этот блок используется для предоставления данных для сеток в этом одном из аргументов, о <argument name="class" xsi:type="string">ListsGridDataProvider</argument>котором мы должны упомянуть di.xml(объяснено в части di.xml )
<container name="listing_top"> : - в этом блоке мы упоминаем фильтры, экспорт, закладки (которые сохраняют данные в таблице ui_bookmark), массовые операции, разбиение на страницы и полнотекст (для полнотекстового поиска в настройках или в таблице этот столбец должен быть полнотекстовым индексом)
<columns name="test_lists_columns"> : - в этом нам нужно упомянуть все колонки

Последний находится в di.xml

<virtualType name="TestGirdFilterPool" 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>  


<virtualType name="ListsGridDataProvider" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
    <arguments>
        <argument name="collection" xsi:type="object" shared="false">Sugarcode\Test\Model\ResourceModel\Test\Collection</argument>
        <argument name="filterPool" xsi:type="object" shared="false">TestGirdFilterPool</argument>
    </arguments>
</virtualType>  


<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="test_lists_listing_data_source" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection</item>
        </argument>
    </arguments>
</type>
<type name="Sugarcode\Test\Model\ResourceModel\Test\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">testtable</argument>
        <argument name="eventPrefix" xsi:type="string">test_test_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">test_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Sugarcode\Test\Model\ResourceModel\Test</argument>
    </arguments>
</type>

TestGirdFilterPool: - упомянуть фильтры
ListsGridDataProvider: - который я упомянул в пользовательском интерфейсе XML для поставщика данных
CollectionFactory: - нужно упомянуть коллекцию
Сетка / Коллекция: - здесь нужно передать все параметры, такие как имя таблицы, коллекция и т. Д.

Приложение \ код \ Sugarcode \ Test \ вид \ adminhtml \ ui_component \ test_lists_listing.xml

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Ui/etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
            <item name="deps" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">test_lists_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 Info</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="test_lists_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">ListsGridDataProvider</argument>
            <argument name="name" xsi:type="string">test_lists_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">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>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
            </item>
        </argument>
        <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">test_lists_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <exportButton name="export_button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                </item>
            </argument>
        </exportButton>
        <container 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">test_lists_listing.test_lists_listing.test_lists_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>
        </container>
        <filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/search/search</item>
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">

            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_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">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.${ $.index }:visible</item>
                        </item>
                    </item>
                </item>
            </argument>


            <filterSelect name="status">
                <argument name="optionsProvider" xsi:type="configurableObject">
                    <argument name="class" xsi:type="string">Sugarcode\Test\Model\Status</argument>
                </argument>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="caption" xsi:type="string" translate="true">Select...</item>
                        <item name="label" xsi:type="string" translate="true">Status</item>
                    </item>
                </argument>
            </filterSelect>

        </filters>

        <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="indexField" xsi:type="string">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="test/lists/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="edit">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">edit</item>
                        <item name="label" xsi:type="string" translate="true">Edit</item>
                        <item name="callback" xsi:type="array">
                            <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns_editor</item>
                            <item name="target" xsi:type="string">editSelected</item>
                        </item>
                    </item>
                </argument>
            </action>
            <action name="disable">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">disable</item>
                        <item name="label" xsi:type="string" translate="true">Disable</item>
                        <item name="url" xsi:type="url" path="test/lists/massDisable"/>
                    </item>
                </argument>
            </action>
            <action name="enable">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">enable</item>
                        <item name="label" xsi:type="string" translate="true">Enable</item>
                        <item name="url" xsi:type="url" path="test/lists/massEnable"/>
                    </item>
                </argument>
            </action>
        </massaction>

        <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">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                    <item name="options" xsi:type="array">
                        <item name="20" xsi:type="array">
                            <item name="value" xsi:type="number">20</item>
                            <item name="label" xsi:type="string" translate="true">20</item>
                        </item>
                        <item name="30" xsi:type="array">
                            <item name="value" xsi:type="number">30</item>
                            <item name="label" xsi:type="string" translate="true">30</item>
                        </item>
                        <item name="50" xsi:type="array">
                            <item name="value" xsi:type="number">50</item>
                            <item name="label" xsi:type="string" translate="true">50</item>
                        </item>
                        <item name="100" xsi:type="array">
                            <item name="value" xsi:type="number">100</item>
                            <item name="label" xsi:type="string" translate="true">100</item>
                        </item>
                        <item name="200" xsi:type="array">
                            <item name="value" xsi:type="number">200</item>
                            <item name="label" xsi:type="string" translate="true">200</item>
                        </item>
                    </item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="test_lists_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                </item>
                <item name="editorConfig" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_columns.ids</item>
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="clientConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="test/lists/inlineEdit"/>
                        <item name="validateBeforeSave" xsi:type="boolean">false</item>
                    </item>
                </item>

                <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.test_lists_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 name="controlVisibility" xsi:type="boolean">true</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.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>
            </item>
        </argument>     
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn> 
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>   
         <column name="order_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="filter_index" xsi:type="string">o.increment_id</item>
                    <item name="add_field" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Order ID</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>       
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>

        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Sugarcode\Test\Model\Status</item>
                <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                </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="editor" xsi:type="string">select</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
        </column>   


        <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">dateRange</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Created</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                </item>
            </argument>
        </column>

        <actionsColumn name="actions" class="Sugarcode\Test\Ui\Component\Listing\Column\TestActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

Прадип Кумар
источник

sortOrder не работает для selectionColumn. Не почему он приходит наконец

Bhupendra Jadeja

Дополнение Топ Ответа

Верхний ответ отличный, я следую за ним, чтобы создать страницу со списком. Но есть проблема :

Когда вы применяете фильтр, затем удаляете фильтр, то же содержимое строки будет повторяться во всей сетке страницы .

Решение

В <dataSource />узле ниже <item name="update_url" xsi:type="url" path="mui/index/render"/>добавьте содержимое:

<item name="storageConfig" xsi:type="array">
    <item name="indexField" xsi:type="string">entity_id</item>
</item>

entity_id является первичным ключом для коллекции списков.

Ключ Шан
источник

Я нашел ответ @ Zefiryn очень полезным и отличным способом начать работу, не читая полную документацию от Magento.

Это сказало, что я не получал вещи, вполне работающие после этих ответов. Более того, если у вас есть работающая страница со списком, вам сразу же понадобится остальная часть интерфейса CRUD.

Я нашел образец модуля на GitHub . Начиная с этой темы для ориентации, затем перенос / взлом кода из примера плагина оказался самым быстрым способом получить интерфейс CRUD для пользовательской таблицы.

quickshiftin
источник