[EDIT 3 octobre 2018]
Mise à jour des liens vers devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html et https://devdocs.magento.com/guides/v2. 0 / ui-components / 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
[EDIT 21 janvier 2016]
Depuis le 20/01/2016, magento2 devdocs a été mis à jour avec une documentation étendue sur les composants de l'interface utilisateur. Je ne l'ai pas vérifié de manière approfondie, mais ils peuvent contenir plus d'informations que la réponse que j'ai donnée il y a quelques jours. Dans l'intérêt de votre temps, vous souhaiterez peut-être consulter http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-secondary.html
[/MODIFIER]
Je travaille avec Magento2 depuis plus d’un mois et c’est ce que j’ai remarqué à propos de la nouvelle façon de créer des grilles.
Composant de grille de l'interface utilisateur Magento 2
1) Le fichier de mise en page à l'intérieur Company/Module/view/adminhtml/layout/module_controller_action.xmldéfinit la grille comme étant uiComponent avec:
<?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 est défini dans le Company/Module/view/adminhtml/ui_component/listing_name.xmlfichier. Le nom du fichier doit être identique au nom uiComponent utilisé dans le fichier de mise en page. La structure du fichier peut sembler assez complexe à première vue mais, comme toujours, il s’agit de nœuds répétitifs. Pour faire simple, on le tranche. Le noeud principal du fichier de composant est <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Il est corrigé et je pense qu'il nécessite un attribut d'emplacement d'espace de nom. Il y a typiquement 4 nœuds à l' intérieur de <listing />noeud: <argument />, <dataSource />, <container />et <columns />. Il ne s’agit toutefois pas d’une configuration stricte, car le <argument />nœud peut être dupliqué pour fournir davantage de configuration ou <container />comme dans la liste de pages cms qui ajoute un conteneur "collant" pour une raison quelconque.
Le premier noeud est <argument />. Ce nœud définit les données pour le composant. Habituellement, vous devez fournir quelque chose comme ceci:
<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 />noeud requiert un attribut name. Dans ce cas, datadéfinit les informations de base sur le composant. Il contient plusieurs <item />nœuds pour chaque partie spécifique de la configuration. js_configindique au composant où se trouvent le fournisseur des données et des dépendances dans la configuration de liste XML (qui, à mon avis, est convertie en hachage javascript). providervaleur consiste en un nom de liste utilisé dans le fichier de présentation et un nom de source de données unique qui sera utilisé ultérieurement. Dans ces listes, j'ai vérifié dans magento provideret depssont les mêmes. Je ne suis pas sûr de savoir à quoi sert d'avoir cela. spinnerprend le nom du nœud où les colonnes de la grille sont définies. buttonspermet d'ajouter des boutons en haut de la grille. Dans la plupart des cas, ce serait juste un Add newbouton. Les boutons ont peu d'éléments:nameCe labelque le bouton dit, utilisé comme id d'élément , classest la classe de boutons et urlle lien vers lequel il pointe. Asteriks est remplacé par la partie de l'URL actuelle. D' autres possibles <item />noeuds pour bouton sont: id, title, type(remise à zéro, soumettre ou bouton), onclick( au lieu de url, il a priorité), style, value, disabled. L'élément Button est rendu par la Magento\Ui\Component\Control\Buttonclasse.
Ensuite nous avons le <dataSource />noeud:
<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>
nameutilisé dans le <dataSource />noeud doit correspondre à celui utilisé dans argument/js_config/provideret argument/js_config/deps. Le noeud suivant définit quelle classe est responsable de la préparation des données pour la grille. classl'argument nécessite un nom unique qui sera mis en correspondance dans di.xml. primaryFieldNameconcerne la colonne primaire de la base de données et requestFieldNamela variable dans les requêtes http. Ils peuvent être égaux , mais ne doivent pas, l' inscription de la page CMS utilise page_idcomme primaryFieldNameet idque requestFieldName. update_urlfait référence au point d'entrée où les appels ajax pour le filtrage et le tri sont envoyés. Le deuxième argument de <dataSource />référence fait référence au fichier javascript qui gère la partie js de l’envoi et du traitement des appels ajax pour la grille. Le fichier par défaut est Magento/Ui/view/base/web/js/grid/provider.js.
Un autre noeud est <container />.
<container name="listing_top"> ... </container>
Comme il contient beaucoup de données, permettez-moi de le diviser également. Ses enfants sont les parties de la page entière. Premier enfant <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>
Il définit le modèle de masquage responsable de la mise en page, de toutes les actions et, par défaut, pointe vers Magento/Ui/view/base/web/templates/grid/toolbar.html
Le noeud suivant est (ou peut être) <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>
Ce nœud ajoute une fonctionnalité de signet à la grille. Il permet à l’administrateur de configurer différents "profils" de la grille qui affiche différentes colonnes. Grâce à cela, vous pouvez ajouter toutes les colonnes de la table à la grille et laisser l’utilisateur choisir les informations qui le concernent. namespacedoit correspondre au nom utilisé dans le fichier de mise en page.
Un autre noeud est <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>
Nous avons 3 valeurs à configurer ici. La première est celle providerqui suit le modèle [nom_répertoire_from_layout]. [Nom_liste_from_layout]. [Nom_noeud_nomne_colonnes] (comme dans la liste de noeuds / argument / spinner). componentfait référence au fichier js qui affiche la grille et, par défaut, les points sur Magento/Ui/view/base/web/js/grid/controls/columns.jslesquels utilise le modèle Magento/Ui/view/base/web/templates/grid/controls/columns.html. Le dernier élément est celui displayAreaqui définit où les contrôles de colonne doivent être affichés. Il fait référence à getRegion('dataGridActions')dans le fichier défini dans container/argument/config/template(par défaut:) Magento/Ui/view/base/web/templates/grid/toolbar.html.
Le noeud suivant est <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>
Ce nœud ajoute une recherche en texte intégral dans la page. Il se trouve au-dessus de la grille sous la forme d'un champ de saisie de texte avec "Recherche par mot-clé" comme espace réservé. Je ne suis pas sûr des options possibles ici, car je n’ai pas trop joué avec cela, mais listing_filters_chips fait référence à Magento/Ui/view/base/web/js/grid/filters/chips.jsfile.
Le noeud suivant est <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>
Ce nœud définit la configuration du filtrage des colonnes qui est visible après avoir cliqué sur le bouton "Filtres" en haut à droite au-dessus de la grille. columnsProvidersuit une structure similaire à celle des nœuds précédents, donc [listing_nom_from_layout]. [nom_langage_from_layout]. [nom_colonne_numeur]. storegeConfigva comme [nom_liste_from_layout]. [nom_liste_frame_layout]. [nom_noeud_conteneur] [nom_noeud_de_signet]. Dans le templatesnœud de l'élément, vous pouvez définir les fichiers utilisés pour rendre des options de filtre spécifiques. Dans ce cas , ne sélectionnez est défini et utilise Magento/Ui/view/base/web/js/form/element/ui-select.jscomme componentet Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlcomme modèle de knock - out. Regardez dans Magento/Ui/view/base/web/js/form/elementpour voir d'autres possibilités. Seule la sélection est définie ici pour remplacer les valeurs par défaut: Magento/Ui/view/base/web/js/form/element/select.jset Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Les valeurs par défaut des filtres et des autres nœuds sont définies dans Magento/Ui/view/base/ui_component/etc/definition.xml.
Le noeud suivant est <massAction />et permet d’ajouter une action en masse select to the grid
<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>
namel'argument devrait être unique. Le premier noeud enfant <argument />définit les données de base. providersuit la même structure que les autres nœuds et fait référence aux colonnes nom de nœud et à sa colonne ids. Cette colonne contiendra les cases à cocher avec les éléments sélectionnés pour l'action en masse à traiter. componentdéfinit quel fichier est utilisé pour rendre et gérer l'action de masse. La valeur par défaut est Magento_Ui/js/grid/massactions(pointe sur Magento/Ui/view/base/web/js/grid/massactions.js). Vous pouvez utiliser Magento_Ui/js/grid/tree-massactionspour ajouter une structure semblable à un arbre. Dans le cas ci-dessus, je l'utilise pour ajouter l'action "Change status" qui indique les options "enable" et "disable". Après <argument />nœud, vous pouvez ajouter autant de <action />nœuds que d’actions à effectuer. Chaque <action />nœud suit un schéma similaire. Dans le premier cas (action de suppression), le noeud requiert un nom unique. Puis argumentcontient la configuration oùlabelest ce qui est visible dans l'option de sélection, le urlpoint de terminaison pour envoyer des données et confirmajoute une confirmation modale avant l'envoi. Dans le cas du "changement d'état", l'action urlsur le premier argumentnœud est omise car les URL sont fournies par état par classe définie dans le deuxième argumentnœud. La classe doit implémenter l'interface Zend \ Stdlib \ JsonSerializable. Vérifiez Magento\Customer\Ui\Component\MassAction\Group\Optionscomme une référence.
Enfin, dans le <container />nœud, nous avons un <paging />nœud qui définit la pagination.
<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>
Structure pour provideret selectProviderdevrait être clair maintenant.
Et le dernier noeud pour la grille de base est <columns />. Il contient toutes les définitions de colonnes pouvant être utilisées par l'administrateur. Le nœud est défini comme
<columns name="listing_columns"> ... </columns>
et l'attribut name est utilisé dans les autres nœuds lorsqu'il s'y réfère. Le premier enfant est
<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>
Ce que j'ai fait ici n'était que de fournir des providervaleurs correctes en suivant le schéma utilisé dans la liste. fieldActionnoeud permet de définir une action déclenchée lorsque vous cliquez sur la cellule. Les paramètres par défaut appellent l'action de modification
Suivant est <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>
Ce nœud définit la colonne avec les cases à cocher pour les actions en masse à utiliser. Ses noms sont mentionnés après le point dans plusieurs nœuds décrits ci-dessus.
Après cela, vous pouvez ajouter un nombre quelconque de colonnes dans le même format:
<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>
Tous les nœuds de la plupart des éléments internes ne sont pas nécessaires. Ils définissent:
filter- type de filtre de la colonne. Ceci est utilisé dans le bloc de filtres. Les valeurs disponibles sont: text, select, dateRange. Si select est utilisé <item name="options">...</item>sera utilisé en tant que classe fournissant des options pour le filtre select
component- définit les fichiers js utilisés pour rendre la colonne. Les options disponibles sont dans Magento/Ui/view/base/web/js/grid/columns/*. select est fourni si le filtre est configuré pour select. Pour le filtre de texte, cette valeur n'est pas requise.
dataType- fournit des informations sur le type de données utilisé pour la valeur de la colonne. Pour select use, select aussi, pour dateRange, utilisation date
bodyTmpl- définit le fichier HTML utilisé par Knockout pour le rendu de la cellule. Par défaut, ui / grid / cells / text est utilisé ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Les autres options sont situées dans le Magento/Ui/view/base/web/templates/grid/cells/*répertoire. ui/grid/cells/htmlpermet d'utiliser le contenu HTML dans la cellule.
label - ceci sera affiché dans l'en-tête de colonne et le bloc de filtrage
sortOrder - commande
visible- afficher ou non la colonne. Cela peut être utilisé pour définir des colonnes pour les signets mais ne les affiche pas par défaut.
A la fin, vous pouvez ajouter des actions à la colonne actions à effectuer pour un seul élément.
<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>
indexFieldfait référence au nom de la colonne dans la base de données. La classe Actions devrait s'étendre Magento\Ui\Component\Listing\Columns\Columnet définir une prepareDataSourceméthode. Voir Magento/Cms/Ui/Component/Listing/Column/PageActions.phpcomme référence
3) pour terminer la grille, nous devons définir certains éléments dans Company / Module / etc / di.xml
Nous définissons d’abord la classe de fournisseur utilisée dans le noeud 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>
collectionrésout en classe de collection standard et filerPooldéfinit un nouvel élément:
<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>
Cela doit évidemment faire quelque chose avec le filtrage et la recherche. Pour l'instant j'ai toujours utilisé les valeurs par défaut.
Maintenant, nous enregistrons notre source de données:
<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>
Dans ce cas, le nom du nœud doit correspondre à celui utilisé dans le <dataSource />nœud de la liste xml et il ne résout pas la collecte mais la classe GridCollection. Il devrait étendre la classe de collection régulière et l'implémenter en plus Magento\Framework\Api\Search\SearchResultInterface.
A la fin, nous configurons notre collection de grille (les noms d'arguments sont plutôt évidents)
<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>