[EDIT 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-компоненти / ui-second.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
[EDIT 21 січня 2016]
Станом на 20.01.2016 magento2 devdocs було оновлено розширеною документацією про компоненти інтерфейсу. Я не перевіряв її детально, але вони можуть містити більше інформації, ніж відповідь, яку я дав кілька днів тому, тож у ваш час, можливо, ви захочете побачити http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-second.html
[/ EDIT]
Я працюю з 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 />вузол вимагає атрибута 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слідує за шаблоном [listing_name_from_layout]. [Listing_name_from_layout]. [Listing_column_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>
Цей вузол додає повний пошук тексту на сторінку. Він розташований над сіткою як поле для введення одного тексту з написом "Пошук за ключовим словом". Я не впевнений, які варіанти тут можливі, оскільки я з цим не грав багато, але 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_column_node_name]. storegeConfigвиглядає як [listing_name_from_layout]. [listing_name_from_layout]. [listing_name_from_layout]. [listing_name_from_layout]. У templatesвузлі елемента можна визначити, які файли використовуються для візуалізації конкретних параметрів фільтра. У цьому випадку визначається лише вибір, який використовується 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- це те, що видно в опції select, 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- тип фільтра колонки. Це використовується в блоці фільтрів. Доступні значення: текст, виберіть, датаRange. Якщо вибір використовується, <item name="options">...</item>буде використовуватися як клас, який надає параметри для вибору фільтра
component- визначає js файли, які використовуються для візуалізації стовпця. Доступні варіанти є в Magento/Ui/view/base/web/js/grid/columns/*. вибір надається, фільтр встановлюється для вибору. Для текстового фільтра це значення не потрібно.
dataType- надає інформацію про тип даних, який використовується для значення стовпця. Для вибору використання також виберіть, для датиRange використовувати дату
bodyTmpl- визначає html-файл, який використовується нокаутом для візуалізації комірки. За замовчуванням використовується ui / grid / cell / 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) для завершення сітки нам потрібно визначити деякі елементи в компанії / модулі / тощо / 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>