[সম্পাদনা 3 অক্টোবর 2018]
ডেভডোক্সের লিঙ্কগুলির জন্য আপডেট: 2.0 - https://devdocs.magento.com/guides/v2.0/ui-components/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/components/ui-listing-grid.html
২.২ - https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html
[সম্পাদনা 21 জানুয়ারী 2016]
20/01/2016 অবধি ইউআই উপাদানগুলির বর্ধিত ডকুমেন্টেশন সহ ম্যাজেন্টো 2 ডিভডোক্স আপডেট করা হয়েছে আমি এটিকে ব্যাপকভাবে পরীক্ষা করে দেখিনি তবে কিছু দিন আগে আমি যে প্রতিক্রিয়া দিয়েছিলাম তার চেয়ে এগুলিতে আরও তথ্য থাকতে পারে, তাই আপনার সময়ের স্বার্থে আপনি http://devdocs.magento.com/guides/v2.0/ui দেখতে চাইতে পারেন -library / নামঃ ui-গ্রন্থাগার-secondary.html
[/ Edit]
আমি এখন একমাস ধরে ম্যাজেন্টো 2-এর সাথে কাজ করছি এবং গ্রিডগুলি তৈরির নতুন পদ্ধতির বিষয়টি আমি লক্ষ্য করেছি।
ম্যাজেন্টো 2 ইউআই গ্রিড উপাদান
1) লেআউট ফাইলটি Company/Module/view/adminhtml/layout/module_controller_action.xmlগ্রিডকে ইউআই কম্পোনেন্ট হিসাবে সংজ্ঞায়িত করে:
<?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) uiComp घटक Company/Module/view/adminhtml/ui_component/listing_name.xmlফাইলের মধ্যে সংজ্ঞায়িত করা হয় । ফাইলের নাম অবশ্যই লেআউট ফাইলে ব্যবহৃত ইউআইকম্পোনেন্টের নামের মতো হওয়া উচিত। ফাইলটির কাঠামো প্রথম দর্শনে বেশ জটিল মনে হতে পারে তবে বরাবরের মতো এটি কয়েকটি পুনরাবৃত্তি নোড। এটিকে সহজ করার জন্য এটি কেটে ফেলা যাক। উপাদান ফাইলের প্রধান নোড <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 />কোনও কারণের জন্য "স্টিকি" ধারক যুক্ত করে সেমি পৃষ্ঠা তালিকা হিসাবে সদৃশ হতে পারে uplic
প্রথম নোড হয় <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তালিকাটি এক্সএমএল কনফিগারেশনে ডেটা এবং নির্ভরতা যেখানে সরবরাহকারী রয়েছে সেই উপাদানটিকে বলে (যা আমি মনে করি জাভাস্ক্রিপ্ট হ্যাশে রূপান্তরিত হয়েছে)। providerমানটিতে লেআউট ফাইল এবং ইউনিক্যুর ডেটা উত্সের নাম ব্যবহৃত হয় যা পরে ব্যবহার করা হবে listing এই তালিকাগুলিতে আমি ম্যাজেন্টোতে চেক করেছি providerএবং depsএকই রকম। এই আলাদা হওয়ার কী ব্যবহার তা আমি নিশ্চিত নই। spinnerগ্রিডের কলামগুলি সংজ্ঞায়িত করা নোডের নাম নেয় takes buttonsগ্রিডের শীর্ষে বোতাম যুক্ত করতে দেয়। বেশিরভাগ ক্ষেত্রে এটি কেবল Add newবোতাম হবে। বোতামগুলির কয়েকটি উপাদান রয়েছে:nameএলিমেন্ট আইডি হিসাবে ব্যবহৃত হয়, labelবোতামটি যা বলে classতা হচ্ছে বোতাম শ্রেণি এবং 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>
যেহেতু এতে প্রচুর ডেটা রয়েছে তা আমাকে আরও ভাগ করে দিন। এর শিশুরা পুরো পৃষ্ঠার অংশ are প্রথম সন্তান <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>
এই নোড পৃষ্ঠায় পুরো পাঠ্য অনুসন্ধান যুক্ত করে। এটি স্থানধারক হিসাবে "কীওয়ার্ড দ্বারা অনুসন্ধান" সহ একক পাঠ্য ইনপুট ক্ষেত্র হিসাবে গ্রিডের উপরে অবস্থিত। আমি নিশ্চিত নই যে এখানে কী কী বিকল্পগুলি সম্ভব যা আমি এগুলি নিয়ে খেলি না তবে list_filters_chips ফাইলকে বোঝায় 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নোডে সংজ্ঞায়িত শ্রেণি দ্বারা স্ট্যাটাস অনুযায়ী সরবরাহ করা হয় । শ্রেণীর জেন্ড \ স্টল্লিব \ জসনসিরাইজেবল ইন্টারফেস প্রয়োগ করা উচিত। 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- কলাম মানটির জন্য ব্যবহৃত ডেটা ধরণের তথ্য সরবরাহ করে। নির্বাচনের ব্যবহারের জন্য নির্বাচন করুন, তারিখের জন্য ব্যবহারের তারিখ
bodyTmpl- সেল রেন্ডার করতে নকআউট দ্বারা ব্যবহৃত এইচটিএমএল ফাইলকে সংজ্ঞায়িত করে। ডিফল্টরূপে ui / গ্রিড / ঘর / পাঠ্য ব্যবহৃত হয় ( Magento/Ui/view/base/web/templates/grid/cells/text.html)। অন্যান্য বিকল্প Magento/Ui/view/base/web/templates/grid/cells/*ডিরেক্টরিতে অবস্থিত । ui/grid/cells/htmlঘরে html সামগ্রী ব্যবহার করতে দেয় to
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>