Explicação da grade de componentes da interface do usuário no Magento 2

91

Existe uma boa explicação e / ou amostra da configuração mínima necessária para criar uma grade de componentes de interface do usuário no Magento 2?

Eu sei que existem inúmeros componentes principais, como

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

No entanto, esses arquivos XML são amplos, e há poucas explicações sobre o que cada nó faz e como você usaria isso para criar uma grade do zero.

Há também este módulo de amostra , mas

  1. Parece estar diante de um formulário
  2. Falta qualquer contexto / explicação sobre o que cada nó faz

Estou procurando as informações de "introdução" que me permitiriam criar uma grade para minha própria coleção de modelos CRUD.

magento2 php layout uicomponent Alan Storm
fonte
6
Não é bem a pena uma resposta completa - mas minha série de componentes de interface do usuário é bom lugar para começar: alanstorm.com/category/magento-2/#magento-2-ui
Alan Storm

Respostas:

167

[EDITAR em 3 de outubro de 2018]

Atualização para links para o devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html e https://devdocs.magento.com/guides/v2. 0 / ui-components / 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 de janeiro de 2016]

A partir de 20/01/2016, o magento2 devdocs foi atualizado com a documentação estendida dos componentes da interface do usuário. Eu não o verifiquei extensivamente, mas elas podem conter mais informações do que a resposta que eu dei há alguns dias. Portanto, no interesse do seu tempo, você pode querer ver http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-second.html

[/EDITAR]

Estou trabalhando com o Magento2 há mais de um mês e foi isso que notei sobre a nova maneira de criar grades.

Componente de grade da interface do Magento 2

1) arquivo de layout dentro de Company/Module/view/adminhtml/layout/module_controller_action.xmldefinir grade como uiComponent com:

<?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 é definido no Company/Module/view/adminhtml/ui_component/listing_name.xmlarquivo. O nome do arquivo deve ser igual ao nome do uiComponent usado no arquivo de layout. A estrutura do arquivo pode parecer bastante complexa à primeira vista, mas como sempre, esses são alguns nós repetidos. Para simplificar, vamos cortá-lo. O nó principal do arquivo de componente é <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. É fixo e acredito que requer o atributo de localização do espaço para nome. A seguir são tipicamente 4 nós dentro <listing />nó: <argument />, <dataSource />, <container />e <columns />. Entretanto, essa não é uma configuração rigorosa, pois o <argument />nó pode ser duplicado para fornecer mais configuração ou <container />na listagem de páginas do cms que adiciona contêiner "pegajoso" por algum motivo.

O primeiro nó é <argument />. Este nó define os dados para o componente. Geralmente você precisa fornecer algo como isto:

<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 />nó requer atributo name. Nesse caso, datadefine informações básicas sobre o componente. Ele contém vários <item />nós para cada parte específica da configuração. js_configinforma ao componente onde é o provedor dos dados e dependências na configuração xml da listagem (que eu acho que é convertida em hash javascript). providerO valor consiste no nome da listagem usado no arquivo de layout e no nome exclusivo da fonte de dados que será usado posteriormente. Nessas listagens, verifiquei o magento providere depssão as mesmas. Não tenho certeza do que adianta ter isso diferente. spinnerleva o nome do nó em que as colunas da grade são definidas. buttonspermite adicionar botões ao topo da grade. Na maioria dos casos, seria apenas o Add newbotão. Os botões possuem alguns elementos:nameusado como identificação do elemento, labelé o que diz o botão, classé a classe de botão e urlé o link para o qual aponta. Asteriks é substituído pela parte do URL atual. Outros possíveis <item />nós de botão são: id, title, type(reiniciar, enviar ou botão), onclick(em vez de url, ele tem precedência), style, value, disabled. O elemento Button é renderizado por Magento\Ui\Component\Control\Buttonclasse.

Em seguida, temos o <dataSource />nó:

<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>

