Magento 2: Создание грида в adminhtml

Автор: admin от 19-09-2016, 19:40, посмотрело: 633

Краткая памятка по созданию гридов в админке Magento 2. В качестве примера я взял простой грид из трех колонок, данные для которого (коды стран по ISO 3166) поставляются из прописанного в коде массива. Для того, чтобы сфокусироваться на основных аспектах построения грида я отбросил из дескриптора UI-компонента максимум возможного (дополнительные кнопки, фильтры, сортировка, bookmarks, ...) и часть настроек перенес в конструктор провайдера данных для грида. Если можно сделать еще короче без потери читабельности — с максимальным удовлетворением внесу соответствующие правки. Код примера на github'е — flancer32/sample_mage2_admin_grid.


Magento 2: Создание грида в adminhtml

ACL


Создаем запись в ACL (./etc/acl.xml) для контроля доступа к гриду:


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    [leech=https://github.com/magento/magento2/blob/develop/app/code/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml]CMS Pages[/leech]). </p><br/>
<p>На что следует обратить внимание:</p><br/>
<ul>
<li>имя компонента `sample_grid` совпадает с именем файла и используется в описании `js_config` (provider & deps);</li>
<li>в настройках spinner'а указывается имя `columns`-компонента, после заполнения данными которого spinner скрывается;</li>
<li>настройки data source'а спрятаны в конструкторе класса `Flancer32SampleUiComponentDataProviderGrid`;</li>
<li>имена столбцов грида совпадают с именами полей в данных;</li>
<li>без указания настроек сортировки (`sorting`) хотя бы для одного столбца грид не загружается;</li>
</ul><br/>
<h2>DataProvider</h2><br/>
<p>За поставку данных отвечает класс <code>Flancer32SampleUiComponentDataProviderGrid</code>. Конструктор принимает из дескриптора компонента только один параметр (<code>name</code>), все остальные либо инжектятся Object Manager'ом при создании провайдера данных, либо создаются в нем же. Данные не зависят от фильтров/сортировки и всегда возвращаются одни и те же (захардкожены в самом провайдере).</p><br/>
[code]namespace Flancer32SampleUiComponentDataProvider;

class Grid
    extends MagentoFrameworkViewElementUiComponentDataProviderDataProvider
{
    public function __construct(
        $name,
        MagentoFrameworkApiSearchReportingInterface $reporting,
        MagentoFrameworkApiSearchSearchCriteriaBuilder $searchCriteriaBuilder,
        MagentoFrameworkAppRequestInterface $request,
        MagentoFrameworkApiFilterBuilder $filterBuilder,
        MagentoFrameworkUrlInterface $url
    ) {
        $primaryFieldName = 'id';
        $requestFieldName = 'id';
        $meta = [];
        $updateUrl = $url->getRouteUrl('mui/index/render');
        $data = [
            'config' => [
                'component' => 'Magento_Ui/js/grid/provider',
                'update_url' => $updateUrl
            ]
        ];
        parent::__construct($name, $primaryFieldName, $requestFieldName, $reporting, $searchCriteriaBuilder, $request,
            $filterBuilder, $meta, $data);
    }

    public function getData()
    {
        $result = [
            'items' => [
                ['code2' => 'AU', 'code3' => 'AUS', 'code_num' => '036'],
                ['code2' => 'AT', 'code3' => 'AUT', 'code_num' => '040'],
                ['code2' => 'AZ', 'code3' => 'AZE', 'code_num' => '031']
            ],
            'totalRecords' => 3
        ];
        return $result;
    }

}

Резюме


Создание гридов в Magento 2 — это увлекательное занятие, которому можно посвятить не только свободные часы, но дни, а может быть даже и недели. Конечно, со временем оно станет менее увлекательным и более обыденным, но пока все еще остается возможность добавить в админку свой собственный грид не в пару кликов, а путем вдумчивого и кропотливого изменения если и не десятка файлов, то около того (если бы я трусливо не захаркодил данные в провайдере — точно достиг бы этого уровня, а может быть даже и превысил). Возможно кто-то окажется более смелым и захочет использовать встроенный MagentoFrameworkViewElementUiComponentDataProviderDataProvider и зарегистрировать для него в ./src/etc/di.xml соответствующую коллекцию:


<type name="MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="sample_grid_data_source" xsi:type="string">VendorModuleModelResourceModelGridCollection</item>
        </argument>
    </arguments>
</type>

Пожелаю ему в этом удачи. Я, к сожалению, на данный момент свой лимит увлекательности исчерпал.


Всем счастливого Magento 2 coding'а!



Источник: Хабрахабр

Категория: Программирование » Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *