Erklärung des UI Component Grid in Magento 2


91

Gibt es eine gute Erklärung und / oder ein Beispiel für die Mindestkonfiguration, die zum Erstellen eines UI-Komponentenrasters in Magento 2 erforderlich ist?

Ich weiß, dass es unzählige Kernkomponenten gibt, wie z

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

Diese XML-Dateien sind jedoch umfangreich, und es gibt nur wenige Erklärungen, was die einzelnen Knoten tun und wie Sie damit ein Raster von Grund auf neu erstellen.

Es gibt auch dieses Beispielmodul , aber es

  1. Scheint ein Formular zu sein
  2. Fehlt jeglicher Kontext / Erklärung, was jeder Knoten tut

Ich suche nach Informationen zum Einstieg, mit denen ich ein Raster für meine eigene CRUD-Modellsammlung erstellen kann.


6
Keine vollständige Antwort wert - aber meine UI-Komponentenserie ist ein guter Anfang: alanstorm.com/category/magento-2/#magento-2-ui
Alan Storm

Antworten:


166

[BEARBEITEN 3. Oktober 2018]

Update für Links zu devdocs: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html und 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

[BEARBEITEN 21. Januar 2016]

Ab dem 20.01.2016 wurde magento2 devdocs mit einer erweiterten Dokumentation der UI-Komponenten aktualisiert. Ich habe es nicht ausgiebig überprüft, aber sie enthalten möglicherweise mehr Informationen als die Antwort, die ich vor ein paar Tagen gegeben habe. Im Interesse Ihrer Zeit möchten Sie möglicherweise http://devdocs.magento.com/guides/v2.0/ui anzeigen -library / ui-library-secondary.html

[/BEARBEITEN]

Ich arbeite jetzt seit über einem Monat mit Magento2 und dies ist mir bei der neuen Art der Erstellung von Gittern aufgefallen.

Magento 2 UI Grid Komponente

1) Layoutdatei im Company/Module/view/adminhtml/layout/module_controller_action.xmlGitter als uiComponent definieren mit:

<?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 ist in Company/Module/view/adminhtml/ui_component/listing_name.xmlfile definiert . Der Dateiname muss mit dem in der Layoutdatei verwendeten uiComponent-Namen identisch sein. Die Struktur der Datei mag auf den ersten Blick ziemlich komplex erscheinen, aber wie immer sind dies einige sich wiederholende Knoten. Um es einfach zu machen, schneiden wir es. Hauptknoten der Komponentendatei ist <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Es ist behoben und ich glaube, es erfordert Namespace-Standortattribut. Als nächstes gibt es typischerweise 4 Knoten innerhalb <listing />Knoten: <argument />, <dataSource />, <container />und <columns />. Dies ist jedoch keine strenge <argument />Konfiguration, da der Knoten möglicherweise dupliziert wird, um mehr Konfiguration bereitzustellen, oder <container />wie in der CMS-Seitenauflistung, die aus irgendeinem Grund einen "klebrigen" Container hinzufügt.

Der erste Knoten ist <argument />. Dieser Knoten definiert Daten für die Komponente. Normalerweise müssen Sie Folgendes bereitstellen:

<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 />Knoten erfordert Attribut name. In diesem Fall werden datagrundlegende Informationen zur Komponente definiert. Es enthält mehrere <item />Knoten für jeden spezifischen Teil der Konfiguration. js_configteilt der Komponente mit, wo sich die Anbieter der Daten und Abhängigkeiten in der Listing-XML-Konfiguration befinden (die meiner Meinung nach in Javascript-Hash umgewandelt wurde). providerDer Wert besteht aus dem in der Layoutdatei verwendeten Listennamen und dem Namen der eindeutigen Datenquelle, der später verwendet wird. In diesen Auflistungen habe ich in Magento eingecheckt providerund depssind die gleichen. Ich bin mir nicht sicher, was es nützt, dies anders zu haben. spinnerNimmt den Namen des Knotens, in dem die Spalten des Rasters definiert sind. buttonsErmöglicht das Hinzufügen von Schaltflächen am oberen Rand des Rasters. In den meisten Fällen wäre es nur ein Add newKnopf. Schaltflächen haben einige Elemente:nameWird als Element-ID verwendet, labelist das , was der Button sagt, classdie Button-Klasse und urlder Link, auf den er verweist. Asteriks wird durch den Teil der aktuellen URL ersetzt. Andere mögliche <item />Knoten für Taste sind: id, title, type(Reset, senden oder Taste), onclick(anstatt url, es hat Vorrang), style, value, disabled. Das Schaltflächenelement wird von der Magento\Ui\Component\Control\ButtonKlasse gerendert .

Als nächstes haben wir <dataSource />Knoten:

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

