Magento 2 में UI घटक ग्रिड की व्याख्या

क्या Magento 2 में UI घटक ग्रिड बनाने के लिए आवश्यक नंगे न्यूनतम कॉन्फ़िगरेशन का एक अच्छा स्पष्टीकरण और / या नमूना है?

मुझे पता है कि असंख्य कोर घटक हैं, जैसे कि

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

हालाँकि, ये XML फ़ाइलें विस्तृत हैं, और प्रत्येक नोड क्या करता है, और स्क्रैच से ग्रिड बनाने के लिए आप इसका उपयोग कैसे करेंगे, इसके बारे में बहुत कम स्पष्टीकरण है।

यह नमूना मॉड्यूल भी है , लेकिन यह

एक रूप होने की अपील करता है
प्रत्येक नोड क्या करता है के बारे में कोई संदर्भ / स्पष्टीकरण देता है

मैं "आरंभ करना" जानकारी की तलाश कर रहा हूं जो मुझे अपने स्वयं के सीआरयूडी मॉडल संग्रह के लिए ग्रिड बनाने देगा।

— एलन तूफान
स्रोत

पूरी तरह से जवाब देने लायक नहीं है - लेकिन मेरी यूआई घटक श्रृंखला शुरू करने के लिए अच्छी जगह है: alanstorm.com/category/magento-2/#magento-2-ui

— एलन स्टॉर्म

जवाबों:

166

[EDIT 3 अक्टूबर 2018]

Devdocs के लिंक के लिए अपडेट करें: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-compenders/ui-listing-grid.html और https://devdocs.magento.com/guides/v2। 0 / ui-घटकों / ui-secondary.html

२.१ - https://devdocs.magento.com/guides/v2.1/ui_comp_guide/compenders/ui-listing-grid.html

२.२ - https://devdocs.magento.com/guides/v2.2/ui_comp_guide/compenders/ui-listing-grid.html

[EDIT 21 जनवरी 2016]

20/01/2017 तक यूआई घटकों के विस्तारित प्रलेखन के साथ magento2 देवदास को अद्यतन किया गया है। मैंने इसे बड़े पैमाने पर चेक नहीं किया है, लेकिन उनमें कुछ दिन पहले दी गई प्रतिक्रिया की तुलना में अधिक जानकारी हो सकती है, इसलिए अपने समय के हित में आप http://devdocs.magento.com/guides/v2.0/ui देखना चाहते हैं -library / ui-पुस्तकालय-secondary.html

[/ संपादित करें]

मैं अब एक महीने से अधिक समय से Magento2 के साथ काम कर रहा हूं और यही मैंने ग्रिड बनाने के नए तरीके के बारे में देखा है।

Magento 2 UI ग्रिड घटक

1) लेआउट फ़ाइल के अंदर Company/Module/view/adminhtml/layout/module_controller_action.xmlपरिभाषित ग्रिड के रूप में uiComponent के साथ:

<?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.xmlफाइल में परिभाषित किया गया है। फ़ाइल नाम लेआउट फ़ाइल में उपयोग किए गए uiComponent नाम के समान होना चाहिए। पहली नज़र में फ़ाइल की संरचना बहुत जटिल लग सकती है लेकिन हमेशा की तरह ये कुछ दोहराए जाने वाले नोड हैं। इसे सरल बनाने के लिए इसे स्लाइस करें। घटक फ़ाइल का मुख्य नोड है <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">। यह तय हो गया है और मेरा मानना है कि इसके लिए नाम स्थान स्थान विशेषता की आवश्यकता है। अगला वहाँ आम तौर पर अंदर 4 नोड्स हैं <listing />नोड: <argument />, <dataSource />, <container />और <columns />। यह हालांकि एक सख्त सेटअप नहीं है क्योंकि <argument />नोड को अधिक कॉन्फ़िगरेशन प्रदान करने के लिए डुप्लिकेट किया जा सकता है या <container />किसी कारण से "चिपचिपा" कंटेनर जोड़ने वाले सेमी पेज लिस्टिंग में हो सकता है ।

पहला नोड है <argument />। यह नोड घटक के लिए डेटा को परिभाषित करता है। आमतौर पर आपको ऐसा कुछ प्रदान करने की आवश्यकता होती है:

