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.xmlDiese 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
- Scheint ein Formular zu sein
- 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.
magento2
php
layout
uicomponent
Alan Storm
quelle
quelle
Antworten:
[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: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 />Knoten erfordert Attributname. In diesem Fall werdendatagrundlegende 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 eingechecktproviderunddepssind 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 einAdd newKnopf. Schaltflächen haben einige Elemente:nameWird als Element-ID verwendet,labelist das , was der Button sagt,classdie Button-Klasse undurlder 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(anstatturl, es hat Vorrang),style,value,disabled. Das Schaltflächenelement wird von derMagento\Ui\Component\Control\ButtonKlasse gerendert .Als nächstes haben wir
<dataSource />Knoten:nameDer in<dataSource />node verwendete muss mit dem inargument/js_config/providerund verwendeten übereinstimmenargument/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 wirddi.xml.primaryFieldNamebezieht sich auf die primäre Datenbankspalte undrequestFieldNameauf die Variable in http-Anforderungen. Sie können gleich sein, müssen es aber nicht, CMS-Seitenauflistung verwendetpage_idasprimaryFieldNameundidasrequestFieldName.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 istMagento/Ui/view/base/web/js/grid/provider.js.Ein weiterer Knoten ist
<container />.Da es viele Daten enthält, lassen Sie es mich auch teilen. Seine Kinder sind die Teile der gesamten Seite. Erstes Kind
<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.htmlNächster Knoten ist (oder kann sein)
<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 />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ürMagento/Ui/view/base/web/js/grid/controls/columns.jsdie eine Vorlage verwendet wirdMagento/Ui/view/base/web/templates/grid/controls/columns.html. Das letzte ElementdisplayAreadefiniert, wo Spaltensteuerelemente angezeigt werden müssen. Es bezieht sich auf diegetRegion('dataGridActions')in definierte Dateicontainer/argument/config/template(Standard:)Magento/Ui/view/base/web/templates/grid/toolbar.html.Nächster Knoten ist
<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 />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]. ImtemplatesElementknoten können Sie definieren, welche Dateien zum Rendern bestimmter Filteroptionen verwendet werden. In diesem Fall ist nur select definiert und wirdMagento/Ui/view/base/web/js/form/element/ui-select.jsalscomponentundMagento/Ui/view/base/web/templates/grid/filters/elements/ui-select.htmlals Aussparungsvorlage verwendet. SehenMagento/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.jsundMagento/Ui/view/base/web/templates/grid/filters/elements/select.html. Standardwerte für Filter und andere Knoten sind in definiertMagento/Ui/view/base/ui_component/etc/definition.xml.Der nächste Knoten ist
<massAction />und ermöglicht das Hinzufügen einer Massenaktion zum RasternameArgument 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 istMagento_Ui/js/grid/massactions(Punkte bisMagento/Ui/view/base/web/js/grid/massactions.js). Mit können SieMagento_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. Dannargumententhält Konfiguration , bei derlabelist das, was in Auswahloption sichtbar ist,urlEndpunkt zum Senden von Daten undconfirmfügt Bestätigungsmodal vor dem Senden hinzu. Im Fall von "Status ändern" wird die Aktionurlim erstenargumentKnoten nicht ausgeführt, da die URLs pro Status von der im zweitenargumentKnoten definierten Klasse bereitgestellt werden. Die Klasse sollte die Schnittstelle Zend \ Stdlib \ JsonSerializable implementieren. Überprüfen SieMagento\Customer\Ui\Component\MassAction\Group\Optionsals Referenz.Schließlich
<container />haben wir im Knoten einen<paging />Knoten, der die Paginierung definiert.Struktur für
providerundselectProvidersollte 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 alsund das Namensattribut wird in anderen Knoten verwendet, wenn darauf verwiesen wird. Erstes Kind ist
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 aufDer nächste ist
<selectionColumns />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:
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 bereitstelltcomponent- definiert js-Dateien, die zum Rendern von Spalten verwendet werden. Verfügbare Optionen sind inMagento/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 verwendenbodyTmpl- 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 imMagento/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 angezeigtsortOrder- Bestellungvisible- 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
indexFieldverweist auf den Spaltennamen in der Datenbank. Die Actions-Klasse sollteMagento\Ui\Component\Listing\Columns\ColumndieprepareDataSourceMethode erweitern und definieren . SieheMagento/Cms/Ui/Component/Listing/Column/PageActions.phpals Referenz3) 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/classcollectionLöst sich in eine Standardauflistungsklasse auf undfilerPooldefiniert ein neues Element:Dies hat offensichtlich etwas mit Filtern und Suchen zu tun. Im Moment habe ich immer die Standardwerte verwendet.
Jetzt registrieren wir unsere Datenquelle:
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 implementierenMagento\Framework\Api\Search\SearchResultInterface.Am Ende konfigurieren wir unsere Grid Collection (Argumentnamen sind ziemlich offensichtlich)
quelle
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 -
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
<argument name="data" xsi:type="array">: - brauchen Erwähnung arugemnt wie Knopf js etc ..<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üssendi.xml(erklärt im di.xml- Teil).<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).<columns name="test_lists_columns">: - in diesem müssen wir alle Spalte erwähnenLetzteres ist in di.xml
app \ code \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml
quelle
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 :
Lösung
Fügen Sie im
<dataSource />Knoten unten<item name="update_url" xsi:type="url" path="mui/index/render"/>den Inhalt hinzu:entity_idist der Primärschlüssel für die Listing-Sammlung.quelle
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.
quelle