nameDer in <dataSource />node verwendete muss mit dem in argument/js_config/providerund verwendeten übereinstimmen argument/js_config/deps. Der nächste Knoten definiert, welche Klasse für die Vorbereitung der Daten für das Raster verantwortlich ist. classFür das Argument ist ein eindeutiger Name erforderlich, mit dem abgeglichen wird di.xml. primaryFieldNamebezieht sich auf die primäre Datenbankspalte und requestFieldNameauf die Variable in http-Anforderungen. Sie können gleich sein, müssen es aber nicht, CMS-Seitenauflistung verwendet page_idas primaryFieldNameund idas requestFieldName. update_urlbezieht sich auf den Einstiegspunkt, an dem Ajax-Aufrufe zum Filtern und Sortieren gesendet werden. Das zweite Argument in <dataSource />bezieht sich auf eine Javascript-Datei, die den Teil des Sendens und Verarbeitens von Ajax-Aufrufen für das Grid behandelt. Die Standarddatei ist Magento/Ui/view/base/web/js/grid/provider.js.

Ein weiterer Knoten ist <container />.

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

Da es viele Daten enthält, lassen Sie es mich auch teilen. Seine Kinder sind die Teile der gesamten Seite. Erstes Kind <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>

Es definiert die Aussparungsvorlage, die für die Bearbeitung des Layouts und aller Aktionen verantwortlich ist, und verweist standardmäßig auf Magento/Ui/view/base/web/templates/grid/toolbar.html

Nächster Knoten ist (oder kann sein) <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>

Dieser Knoten fügt dem Raster ein Lesezeichen hinzu. Der Administrator kann verschiedene "Profile" des Rasters einrichten, in denen verschiedene Spalten angezeigt werden. Dank dessen können Sie alle Spalten aus der Tabelle zum Raster hinzufügen und den Benutzer entscheiden lassen, welche Informationen für ihn relevant sind. namespacemuss mit dem in der Layoutdatei verwendeten Namen übereinstimmen.

Ein weiterer Knoten ist <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>

Hier müssen 3 Werte konfiguriert werden. Das erste providerfolgt dem Muster [Listing_Name_von_Layout]. [Listing_Name_von_Layout]. [Listing_Columns_Node_Name] (wie in Node Listing / Argument / Spinner). componentverweist auf eine js-Datei, die ein Raster anzeigt, und standardmäßig auf Punkte, für Magento/Ui/view/base/web/js/grid/controls/columns.jsdie eine Vorlage verwendet wird Magento/Ui/view/base/web/templates/grid/controls/columns.html. Das letzte Element displayAreadefiniert, wo Spaltensteuerelemente angezeigt werden müssen. Es bezieht sich auf die getRegion('dataGridActions')in definierte Datei container/argument/config/template(Standard:) Magento/Ui/view/base/web/templates/grid/toolbar.html.

Nächster Knoten ist <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>

Dieser Knoten fügt der Seite eine Volltextsuche hinzu. Es befindet sich als einzelnes Texteingabefeld über dem Raster mit "Suche nach Schlüsselwort" als Platzhalter. Ich bin mir nicht sicher, welche Optionen hier möglich sind, da ich nicht viel damit gespielt habe, aber listing_filters_chips bezieht sich auf eine Magento/Ui/view/base/web/js/grid/filters/chips.jsDatei.

Nächster Knoten ist <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>

Dieser Knoten definiert die Konfiguration für die Spaltenfilterung, die nach Klicken auf die Schaltfläche "Filter" oben rechts über dem Raster angezeigt wird. columnsProviderfolgt einer ähnlichen Struktur wie die vorherigen Knoten, also [Listing_Name_von_Layout]. [Listing_Name_von_Layout]. [Listing_Columns_Node_Name]. storegeConfiglautet wie folgt: [Auflistungsname_von_Layout]. [Auflistungsname_von_Layout]. [Container-Knotenname] [Lesezeichen-Knotenname]. Im templatesElementknoten können Sie definieren, welche Dateien zum Rendern bestimmter Filteroptionen verwendet werden. In diesem Fall ist nur select definiert und wird Magento/Ui/view/base/web/js/form/element/ui-select.jsals componentund Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlals Aussparungsvorlage verwendet. Sehen Magento/Ui/view/base/web/js/form/elementSie sich andere Möglichkeiten an. Hier wird nur select definiert, um die Standardwerte zu überschreiben: Magento/Ui/view/base/web/js/form/element/select.jsund Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Standardwerte für Filter und andere Knoten sind in definiert Magento/Ui/view/base/ui_component/etc/definition.xml.

Der nächste Knoten ist <massAction />und ermöglicht das Hinzufügen einer Massenaktion zum Raster

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

