[EDIT 3 Eki 2018]
Devdocs bağlantıları için güncelleme: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/ui-listing-grid.html ve https://devdocs.magento.com/guides/v2 adresini ziyaret edin. 0 / ui-bileşenleri / 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 Oca 2016]
20.01.2016 tarihinden itibaren magento2 devdocs, UI bileşenlerinin genişletilmiş dokümantasyonu ile güncellendi. Kapsamlı bir şekilde kontrol etmedim ancak birkaç gün önce verdiğim yanıttan daha fazla bilgi içerebilirler, bu nedenle zamanınızın yararına http://devdocs.magento.com/guides/v2.0/ui adresini görmek isteyebilirsiniz. -library / ui kitaplığı-secondary.html
[/DÜZENLE]
Magento2 ile bir aydan fazla bir süredir çalışıyorum ve bu yeni şebeke yaratma yöntemi hakkında farkettim.
Magento 2 UI ızgara bileşeni
1) içindeki düzen dosyası Company/Module/view/adminhtml/layout/module_controller_action.xml, aşağıdakilerle uiComponent olarak grid'i tanımlar:
<?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 Company/Module/view/adminhtml/ui_component/listing_name.xmldosyada tanımlanmıştır . Dosya adı, düzen dosyasında kullanılan uiComponent adıyla aynı olmalıdır. Dosyanın yapısı ilk bakışta oldukça karmaşık görünebilir, ancak her zaman olduğu gibi bunlar tekrar eden düğümlerdir. Basit hale getirmek için onu dilimlemek sağlar. Bileşen dosyasının ana düğümü <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">. Sabit ve ad alanı konumu niteliği gerektirdiğine inanıyorum. Sonraki var içinde 4 düğüm tipik olarak <listing />düğümün: <argument />, <dataSource />, <container />ve <columns />. Ancak bu, <argument />daha fazla yapılandırma sağlamak için çoğaltılabileceğinden ya <container />da bir nedenden dolayı "yapışkan" kapsayıcı ekleyen cms sayfa listesinde olduğu gibi katı bir kurulum değildir .
İlk düğüm <argument />. Bu düğüm, bileşen için verileri tanımlar. Genellikle böyle bir şey sağlamanız gerekir:
<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 />düğüm öznitelik gerektirir name. Bu durumda databileşen hakkında temel bilgileri tanımlar. Her bir <item />konfigürasyon parçası için çoklu düğüm içerir . js_configxml yapılandırması listesindeki veri ve bağımlılıkların sağlayıcısı olan bileşene (sanırım javascript karmasına dönüştürüldüğünü düşünüyorum) söyler. providerdeğer, düzen dosyasında kullanılan liste adından ve daha sonra kullanılacak uniqure veri kaynağı adından oluşur. Bu listelerde magento'yu kontrol ettim providerve depsaynı. Bunun farklı olmasının ne demek olduğundan emin değilim. spinnerKılavuzun sütunlarının tanımlandığı düğümün adını alır. buttonsIzgara üstüne düğmeler eklemenizi sağlar. Çoğu durumda sadece Add newdüğme olurdu . Düğmelerin az elemanı var:nameelement kimliği olarak kullanılan label, düğmenin söylediği, classdüğme sınıfı ve urlişaret ettiği bağlantıdır. Asterik'ler, geçerli url'nin bir kısmı ile değiştirilir. Diğer olası <item />düğme için düğümleri şunlardır: id, title, type, (sıfırlamak göndermek veya düğme) onclick(yerine url, bu önceliğe sahiptir), style, value, disabled. Düğme öğesi Magento\Ui\Component\Control\Buttonsınıf tarafından oluşturulur .
Sonra <dataSource />düğüm var:
<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>
namekullanılan <dataSource />düğüm kullanılan aynı olmalıdır argument/js_config/providerve argument/js_config/deps. Sonraki düğüm hangi sınıfın ızgara için veri hazırlamaktan sorumlu olduğunu tanımlar. classargüman, eşleştirilecek benzersiz bir ad gerektirir di.xml. primaryFieldNameveritabanı birincil sütunu ve requestFieldNamehttp isteklerindeki değişkenle ilgilidir . Eşit olabilirler, ancak zorunda değiller, CMS sayfa listesi page_idolarak primaryFieldNameve idkullanılır requestFieldName. update_urlajax'ın filtreleme ve sıralama için gönderildiği giriş noktasını ifade eder. İkinci argüman, <dataSource />js'nin ajax çağrılarını gönderme ve işlemenin bir kısmını grid için çağırdığı javascript dosyasına atıfta bulunur. Varsayılan dosya Magento/Ui/view/base/web/js/grid/provider.js.
Başka bir düğüm <container />.
<container name="listing_top"> ... </container>
Çok fazla veri içerdiğinden ayrılmama izin verin. Çocukları sayfanın tamamı. İlk çocuk <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>
Düzen ve tüm eylemlerin yerine getirilmesinden ve varsayılan olarak Magento/Ui/view/base/web/templates/grid/toolbar.html
Sonraki düğüm (veya olabilir) <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>
Bu düğüm, ızgaraya yer imi özelliği ekler. Yöneticinin, farklı sütunlar gösteren kılavuzun farklı "profilleri" ayarlamasına olanak tanır. Bu sayede tablodaki tüm sütunları tabloya ekleyebilir ve kullanıcının hangi bilgilerin kendisiyle alakalı olduğuna karar vermesine izin verebilirsiniz. namespacedüzen dosyasında kullanılan adla eşleşmelidir.
Başka bir düğüm <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>
Burada yapılandırılacak 3 değerimiz var. İlk olarak bir providerdesen [listing_name_from_layout] takip eden. [Listing_name_from_layout]. [Listing_columns_node_name] (düğüm listesi / argüman / spinner gibi). componentızgarayı ve varsayılan olarak Magento/Ui/view/base/web/js/grid/controls/columns.jsşablonu kullanan noktaları gösteren js dosyasını ifade eder Magento/Ui/view/base/web/templates/grid/controls/columns.html. Son öğe, displayAreasütun kontrollerinin nerede gösterilmesi gerektiğini tanımlar. Burada getRegion('dataGridActions')tanımlanan dosyaya atıfta bulunur container/argument/config/template(varsayılan:) Magento/Ui/view/base/web/templates/grid/toolbar.html.
Sonraki düğüm <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>
Bu düğüm, sayfaya tam metin araması ekler. Yer tutucu olarak "Anahtar kelimeye göre ara" seçeneği ile kılavuzun üzerinde tek metin giriş alanı olarak bulunur. Bu kadar fazla oynamadığım için hangi seçeneklerin mümkün olduğundan emin değilim, ama list_filters_chips Magento/Ui/view/base/web/js/grid/filters/chips.jsdosyaya atıfta bulunuyor .
Sonraki düğüm <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>
Bu düğüm, kılavuzun sağ üstündeki "Filtreler" düğmesini tıkladıktan sonra görünen sütun filtreleme yapılandırmasını tanımlar. columnsProviderönceki düğümlerle benzer yapıyı takip eder, bu yüzden [list_name_from_layout]. storegeConfig[listeleme_adı_from_layout]. Gelen templatesöğe düğümü belirli filtre seçeneklerini işlemek için hangi dosyaların tanımlayabilirsiniz. Bu durumda sadece select tanımlanır ve nakavt şablon Magento/Ui/view/base/web/js/form/element/ui-select.jsolarak componentve kullanır Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.html. İçine bak Magento/Ui/view/base/web/js/form/elementDiğer olasılıkları görmek için. Varsayılan değerleri geçersiz kılmak için burada sadece seçim tanımlanır: Magento/Ui/view/base/web/js/form/element/select.jsve Magento/Ui/view/base/web/templates/grid/filters/elements/select.html. Filtreler ve diğer düğümler için varsayılan değerler Magento/Ui/view/base/ui_component/etc/definition.xml.
Sonraki düğüm <massAction />ve ızgaraya kitle eylemi seçme seçeneği sunar ve
<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>
nameargüman benzersiz olmalı. İlk alt düğüm <argument />, temel verileri tanımlar. providerdiğer düğümlerle aynı yapıyı takip eder ve sütun düğüm adı ve kimlikleri sütununu gösterir. Bu sütun, toplu işlemin işlenmesi için seçilen öğelerin bulunduğu onay kutularını tutar. componentKitle eylemini oluşturmak ve işlemek için hangi dosyanın kullanılacağını tanımlar. Varsayılan değer şudur Magento_Ui/js/grid/massactions(işaret eder Magento/Ui/view/base/web/js/grid/massactions.js). Magento_Ui/js/grid/tree-massactionsAğaç benzeri bir yapı eklemek için kullanabilirsiniz . Yukarıdaki durumda, "enable" ve "disable" seçeneklerini gösteren "Durumu değiştir" eylemini eklemek için kullanıyorum. Düğümden sonra <argument />, <action />istediğiniz eylemleri istediğiniz kadar düğüm ekleyebilirsiniz . Her <action />düğüm benzer şema izler. İlk durumda (eylemi sil) düğümü benzersiz bir ad gerektirir. Sonra argumentyapılandırma içerirlabelSeçme seçeneğinde görünen, urlveri göndermek için son nokta ve göndermeden confirmönce onay modalini ekler. " Düğümü değiştir" durumunda, urlilk argumentdüğümdeki eylem , ikinci argumentdüğümde tanımlanan sınıfa göre durum başına url sağlandığı için iptal edilir . Sınıf, Zend \ Stdlib \ JsonSerializable arabirimini uygulamalıdır. Magento\Customer\Ui\Component\MassAction\Group\OptionsReferans olarak kontrol edin .
Son olarak <container />düğümde <paging />sayfalamayı tanımlayan bir düğüm var.
<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>
Şimdilik yapısı providerve selectProvideraçık olması gerekir.
Ve temel ızgara için son düğüm <columns />. Yönetici tarafından kullanılabilecek tüm sütun tanımlarını içerir. Düğüm olarak tanımlanır
<columns name="listing_columns"> ... </columns>
ve name niteliği, ifade edildiğinde diğer düğümlerde kullanılır. İlk çocuk
<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>
Burada yaptığım şey sadece providerlistede kullanılan düzeni takip eden doğru değerleri sağlamaktı . fieldActionDüğüm, hücreye tıklandığında başlatılacak eylemi tanımlamayı sağlar. Varsayılan ayarlar arama düzenleme eylemi
Sıradaki <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>
Bu düğüm kullanılacak toplu işlem için onay kutularını içeren sütunu tanımlar. Adları noktadan sonra yukarıda açıklanan çeşitli düğümlerde belirtilir.
Bundan sonra, aynı formatta herhangi bir sayıda sütunu ekleyebilirsiniz:
<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>
Çoğu iç öğe düğümü gerekli değildir. Tanımlıyorlar:
filter- sütunun filtre türü. Bu, filtreler bloğunda kullanılır. Kullanılabilir değerler: metin, seç, dateRange. Seçim kullanılırsa <item name="options">...</item>, filtre seçimi için seçenekler sağlayan bir sınıf olarak kullanılacaktır.
component- Sütun oluşturmak için kullanılan js dosyalarını tanımlar. Mevcut seçenekler vardır Magento/Ui/view/base/web/js/grid/columns/*. seçim sağlandı, filtre seçilecek şekilde ayarlandı. Metin filtresi için bu değer gerekli değildir.
dataType- sütun değeri için kullanılan veri tipini sağlar. Seçim kullanımı için de, dateRange kullanım tarihi için seçim
bodyTmpl- hücre oluşturmak için nakavt tarafından kullanılan html dosyasını tanımlar. Varsayılan olarak ui / grid / cells / text kullanılır ( Magento/Ui/view/base/web/templates/grid/cells/text.html). Diğer seçenekler Magento/Ui/view/base/web/templates/grid/cells/*dizinde bulunur. ui/grid/cells/htmlhtml içeriğinin hücrede kullanılmasına izin verir.
label - bu sütun başlığında ve filtre bloğunda görüntülenecek
sortOrder - sipariş verme
visible- sütunun gösterilip gösterilmeyeceği. Bu, yer imleri için tanımlanmış sütunlarda kullanılabilir, ancak bunları varsayılan olarak göstermez.
Sonunda, tek bir öğe için yapılabilecek eylemler sütun cadı eylemlerini ekleyebilirsiniz.
<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>
indexFieldveritabanındaki sütun adını ifade eder. Eylemler sınıfı genişletmeli Magento\Ui\Component\Listing\Columns\Columnve prepareDataSourceyöntemi tanımlamalıdır . Bkz Magento/Cms/Ui/Component/Listing/Column/PageActions.phpreferans olarak
3) tabloyu bitirmek için Şirket / Modül / etc / di.xml içindeki bazı unsurları tanımlamamız gerekir.
İlk önce düğümde kullanılan sağlayıcı sınıfını tanımlarız. 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>
collectionstandart koleksiyon sınıfına gider ve filerPoolyeni öğeyi tanımlar:
<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>
Bu açıkça filtreleme ve arama ile bir şeyler yapmak zorunda. Şimdilik her zaman varsayılan değerleri kullandım.
Şimdi veri kaynağımızı kaydettik:
<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>
Bu durumda düğüm adı, <dataSource />xml listelenmesinde düğümde kullanılanla eşleşmelidir ve toplama değil GridCollection sınıfına gider. Düzenli toplama sınıfını genişletmeli ve ek olarak uygulamalıdır Magento\Framework\Api\Search\SearchResultInterface.
Sonunda grid koleksiyonumuzu yapılandırıyoruz (argüman adları oldukça açık)
<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>