nameusado no <dataSource />nó deve corresponder ao usado em argument/js_config/providere argument/js_config/deps. O próximo nó define qual classe é responsável pela preparação dos dados para a grade. classO argumento requer um nome exclusivo que corresponderá di.xml. primaryFieldNamerefere-se à coluna principal do banco de dados e requestFieldNameà variável nas solicitações http. Eles podem ser iguais, mas não precisam, a listagem de páginas do CMS usa page_idcomo primaryFieldNamee idcomo requestFieldName. update_urlrefere-se ao ponto de entrada para o qual as chamadas do ajax para filtragem e classificação são enviadas. O segundo argumento em <dataSource />refere-se ao arquivo javascript que lida com js parte do envio e processamento de chamadas ajax para a grade. O arquivo padrão é Magento/Ui/view/base/web/js/grid/provider.js.

Outro nó é <container />.

<container name="listing_top"> ... </container>

Como ele contém muitos dados, deixe-os dividir também. Seus filhos são as partes da página inteira. Primeiro filho <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>

Ele define o modelo de knockout responsável por manipular o layout e todas as ações e, por padrão, aponta para Magento/Ui/view/base/web/templates/grid/toolbar.html

O próximo nó é (ou pode ser) <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>

Este nó adiciona recurso de marcador à grade. Ele permite ao administrador configurar diferentes "perfis" da grade que exibe colunas diferentes. Graças a isso, você pode adicionar todas as colunas da tabela à grade e deixar que o usuário decida quais informações são relevantes para ele. namespacedeve corresponder ao nome usado no arquivo de layout.

Outro nó é <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>

Temos 3 valores para configurar aqui. Primeiro é o providerque segue o padrão [nome_da_listagem_do_layout]. [Nome_da_listagem_do_layout]. [Nome_da_coluna_nome_da_coluna] (como na listagem / argumento / spinner do nó). componentrefere-se ao arquivo js que exibe grade e, por padrão, pontos para os Magento/Ui/view/base/web/js/grid/controls/columns.jsquais usa modelo Magento/Ui/view/base/web/templates/grid/controls/columns.html. O último item é o displayAreaque define onde os controles da coluna precisam ser exibidos. Refere-se ao getRegion('dataGridActions')arquivo definido em container/argument/config/template(padrão Magento/Ui/view/base/web/templates/grid/toolbar.html:).

O próximo nó é <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>

Este nó adiciona uma pesquisa de texto completo à página. Ele está localizado acima da grade como um campo de entrada de texto único, com "Pesquisar por palavra-chave" como espaço reservado. Não tenho certeza de quais opções são possíveis aqui, pois não brinquei muito com isso, mas o list_filters_chips se refere ao Magento/Ui/view/base/web/js/grid/filters/chips.jsarquivo.

O próximo nó é <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>

Este nó define a configuração da filtragem de colunas que é visível após clicar no botão "Filtros" na parte superior direita acima da grade. columnsProvidersegue uma estrutura semelhante aos nós anteriores, portanto, [nome_da_listagem_do_layout]. [nome_da_listagem_do_layout]. [nome_da_coluna_nome_da_coluna]. storegeConfigvai como [nome_da_listagem_do_layout]. [nome_da_listagem_do_layout]. [nome_do_nó_pacote] [nome_do_do_marcador_do_marcador]. No templatesnó do item, você pode definir quais arquivos são usados ​​para renderizar opções de filtro específicas. Nesse caso, apenas selecionar é definido e usa Magento/Ui/view/base/web/js/form/element/ui-select.jscomo componente Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlcomo modelo de nocaute. Olhe Magento/Ui/view/base/web/js/form/elementpara ver outras possibilidades. Somente select é definido aqui para substituir os valores padrão: Magento/Ui/view/base/web/js/form/element/select.jse Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Os valores padrão para filtros e outros nós são definidos em Magento/Ui/view/base/ui_component/etc/definition.xml.

O próximo nó é <massAction />e permite adicionar ação em massa, selecionar à grade

<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>