nameArgument sollte eindeutig sein. Erster Kinderknoten <argument />definiert Grunddaten. providerfolgt der gleichen Struktur wie andere Knoten und bezieht sich auf die Spalten Knotenname und ihre IDs Spalte. Diese Spalte enthält Kontrollkästchen mit ausgewählten Elementen, die für die Massenaktion verarbeitet werden sollen. componentDefiniert, welche Datei zum Rendern und Behandeln der Massenaktion verwendet wird. Der Standardwert ist Magento_Ui/js/grid/massactions(Punkte bis Magento/Ui/view/base/web/js/grid/massactions.js). Mit können Sie Magento_Ui/js/grid/tree-massactionseine baumartige Struktur hinzufügen. Im obigen Fall verwende ich es, um die Aktion "Status ändern" hinzuzufügen, die die Optionen "Aktivieren" und "Deaktivieren" anzeigt. Nach dem <argument />Knoten können Sie so viele <action />Knoten hinzufügen, wie Sie möchten. Jeder <action />Knoten folgt einem ähnlichen Schema. Im ersten Fall (Löschaktion) benötigt der Knoten einen eindeutigen Namen. Dann argumententhält Konfiguration , bei derlabelist das, was in Auswahloption sichtbar ist, urlEndpunkt zum Senden von Daten und confirmfügt Bestätigungsmodal vor dem Senden hinzu. Im Fall von "Status ändern" wird die Aktion urlim ersten argumentKnoten nicht ausgeführt, da die URLs pro Status von der im zweiten argumentKnoten definierten Klasse bereitgestellt werden. Die Klasse sollte die Schnittstelle Zend \ Stdlib \ JsonSerializable implementieren. Überprüfen Sie Magento\Customer\Ui\Component\MassAction\Group\Optionsals Referenz.

Schließlich <container />haben wir im Knoten einen <paging />Knoten, der die Paginierung definiert.

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

Struktur für providerund selectProvidersollte jetzt klar sein.

Und der letzte Knoten für das Grundraster ist <columns />. Es enthält alle Definitionen von Spalten, die dem Administrator zur Verfügung stehen. Knoten ist definiert als

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

und das Namensattribut wird in anderen Knoten verwendet, wenn darauf verwiesen wird. Erstes Kind ist

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

Was ich hier getan habe, war nur korrekte providerWerte gemäß dem in der Auflistung verwendeten Schema zu liefern . fieldActionMit node können Sie die Aktion definieren, die beim Klicken auf die Zelle ausgelöst wird. Standardeinstellungen rufen die Bearbeitungsaktion auf

Der nächste ist <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>

Dieser Knoten definiert eine Spalte mit Kontrollkästchen für die zu verwendende Massenaktion. In mehreren oben beschriebenen Knoten wird auf die Namen nach dem Punkt verwiesen.

Danach können Sie beliebig viele Spalten im gleichen Format hinzufügen:

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

Es sind nicht alle inneren Elemente des Knotens erforderlich. Sie definieren:

filter- Filtertyp der Spalte. Dies wird im Filterblock verwendet. Mögliche Werte sind: text, select, dateRange. Wenn select verwendet <item name="options">...</item>wird, wird es als Klasse verwendet, die Optionen für die Filterauswahl bereitstellt