<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 />नोड को विशेषता की आवश्यकता होती है name। इस मामले dataमें घटक के बारे में बुनियादी जानकारी को परिभाषित करता है। इसमें <item />कॉन्फ़िगरेशन के प्रत्येक विशिष्ट भाग के लिए कई नोड होते हैं । js_configउस घटक को बताता है जहां लिस्टिंग xml कॉन्फ़िगरेशन में डेटा और निर्भरता के प्रदाता हैं (जो मुझे लगता है कि जावास्क्रिप्ट हैश में परिवर्तित हो गया है)। providerमूल्य में लेआउट फ़ाइल और विशिष्ट डेटा स्रोत नाम का उपयोग करने वाले सूचीबद्ध नाम शामिल हैं जिन्हें बाद में उपयोग किया जाएगा। उन सूचियों में मैंने Magento में जाँच की providerऔर depsवही हैं। मुझे यकीन नहीं है कि यह अलग होने का क्या उपयोग है। spinnerउस नोड का नाम लेता है जहाँ ग्रिड के कॉलम परिभाषित किए गए हैं। buttonsग्रिड के शीर्ष पर बटन जोड़ने की अनुमति देता है। ज्यादातर मामलों में यह सिर्फ Add newबटन होगा। बटन में कुछ तत्व होते हैं:nameएलिमेंट आईडी के रूप में उपयोग किया जाता labelहै, जो बटन कहता classहै, बटन वर्ग है और urlयह उसी बिंदु की लिंक है। तारांकन को वर्तमान url के भाग से बदल दिया जाता है। अन्य संभावित <item />बटन के लिए नोड्स हैं: id, title, type(, रीसेट सबमिट करें या बटन), onclick(के बजाय url, यह पूर्वता है) style, value, disabled। बटन तत्व Magento\Ui\Component\Control\Buttonवर्ग द्वारा प्रदान किया जाता है ।

अगला हमारे पास <dataSource />नोड है:

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

name<dataSource />नोड में प्रयोग किया जाता है argument/js_config/providerऔर में इस्तेमाल एक से मेल खाना चाहिए argument/js_config/deps। अगला नोड परिभाषित करता है कि ग्रिड के लिए डेटा तैयार करने के लिए कौन सा वर्ग जिम्मेदार है। classतर्क के लिए अद्वितीय नाम की आवश्यकता होती है जिसे मिलान किया जाएगा di.xml। primaryFieldNameडेटाबेस प्राथमिक स्तंभ और requestFieldNameHTTP अनुरोधों में चर से संबंधित है । वे बराबर हो सकता है लेकिन जरूरी नहीं है, सीएमएस पेज सूची का उपयोग करता है page_idके रूप में primaryFieldNameऔर idके रूप में requestFieldName। update_urlप्रवेश बिंदु को संदर्भित करता है जहां फ़िल्टर करने और छँटाई के लिए अजाक्स कॉल भेजे जाते हैं। <dataSource />जावास्क्रिप्ट फ़ाइल को संदर्भित करने वाला दूसरा तर्क ग्रिड के लिए अजाक्स कॉल भेजने और प्रसंस्करण के हिस्से को संभालता है। डिफ़ॉल्ट फ़ाइल है Magento/Ui/view/base/web/js/grid/provider.js।

एक और नोड है <container />।

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

जैसा कि इसमें बहुत सारे डेटा हैं, मुझे इसे भी विभाजित करने दें। इसके बच्चे पूरे पृष्ठ के भाग हैं। पहला बच्चा <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>

यह लेआउट और सभी कार्यों और डिफ़ॉल्ट बिंदुओं से निपटने के लिए जिम्मेदार नॉकआउट टेम्पलेट को परिभाषित करता है Magento/Ui/view/base/web/templates/grid/toolbar.html

अगला नोड है (या हो सकता है) <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>

यह नोड ग्रिड में बुकमार्क सुविधा जोड़ता है। यह व्यवस्थापक को ग्रिड के विभिन्न "प्रोफाइल" सेट करने की अनुमति देता है जो विभिन्न कॉलम प्रदर्शित करता है। इसके लिए धन्यवाद कि आप टेबल से ग्रिड तक सभी कॉलम जोड़ सकते हैं और उपयोगकर्ता को यह तय करने दें कि कौन सी जानकारी उसके लिए प्रासंगिक है। namespaceलेआउट फ़ाइल में प्रयुक्त नाम से मेल खाना चाहिए।