nameargumento deve ser único. O primeiro nó filho <argument />define dados básicos. providersegue a mesma estrutura que outros nós e refere-se às colunas nome do nó e sua coluna de IDs. Esta coluna conterá caixas de seleção com itens selecionados para a ação em massa a ser processada. componentdefine qual arquivo é usado para renderizar e manipular a ação em massa. O valor padrão é Magento_Ui/js/grid/massactions(aponta para Magento/Ui/view/base/web/js/grid/massactions.js). Você pode usar Magento_Ui/js/grid/tree-massactionspara adicionar estrutura em árvore. No caso acima, eu o uso para adicionar a ação "Alterar status", que mostra as opções "ativar" e "desativar". Após o <argument />nó, você pode adicionar quantos <action />nós quantas ações desejar. Cada <action />nó segue um esquema semelhante. No primeiro caso (ação de exclusão), o nó requer um nome exclusivo. Em seguida, argumentcontém a configuração em quelabelé o que é visível na opção de seleção, urlponto final para enviar dados e confirmadiciona o modal de confirmação antes do envio. No caso de "Alterar status", a ação urlno primeiro argumentnó é omitida, pois os URLs são fornecidos por status, por classe definida no segundo argumentnó. A classe deve implementar a interface Zend \ Stdlib \ JsonSerializable. Verifique Magento\Customer\Ui\Component\MassAction\Group\Optionscomo referência.

Finalmente, no <container />nó, temos o <paging />nó que define a paginação.

<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>

Estrutura para providere selectProviderdeve ficar clara agora.

E o último nó da grade básica é <columns />. Ele contém todas as definições de colunas disponíveis para uso pelo administrador. O nó é definido como

<columns name="listing_columns"> ... </columns>

e o atributo name é usado em outros nós quando se refere a ele. O primeiro filho é

<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>

O que fiz aqui foi fornecer apenas os providervalores corretos seguindo o esquema usado na listagem. fieldActionO nó permite definir a ação que é acionada quando clicada na célula. As configurações padrão chamam a ação de edição

Proximo é <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>

Este nó define a coluna com caixas de seleção para ação em massa a ser usada. Seus nomes são referidos após o ponto em vários nós descritos acima.

Depois disso, você pode adicionar qualquer número de colunas no mesmo formato:

<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>

Nem todos os nós dos itens internos são necessários. Eles estão definindo:

filter- tipo de filtro da coluna. Isso é usado no bloco de filtros. Os valores disponíveis são: texto, seleção, dateRange. Se a seleção for usada <item name="options">...</item>, será usada como uma classe que fornece opções para a seleção de filtro.