component- definiert js-Dateien, die zum Rendern von Spalten verwendet werden. Verfügbare Optionen sind in Magento/Ui/view/base/web/js/grid/columns/*. select ist vorgesehen, wenn filter auf select eingestellt ist. Für Textfilter ist dieser Wert nicht erforderlich.

dataType- liefert Informationen über den Datentyp, der für den Spaltenwert verwendet wird. Für Auswahl verwenden Sie auch Auswahl, für Datumsbereich Datum verwenden bodyTmpl- Definiert die HTML-Datei, die von Knockout zum Rendern der Zelle verwendet wird. Standardmäßig wird ui / grid / cells / text verwendet ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Andere Optionen befinden sich im Magento/Ui/view/base/web/templates/grid/cells/*Verzeichnis. ui/grid/cells/htmlErmöglicht die Verwendung von HTML-Inhalten in Zellen.

label - Dies wird in der Spaltenüberschrift und im Filterblock angezeigt

sortOrder - Bestellung

visible- ob die Spalte angezeigt wird oder nicht. Dies kann verwendet werden, um Spalten für Lesezeichen zu definieren, diese jedoch standardmäßig nicht anzuzeigen.

Am Ende können Sie eine Spalte mit Aktionen hinzufügen, die für den einzelnen Artikel verfügbar sind

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

indexFieldverweist auf den Spaltennamen in der Datenbank. Die Actions-Klasse sollte Magento\Ui\Component\Listing\Columns\Columndie prepareDataSourceMethode erweitern und definieren . Siehe Magento/Cms/Ui/Component/Listing/Column/PageActions.phpals Referenz

3) Um das Raster fertigzustellen, müssen einige Elemente in Company / Module / etc / di.xml definiert werden

Zuerst definieren wir die Anbieterklasse, die im Knoten verwendet wurde 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>

collectionLöst sich in eine Standardauflistungsklasse auf und filerPooldefiniert ein neues Element:

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

Dies hat offensichtlich etwas mit Filtern und Suchen zu tun. Im Moment habe ich immer die Standardwerte verwendet.

Jetzt registrieren wir unsere Datenquelle:

<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 diesem Fall muss der Knotenname mit dem im <dataSource />Knoten in der XML-Auflistung verwendeten übereinstimmen und wird nicht in die Auflistung, sondern in die GridCollection-Klasse aufgelöst. Es sollte die reguläre Collection-Klasse erweitern und zusätzlich implementieren Magento\Framework\Api\Search\SearchResultInterface.

Am Ende konfigurieren wir unsere Grid Collection (Argumentnamen sind ziemlich offensichtlich)

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


13
Soweit ich sehen kann, übertrifft dies die Dokumente bei weitem.
Aaron Pollock

2) uiComponent ist in Company / Module / view / adminhtml / ui_component / listing_name.xml definiert. Grundsätzlich funktioniert die Grid-Komponente also nicht auf dem Frontend?
Lachezar Raychev

alter Beitrag, den ich kenne - aber ich bin darauf gekommen und habe ihn befolgt (danke übrigens, definitiv eine der ausführlichsten Erklärungen dazu da draußen), aber ich erhalte einen unaufgefangenen Fehler in Bezug auf die collectionFactory. speziell die argumentsResolver-Funktion. Es heißt, Argument 2 sollte ein Array sein, aber Null ist angegeben - ich habe alles oben Genannte getan - aber gibt es noch etwas, was ich hätte tun sollen? :)
treyBake

1
@AshishViradiya die aktualisierten Links sind oben, unter [3. Oktober 2018
BEARBEITEN

9

Für grid benötigen wir zwei Hauptdateien: ui_component xml und di.xml

Ich hoffe, dass Sie in der Layout-XML-Datei wissen, dass Sie das uiComponent-Tag hinzufügen müssen, dh -

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

Jetzt müssen Sie einen test_lists_listing.xmlOrdner in ui_component erstellen .

ZB app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

Diese Datei hat die Anzahl der Tags

  1. <argument name="data" xsi:type="array"> : - brauchen Erwähnung arugemnt wie Knopf js etc ..
  2. <dataSource name="test_lists_listing_data_source">: - Dieser Block wird verwendet, um Daten für Grids in einem der Argumente zu liefern, in <argument name="class" xsi:type="string">ListsGridDataProvider</argument>denen wir erwähnen müssen di.xml(erklärt im di.xml- Teil).

  3. <container name="listing_top"> : - In diesem Block erwähnen wir Filter, Export, Lesezeichen (die Daten in der Tabelle "ui_bookmark" speichern), Massaction, Paging und Volltext (für die Volltextsuche im Setup oder in der Tabelle, deren Spalte der Volltextindex sein soll).

  4. <columns name="test_lists_columns"> : - in diesem müssen wir alle Spalte erwähnen

Letzteres ist in 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: - Filter erwähnen
  2. ListsGridDataProvider: - was ich in UI XML für Datenprovider erwähnt habe
  3. CollectionFactory: - muss Sammlung erwähnen
  4. Raster / Sammlung: - In diesem Feld müssen alle Parameter wie Tabellenname, Sammlung usw. übergeben werden.

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>

sortOrder funktioniert nicht für selectionsColumn. Nicht warum es endlich kommt
Bhupendra Jadeja

6

Die Ergänzung der Top-Antwort

Die beste Antwort ist großartig. Ich folge ihr, um eine Listingseite zu erstellen. Aber es hat ein Problem :

Wenn Sie Filter anwenden und dann Filter entfernen, wird derselbe Zeileninhalt im gesamten Seitenraster wiederholt .

Lösung

Fügen Sie im <dataSource />Knoten unten <item name="update_url" xsi:type="url" path="mui/index/render"/>den Inhalt hinzu:

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

entity_id ist der Primärschlüssel für die Listing-Sammlung.


4

Ich fand die Antwort von @ Zefiryn sehr hilfreich und eine großartige Möglichkeit, um loszulegen, ohne die vollständige Dokumentation von Magento zu lesen.

Das heißt, ich habe die Dinge nach diesen Antworten nicht ganz zum Laufen gebracht. Darüber hinaus möchten Sie, sobald eine Listingseite funktioniert, sofort den Rest einer CRUD-Oberfläche.

Ich habe ein Beispielmodul auf Github gefunden . Angefangen mit diesem Thread zur Orientierung bis hin zum Portieren / Hacken von Code aus dem Beispiel-Plugin hat sich herausgestellt, dass dies der schnellste Weg ist, eine CRUD-Schnittstelle für eine benutzerdefinierte Tabelle zu erhalten.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.