एक और नोड है <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>

हमारे पास यहां कॉन्फ़िगर करने के लिए 3 मान हैं। पहला वह है providerजो पैटर्न का अनुसरण करता है [लिस्टिंग_नाम_फ्रॉम_लेआउट]। componentजेएस फाइल को संदर्भित करता है जो ग्रिड प्रदर्शित करता है और डिफ़ॉल्ट बिंदुओं के लिए Magento/Ui/view/base/web/js/grid/controls/columns.jsजो टेम्पलेट का उपयोग करता है Magento/Ui/view/base/web/templates/grid/controls/columns.html। अंतिम आइटम वह है displayAreaजो परिभाषित करता है कि स्तंभ नियंत्रण को प्रदर्शित करने की आवश्यकता है। यह (डिफ़ॉल्ट getRegion('dataGridActions'):) में परिभाषित फ़ाइल को संदर्भित करता है ।container/argument/config/templateMagento/Ui/view/base/web/templates/grid/toolbar.html

अगला नोड है <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>

यह नोड पेज में पूर्ण पाठ खोज जोड़ता है। यह एक प्लेसहोल्डर के रूप में "कीवर्ड द्वारा खोजें" के साथ एकल पाठ इनपुट फ़ील्ड के रूप में ग्रिड के ऊपर स्थित है। मुझे यकीन नहीं है कि यहां कौन से विकल्प संभव हैं क्योंकि मैं इस से ज्यादा नहीं खेल पाया लेकिन लिस्टिंग_फिल्टर्स_चिप्स Magento/Ui/view/base/web/js/grid/filters/chips.jsफाइल को संदर्भित करता है ।

अगला नोड है <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>

यह नोड स्तंभ फ़िल्टरिंग के लिए कॉन्फ़िगरेशन को परिभाषित करता है जो ग्रिड के ऊपर दाईं ओर "फ़िल्टर" बटन पर क्लिक करने के बाद दिखाई देता है। columnsProviderपिछले नोड्स के समान संरचना का अनुसरण करता है, इसलिए [लिस्टिंग_नाम_फ्रॉम_ऑलआउट]। [लिस्टिंग_नाम_फ्रॉम-वेलआउट] [लिस्टिंग_ कोलुमन्स_नोड_नाम]। storegeConfigइस तरह जाता है [लिस्टिंग_नाम_फ्रेम_लेआउट]। [लिस्टिंग_नाम_फ्रॉम_लेआउट] [कंटेनर_नोड_नाम] [बुकमार्क_नोड_नाम]। में templatesआइटम नोड आप परिभाषित कर सकते हैं जो फ़ाइलों को विशिष्ट फ़िल्टर विकल्प प्रस्तुत करने के लिए उपयोग किया जाता है। इस मामले में केवल चुनिंदा परिभाषित किया गया है और यह नॉकआउट टेम्पलेट के Magento/Ui/view/base/web/js/form/element/ui-select.jsरूप में componentऔर उपयोग करता है Magento/Ui/view/base/web/templates/grid/filters/elements/ui-select.html। में देखो Magento/Ui/view/base/web/js/form/elementअन्य संभावनाओं को देखने के लिए। डिफ़ॉल्ट मानों को ओवरराइड करने के लिए केवल चुनिंदा को यहां परिभाषित किया गया है: Magento/Ui/view/base/web/js/form/element/select.jsऔर Magento/Ui/view/base/web/templates/grid/filters/elements/select.html। फ़िल्टर और अन्य नोड्स के लिए डिफ़ॉल्ट मान परिभाषित किए गए हैं Magento/Ui/view/base/ui_component/etc/definition.xml।

अगला नोड है <massAction />और ग्रिड के लिए बड़े पैमाने पर कार्रवाई को जोड़ने की अनुमति देता है

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