component- define os arquivos js que são usados ​​para renderizar a coluna. As opções disponíveis são em Magento/Ui/view/base/web/js/grid/columns/*. selecionar é fornecido, o filtro está definido para selecionar. Para filtro de texto, esse valor não é necessário.

dataType- fornece informações do tipo de dados usado para o valor da coluna. Para select use select também, for dateRange use date bodyTmpl- define o arquivo html usado pelo knockout para renderizar a célula. Por padrão, interface do usuário / grade / células / texto é usado ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Outras opções estão localizadas no Magento/Ui/view/base/web/templates/grid/cells/*diretório ui/grid/cells/htmlpermite usar o conteúdo html na célula.

label - isso será exibido no cabeçalho da coluna e no bloco de filtro

sortOrder - encomenda

visible- exibir ou não a coluna. Isso pode ser usado para definir colunas para marcadores, mas não as mostra por padrão.

No final, você pode adicionar uma coluna de ações, que pode ser usada para o item único

<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>

indexFieldrefere-se ao nome da coluna no banco de dados. A classe Actions deve estender Magento\Ui\Component\Listing\Columns\Columne definir o prepareDataSourcemétodo. Veja Magento/Cms/Ui/Component/Listing/Column/PageActions.phpcomo referência

3) para finalizar a grade, precisamos definir alguns elementos em Company / Module / etc / di.xml

Primeiro, definimos a classe do provedor que foi usada no nó 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>

collectionresolve para a classe de coleção padrão e filerPooldefine novo elemento:

<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>

Evidentemente, isso tem a ver com filtragem e pesquisa. Por enquanto, eu sempre usei os valores padrão.

Agora registramos nossa fonte de dados:

<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>

Nesse caso, o nome do nó deve corresponder ao usado no <dataSource />nó na listagem de xml e resolve não a coleção, mas a classe GridCollection. Ele deve estender a classe de coleção regular e implementar adicionalmente Magento\Framework\Api\Search\SearchResultInterface.

No final, configuramos nossa coleção de grades (os nomes dos argumentos são bastante óbvios)

<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
fonte
1
você conseguiu chance de olhar no meu fio
Bojjaiah
13
Isso ainda supera os documentos por um longo caminho, tanto quanto eu posso ver.
Aaron Pollock
2) uiComponent é definido em Company / Module / view / adminhtml / ui_component / Listing_name.xml. Então, basicamente, o componente da grade não funciona no frontend?
Lachezar Raychev 30/10
post antigo que eu conheço - mas, eu vim para isso, segui-o (obrigado, aliás, definitivamente uma das explicações mais detalhadas sobre isso), mas recebo um erro não detectado em relação à collectionFactory. especificamente a função argumentosResolver. Ele diz que o argumento 2 deve ser uma matriz, mas é dado nulo - eu fiz tudo o que foi mencionado acima -, mas há mais alguma coisa que eu deveria ter feito? :)
treyBake
1
@AshishViradiya os links atualizados estão acima, na seção [EDIT 3 Out 2018]
Zefiryn
9

Para a grade, precisamos de dois arquivos principais: um é ui_component xml e o segundo é di.xml

Espero que você saiba no arquivo xml de layout que você precisa adicionar a tag uiComponent, ou seja - 

<?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>

agora você precisa criar uma test_lists_listing.xmlpasta na ui_component.

Por exemplo, app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

Este arquivo tem um número de tags

  1. <argument name="data" xsi:type="array"> : - preciso mencionar arugemnt como botão js etc.

  2. <dataSource name="test_lists_listing_data_source">: - este bloco é usado para fornecer dados para grades neste argumento <argument name="class" xsi:type="string">ListsGridDataProvider</argument>que é necessário mencionar di.xml(explicado na parte di.xml )

  3. <container name="listing_top"> : - neste bloco, mencionamos filtros, exportação, indicadores (que salvam dados na tabela ui_bookmark), compactação, paginação e texto completo (para fazer pesquisa de texto completo na configuração ou tabela nessa coluna que deve ser índice de texto completo)

  4. <columns name="test_lists_columns"> : - nisso precisamos mencionar todas as colunas

O último está em 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>
  1. TestGirdFilterPool: - mencionar filtros
  2. ListsGridDataProvider: - que mencionei no ui xml para provedor de dados
  3. CollectionFactory: - é necessário mencionar a coleção
  4. Grade / Coleção: - neste aspecto, precisamos passar todos os parâmetros, como nome da tabela, coleção etc.

app \ code \ Sugarcode \ Test \ view \ 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>
Pradeep Kumar
fonte
sortOrder não está funcionando para selectionsColumn. Não por que está chegando finalmente
Bhupendra Jadeja
6

O suplemento da resposta principal

A resposta superior é ótima, eu sigo para criar uma página de listagem. Mas, tem um problema :

Quando você aplica o filtro e, em seguida, removendo o filtro, o mesmo conteúdo de linha será repetido em toda a grade da página .

Solução

No <dataSource />nó, abaixo <item name="update_url" xsi:type="url" path="mui/index/render"/>, adicione o conteúdo:

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

entity_id é a chave principal da coleção de listagens.

Key Shang
fonte
4

Achei a resposta do @ Zefiryn muito útil e uma ótima maneira de começar sem ler a documentação completa do Magento.

Dito isto, não consegui que as coisas funcionassem bem após essas respostas. Além disso, depois que uma página de listagem estiver funcionando, você desejará imediatamente o restante de uma interface CRUD.

Encontrei um módulo de amostra no github . Começando com este encadeamento para orientação, em seguida, portar / invadir código do plug-in de amostra acabou sendo a maneira mais rápida de obter uma interface CRUD em uma tabela personalizada.

troca rápida
fonte