[EDIT 3 ott 2018]
Aggiornamento per collegamenti a 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-componenti / 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
[MODIFICA 21 gennaio 2016]
A partire dal 20/01/2016 magento2 devdocs è stato aggiornato con una documentazione estesa dei componenti dell'interfaccia utente. Non l'ho controllato ampiamente ma potrebbero contenere più informazioni della risposta che ho dato pochi giorni fa, quindi nell'interesse del tuo tempo potresti voler vedere http://devdocs.magento.com/guides/v2.0/ui -library / ui-library-secondary.html
[/MODIFICARE]
Lavoro con Magento2 da oltre un mese e questo è ciò che ho notato sul nuovo modo di creare griglie.
Componente della griglia dell'interfaccia utente di Magento 2
1) il file di layout all'interno Company/Module/view/adminhtml/layout/module_controller_action.xmldefinisce la griglia come uiComponent con:
<?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 è definito nel Company/Module/view/adminhtml/ui_component/listing_name.xmlfile. Il nome del file deve essere uguale al nome uiComponent utilizzato nel file di layout. La struttura del file può sembrare piuttosto complessa a prima vista ma, come sempre, si tratta di nodi ripetitivi. Per renderlo semplice, taglialo. Il nodo principale del file componente è <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. È stato risolto e credo che richieda l'attributo location namespace. Poi ci sono tipicamente 4 nodi all'interno <listing />del nodo: <argument />, <dataSource />, <container />e <columns />. Questa non è tuttavia una configurazione rigorosa in quanto il <argument />nodo potrebbe essere duplicato per fornire una maggiore configurazione o <container />come nell'elenco delle pagine cms che aggiunge un contenitore "appiccicoso" per qualche motivo.
Il primo nodo è <argument />. Questo nodo definisce i dati per il componente. Di solito è necessario fornire qualcosa del genere:
<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 />il nodo richiede l'attributo name. In questo caso datadefinisce le informazioni di base sul componente. Contiene più <item />nodi per ciascuna parte specifica della configurazione. js_configindica al componente dove sono i fornitori dei dati e delle dipendenze nella configurazione xml dell'elenco (che penso sia convertito in hash javascript). provideril valore è costituito dal nome dell'elenco utilizzato nel file di layout e dal nome dell'origine dati uniqure che verrà utilizzato in seguito. In quegli elenchi ho controllato magento providere depssono gli stessi. Non sono sicuro a che cosa serve avere questo diverso. spinnerprende il nome del nodo in cui sono definite le colonne della griglia. buttonsconsente di aggiungere pulsanti nella parte superiore della griglia. Nella maggior parte dei casi sarebbe solo un Add newpulsante. I pulsanti hanno pochi elementi:nameutilizzato come id elemento, labelè ciò che dice il pulsante, classè la classe del pulsante ed urlè il collegamento a cui punta. Asteriks è sostituito dalla parte dell'URL corrente. Altri possibili <item />nodi per il tasto sono: id, title, type(reset, presentare o il pulsante), onclick(invece di url, esso ha la precedenza), style, value, disabled. L'elemento Button è reso per Magento\Ui\Component\Control\Buttonclasse.
Successivamente abbiamo <dataSource />nodo:
<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>
nameutilizzato nel <dataSource />nodo deve corrispondere a quello utilizzato in argument/js_config/providere argument/js_config/deps. Il nodo successivo definisce quale classe è responsabile della preparazione dei dati per la griglia. classl'argomento richiede un nome univoco a cui corrisponderà di.xml. primaryFieldNamesi riferisce alla colonna primaria del database e requestFieldNamealla variabile nelle richieste http. Possono essere uguali ma non è necessario, l'elenco delle pagine CMS utilizza page_idcome primaryFieldNamee idcome requestFieldName. update_urlsi riferisce al punto di ingresso a cui vengono inviate le chiamate ajax per il filtraggio e l'ordinamento. Il secondo argomento in si <dataSource />riferisce al file javascript che gestisce js parte dell'invio e dell'elaborazione delle chiamate ajax per la griglia. Il file predefinito è Magento/Ui/view/base/web/js/grid/provider.js.
Un altro nodo è <container />.
<container name="listing_top"> ... </container>
Dato che contiene molti dati, consentitemi di dividerlo. I suoi figli sono le parti dell'intera pagina. Primo figlio <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>
Definisce il modello knockout responsabile della gestione del layout e di tutte le azioni e di default punta a Magento/Ui/view/base/web/templates/grid/toolbar.html
Il nodo successivo è (o può essere) <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>
Questo nodo aggiunge la funzione segnalibro alla griglia. Consente all'amministratore di impostare diversi "profili" della griglia che visualizza colonne diverse. Grazie a ciò è possibile aggiungere tutte le colonne dalla tabella alla griglia e consentire all'utente di decidere quali informazioni sono rilevanti per lui. namespacedeve corrispondere al nome utilizzato nel file di layout.
Un altro nodo è <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>
Abbiamo 3 valori da configurare qui. Il primo è quello providerche segue il modello [lista_nome_from_layout]. [Lista_nome_from_layout]. [Lista_colonna_nome_studio] (come nella lista nodo / argomento / spinner). componentsi riferisce al file js che visualizza la griglia e per impostazione predefinita punti a Magento/Ui/view/base/web/js/grid/controls/columns.jscui utilizza il modello Magento/Ui/view/base/web/templates/grid/controls/columns.html. L'ultimo elemento è displayAreache definisce dove devono essere visualizzati i controlli di colonna. Fa riferimento al getRegion('dataGridActions')file definito in container/argument/config/template(default:) Magento/Ui/view/base/web/templates/grid/toolbar.html.
Il nodo successivo è <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>
Questo nodo aggiunge la ricerca di testo completo nella pagina. Si trova sopra la griglia come campo di input di testo singolo con "Cerca per parola chiave" come segnaposto. Non sono sicuro di quali opzioni siano possibili qui perché non ho giocato così tanto, ma list_filters_chips si riferisce al Magento/Ui/view/base/web/js/grid/filters/chips.jsfile.
Il nodo successivo è <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>
Questo nodo definisce la configurazione per il filtro delle colonne che è visibile dopo aver fatto clic sul pulsante "Filtri" in alto a destra sopra la griglia. columnsProvidersegue una struttura simile ai nodi precedenti, quindi [lista_nome_from_layout]. [lista_nome_from_layout]. [lista_colonna_nome_di_studio]. storegeConfigva come [listing_name_from_layout]. [listing_name_from_layout]. [container_node_name] [bookmark_node_name]. Nel templatesnodo elemento è possibile definire quali file vengono utilizzati per eseguire il rendering di opzioni di filtro specifiche. In questo caso, solo la selezione è definita e utilizza Magento/Ui/view/base/web/js/form/element/ui-select.jscome componente Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlcome modello knockout. Guarda Magento/Ui/view/base/web/js/form/elementper vedere altre possibilità. Qui è selezionato solo Seleziona per ignorare i valori predefiniti: Magento/Ui/view/base/web/js/form/element/select.jse Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. I valori predefiniti per i filtri e altri nodi sono definiti in Magento/Ui/view/base/ui_component/etc/definition.xml.
Il nodo successivo è <massAction />e consente di aggiungere un'azione di massa selezionare alla griglia
<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'argomento dovrebbe essere unico. Il primo nodo figlio <argument />definisce i dati di base. providersegue la stessa struttura di altri nodi e fa riferimento al nome del nodo delle colonne e alla colonna dei suoi ID. Questa colonna conterrà le caselle di controllo con gli elementi selezionati per l'elaborazione dell'azione di massa. componentdefinisce quale file viene utilizzato per eseguire il rendering e gestire l'azione di massa. Il valore predefinito è Magento_Ui/js/grid/massactions(punta a Magento/Ui/view/base/web/js/grid/massactions.js). È possibile utilizzare Magento_Ui/js/grid/tree-massactionsper aggiungere struttura ad albero. Nel caso sopra lo uso per aggiungere l'azione "Cambia stato" che mostra le opzioni "abilita" e "disabilita". Dopo il <argument />nodo puoi aggiungere tanti <action />nodi quante azioni desideri. Ogni <action />nodo segue uno schema simile. Nel primo caso (elimina azione) il nodo richiede un nome univoco. Quindi argumentcontiene la configurazione dovelabelè ciò che è visibile nell'opzione select, urlendpoint per l'invio dei dati e confirmaggiunge la conferma modale prima dell'invio. In caso di "Modifica stato", l'azione urlnel primo argumentnodo è attivata poiché gli URL sono forniti per stato dalla classe definita nel secondo argumentnodo. La classe dovrebbe implementare l'interfaccia Zend \ Stdlib \ JsonSerializable. Controlla Magento\Customer\Ui\Component\MassAction\Group\Optionscome riferimento.
Finalmente nel <container />nodo abbiamo il <paging />nodo che definisce l'impaginazione.
<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>
La struttura per providere selectProviderdovrebbe essere chiara ora.
E l'ultimo nodo per la griglia di base è <columns />. Contiene tutte le definizioni di colonne che possono essere utilizzate dall'amministratore. Il nodo è definito come
<columns name="listing_columns"> ... </columns>
e l'attributo name viene usato in altri nodi quando si riferisce ad esso. Il primo figlio è
<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>
Quello che ho fatto qui è stato fornire solo i providervalori corretti seguendo lo schema utilizzato nella lista. fieldActionIl nodo consente di definire l'azione che viene attivata quando si fa clic sulla cella. Le impostazioni predefinite richiamano l'azione di modifica
Il prossimo è <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>
Questo nodo definisce la colonna con le caselle di controllo per l'azione di massa da utilizzare. Si chiama dopo il punto in diversi nodi sopra descritti.
Successivamente puoi aggiungere qualsiasi numero di colonne nello stesso 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>
Non tutti i nodi della maggior parte degli oggetti interni sono necessari. Stanno definendo:
filter- tipo di filtro della colonna. Questo è usato nel blocco filtri. I valori disponibili sono: text, select, dateRange. Se viene utilizzato select <item name="options">...</item>verrà utilizzato come una classe che fornisce opzioni per la selezione del filtro
component- definisce i file js utilizzati per il rendering della colonna. Le opzioni disponibili sono in Magento/Ui/view/base/web/js/grid/columns/*. select è fornito è il filtro è impostato per selezionare. Per il filtro di testo questo valore non è richiesto.
dataType- fornisce informazioni sul tipo di dati utilizzato per il valore della colonna. Per selezionare usa anche seleziona, per data Utilizza intervallo data
bodyTmpl: definisce il file html utilizzato da knockout per il rendering della cella. Per impostazione predefinita, viene utilizzato ui / grid / cells / text ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Altre opzioni si trovano nella Magento/Ui/view/base/web/templates/grid/cells/*directory. ui/grid/cells/htmlconsente di utilizzare il contenuto html nella cella.
label - questo verrà visualizzato nell'intestazione della colonna e nel blocco filtro
sortOrder - ordinazione
visible- visualizza o meno la colonna. Questo può essere usato per definire colonne per i segnalibri ma non mostrarle per impostazione predefinita.
Alla fine puoi aggiungere la colonna delle azioni sulle azioni delle streghe disponibili per il singolo oggetto
<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>
indexFieldsi riferisce al nome della colonna nel database. La classe Actions dovrebbe estendere Magento\Ui\Component\Listing\Columns\Columne definire il prepareDataSourcemetodo. Vedi Magento/Cms/Ui/Component/Listing/Column/PageActions.phpcome riferimento
3) per completare la griglia è necessario definire alcuni elementi in Company / Module / etc / di.xml
Per prima cosa definiamo la classe del provider che è stata utilizzata nel nodo 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>
collectionsi risolve nella classe di raccolta standard e filerPooldefinisce un nuovo 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>
Questo evidentemente ha a che fare con il filtraggio e la ricerca. Per ora ho sempre usato i valori predefiniti.
Ora registriamo la nostra fonte di dati:
<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>
In questo caso il nome del nodo deve corrispondere a quello usato nel <dataSource />nodo nella lista xml e si risolve non nella raccolta ma nella classe GridCollection. Dovrebbe estendere la classe di raccolta regolare e implementare ulteriormente Magento\Framework\Api\Search\SearchResultInterface.
Alla fine configuriamo la nostra raccolta di griglie (i nomi degli argomenti sono piuttosto ovvi)
<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>