nameतर्क अद्वितीय होना चाहिए। पहला बाल नोड <argument />मूल डेटा को परिभाषित करता है। providerअन्य नोड्स के समान संरचना का अनुसरण करता है और कॉलम नोड नाम और इसके आईडी कॉलम को संदर्भित करता है। यह कॉलम बड़े पैमाने पर कार्रवाई के लिए चयनित वस्तुओं के साथ चेकबॉक्स रखेगा। componentपरिभाषित करता है कि जन कार्रवाई को प्रस्तुत करने और संभालने के लिए किस फ़ाइल का उपयोग किया जाता है। डिफ़ॉल्ट मान Magento_Ui/js/grid/massactions(अंक Magento/Ui/view/base/web/js/grid/massactions.js) है। आप Magento_Ui/js/grid/tree-massactionsसंरचना की तरह पेड़ को जोड़ने के लिए उपयोग कर सकते हैं । उपरोक्त मामले में मैं इसका उपयोग "स्थिति बदलने" क्रिया को जोड़ने के लिए करता हूं जो "सक्षम" और "अक्षम" विकल्प दिखाता है। <argument />नोड के बाद आप <action />जितने कार्य करना चाहते हैं उतने नोड जोड़ सकते हैं । प्रत्येक <action />नोड समान योजना का अनुसरण करता है। पहले मामले में (कार्रवाई को हटाएं) नोड को अद्वितीय नाम की आवश्यकता होती है। फिर argumentकॉन्फ़िगरेशन कहाँ होता हैlabelवह है जो चुनिंदा विकल्प में दिखाई देता है, urlडेटा भेजने के लिए समापन बिंदु और भेजने confirmसे पहले पुष्टि मोडल जोड़ता है। urlप्रथम argumentनोड में "स्थिति बदलें" कार्रवाई के मामले में, दूसरी argumentनोड में परिभाषित कक्षा द्वारा प्रति स्टेटस के रूप में url प्रदान किए जाते हैं । वर्ग को Zend \ Stdlib \ JsonSerializable इंटरफ़ेस लागू करना चाहिए। Magento\Customer\Ui\Component\MassAction\Group\Optionsसंदर्भ के रूप में देखें ।

अंत में <container />नोड में हमारे पास <paging />नोड है जो पेजिनेशन को परिभाषित करता है।

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

के लिए संरचना providerऔर selectProviderअब स्पष्ट होना चाहिए।

और मूल ग्रिड के लिए अंतिम नोड है <columns />। इसमें स्तंभ की सभी परिभाषाएँ हैं जो व्यवस्थापक द्वारा उपयोग के लिए उपलब्ध हैं। नोड के रूप में परिभाषित किया गया है

<columns name="listing_columns"> ... </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">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>

मैंने यहां क्या providerकिया, यह लिस्टिंग में इस्तेमाल की गई योजना के बाद केवल सही मूल्य की आपूर्ति थी । fieldActionनोड सेल पर क्लिक करने पर निकाल दी गई कार्रवाई को परिभाषित करने की अनुमति देता है। डिफ़ॉल्ट सेटिंग्स कॉल को संपादित करती हैं

अगला है <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>

यह नोड उपयोग करने के लिए बड़े पैमाने पर कार्रवाई के लिए चेकबॉक्स के साथ कॉलम को परिभाषित करता है। इसे ऊपर वर्णित कई नोड्स में डॉट के बाद संदर्भित किया जाता है।

उसके बाद आप उसी प्रारूप में किसी भी संख्या में कॉलम जोड़ सकते हैं:

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

सभी सबसे आंतरिक आइटम नोड आवश्यक नहीं हैं। वे परिभाषित कर रहे हैं:

filter- कॉलम का फिल्टर प्रकार। इसका उपयोग फिल्टर ब्लॉक में किया जाता है। उपलब्ध मान हैं: पाठ, चयन, तारीख। यदि चयन किया जाता है <item name="options">...</item>तो इसका उपयोग एक ऐसे वर्ग के रूप में किया जाएगा जो फ़िल्टर चयन के लिए विकल्प प्रदान करता है

component- जेएस फाइलों को परिभाषित करता है जो कॉलम को रेंडर करने के लिए उपयोग किया जाता है। उपलब्ध विकल्प में हैं Magento/Ui/view/base/web/js/grid/columns/*। चयन प्रदान किया गया है फ़िल्टर का चयन करने के लिए सेट किया गया है। पाठ फ़िल्टर के लिए इस मान की आवश्यकता नहीं है।

dataType- स्तंभ मान के लिए उपयोग किए जाने वाले डेटा प्रकार की जानकारी प्रदान करता है। का उपयोग करें चयन के लिए के रूप में अच्छी तरह से, dateRange उपयोग की तारीख के लिए bodyTmpl- सेल रेंडर करने के लिए पीटा द्वारा इस्तेमाल HTML फ़ाइल को परिभाषित करता है। डिफ़ॉल्ट रूप से ui / ग्रिड / कोशिकाओं / पाठ का उपयोग किया जाता है ( Magento/Ui/view/base/web/templates/grid/cells/text.html)। अन्य विकल्प Magento/Ui/view/base/web/templates/grid/cells/*निर्देशिका में स्थित हैं । ui/grid/cells/htmlसेल में HTML सामग्री का उपयोग करने की अनुमति देता है।

label - यह कॉलम हैडर और फिल्टर ब्लॉक में प्रदर्शित होगा

sortOrder - आदेश देना

visible- कॉलम प्रदर्शित करता है या नहीं। इसका उपयोग बुकमार्क के लिए परिभाषित स्तंभों में किया जा सकता है, लेकिन डिफ़ॉल्ट रूप से उन्हें न दिखाएं।

अंत में आप एकल आइटम के लिए उपलब्ध एक्शन कॉलम डायन क्रियाओं को जोड़ सकते हैं

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

indexFieldडेटाबेस में कॉलम नाम को संदर्भित करता है। क्रियाएँ वर्ग का विस्तार Magento\Ui\Component\Listing\Columns\Columnऔर prepareDataSourceविधि को परिभाषित करना चाहिए । Magento/Cms/Ui/Component/Listing/Column/PageActions.phpएक संदर्भ के रूप में देखें

3) कंपनी / मॉड्यूल / आदि / di.xml में कुछ तत्वों को परिभाषित करने के लिए हमें ग्रिड को खत्म करने की आवश्यकता है

पहले हम प्रदाता वर्ग को परिभाषित करते हैं जो नोड में उपयोग किया गया था 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>

collectionमानक संग्रह वर्ग को हल करता है और filerPoolनए तत्व को परिभाषित करता है:

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

यह स्पष्ट रूप से फ़िल्टरिंग और खोज के साथ कुछ करना है। अभी के लिए मैंने हमेशा डिफ़ॉल्ट मानों का उपयोग किया है।

अब हम अपना डेटा स्रोत पंजीकृत करते हैं:

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

इस स्थिति में नोड का नाम <dataSource />xml को सूचीबद्ध करने में नोड में उपयोग किए जाने वाले से मेल खाना चाहिए और यह संग्रह करने के लिए नहीं बल्कि ग्रिडकोलेशन क्लास में हल होता है। इसे नियमित संग्रह वर्ग का विस्तार करना चाहिए और इसके अतिरिक्त कार्यान्वयन करना चाहिए Magento\Framework\Api\Search\SearchResultInterface।

अंत में हम अपने ग्रिड संग्रह को कॉन्फ़िगर करते हैं (तर्क के नाम स्पष्ट नहीं हैं)

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

— Zefiryn
स्रोत

क्या आपको मेरे धागे को देखने का मौका मिला

— बोजजिया

यह अभी भी डॉक्स को लंबे समय तक हराता है, जहां तक मैं देख सकता हूं।

— आरोन पोलक

2) uiComponent को कंपनी / मॉड्यूल / दृश्य / adminhtml / ui_component / लिस्टिंग_name.xml में परिभाषित किया गया है। तो, मूल रूप से, ग्रिड घटक सीमांत पर काम नहीं करता है?

— लाचेज़र रेचेव

पुरानी पोस्ट जो मुझे पता है - लेकिन, मैं इसके लिए आया हूं, इसके बाद (धन्यवाद btw, निश्चित रूप से इस पर सबसे विस्तृत स्पष्टीकरण में से एक) लेकिन मुझे संग्रह के संबंध में एक अनकही त्रुटि मिलती है। विशेष रूप से तर्क। यह कहता है कि तर्क 2 एक सरणी होना चाहिए, लेकिन अशक्त है - मैंने उपरोक्त सभी किया है - लेकिन क्या मुझे कुछ और करना चाहिए था? :)

— ट्रेब्रेक

@AishishViradiya अपडेट लिंक ऊपर [EDIT 3 अक्टूबर 2018] सेक्शन के तहत हैं

— Zefiryn

ग्रिड के लिए हमें दो मुख्य फ़ाइलों की आवश्यकता होती है एक है ui_component xml और दूसरा है di.xml

मुझे आशा है कि आप लेआउट xml फ़ाइल में जानते हैं कि आपको uiComponent टैग जोड़ने की आवश्यकता है, अर्थात -

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

अब आपको test_lists_listing.xmlui_component फ़ोल्डर में एक बनाने की आवश्यकता है ।

उदाहरण के लिए \ app \ Sugarcode \ Test \ view \ adminhtml \ ui_component \ test_lists_listing.xml

इस फ़ाइल में टैग की संख्या है

<argument name="data" xsi:type="array"> : - बटन जे एस आदि जैसे arugemnt का उल्लेख करने की आवश्यकता है।
<dataSource name="test_lists_listing_data_source">: - इस ब्लॉक का उपयोग इस तर्क में से एक में ग्रिड के लिए डेटा की आपूर्ति करने के लिए किया जाता है, <argument name="class" xsi:type="string">ListsGridDataProvider</argument>जिसे हमें di.xml( di.xml भाग में समझाया गया है )
<container name="listing_top"> : - इस ब्लॉक में हम फिल्टर, एक्सपोर्ट, बुकमार्क (जो ui_bookmark टेबल में डेटा सेव करते हैं), मसाज, पेजिंग और फुलटेक्स्ट (सेटअप या टेबल में फुलटेक्स्ट सर्च करने के लिए करते हैं, जिसमें कॉलम फुलटेक्स इंडेक्स होना चाहिए)
<columns name="test_lists_columns"> : - इसमें हमें सभी कॉलम का उल्लेख करना होगा

पिछले एक 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>

TestGirdFilterPool: - फ़िल्टर का उल्लेख करें
ListsGridDataProvider: - जो मैंने डेटा प्रदाता के लिए ui xml में उल्लेख किया है
CollectionFactory: - संग्रह का उल्लेख करने की आवश्यकता है
ग्रिड / संग्रह: - इसमें हमें सभी पारम्स जैसे टेबल नेम, कलेक्शन आदि को पास करना होगा।

एप्लिकेशन \ कोड \ Sugarcode \ टेस्ट \ दृश्य \ 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>

— प्रदीप कुमार
स्रोत

सॉर्टऑर्डर चयनकर्ताओं के लिए काम नहीं कर रहा है। आखिर क्यों नहीं आ रहा है

— भूपेंद्र जडेजा

शीर्ष उत्तर का पूरक

शीर्ष उत्तर बहुत अच्छा है, मैं इसे एक लिस्टिंग पृष्ठ बनाने के लिए अनुसरण करता हूं। लेकिन, इसमें एक समस्या है :

जब आप फ़िल्टर लागू करते हैं, तो फ़िल्टर को हटाते हैं, वही पंक्ति सामग्री पूरे पृष्ठ ग्रिड में दोहराएगी ।

उपाय

में <dataSource />नोड, नीचे <item name="update_url" xsi:type="url" path="mui/index/render"/>, सामग्री जोड़ने:

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

entity_id लिस्टिंग संग्रह के लिए प्राथमिक कुंजी है।

— कुंजी शांग
स्रोत

मुझे @ ज़ेफिरिन का उत्तर बहुत मददगार लगा और मैगेंटो से पूर्ण दस्तावेज को पढ़े बिना शुरू करने का एक शानदार तरीका।

कहा कि मुझे इन उत्तरों के बाद काम करने में काफी चीजें नहीं मिलीं। एक बार जब आपके पास एक लिस्टिंग पृष्ठ काम करने लगता है, तो आप तुरंत बाकी CRUD इंटरफ़ेस चाहते हैं।

मुझे जीथब पर एक नमूना मॉड्यूल मिला । अभिविन्यास के लिए इस थ्रेड के साथ शुरू करना तब नमूना प्लगइन से पोर्टिंग / हैकिंग कोड एक कस्टम तालिका के खिलाफ CRUD इंटरफ़ेस प्राप्त करने का सबसे तेज़ तरीका निकला।

— quickshiftin
स्रोत