ترقية شبكة Magento 2 القياسية باستخدام مكونات واجهة المستخدم (الجزء 2)
نشرت: 2016-10-18في المقالة السابقة ، وصفنا كيفية إنشاء وحدة مع الشروط الأساسية والواجهة التي ستتيح لنا العمل معها. أثناء عملية الإنشاء استخدمنا كتل Magento القياسية. ومع ذلك ، فإن Magento 2 قادر على فعل الكثير.
أنا أتحدث عن إمكانية تحسين الواجهة بمساعدة مكونات واجهة المستخدم. تتم إضافة هذه المكونات مع وحدة Magento / UI.
* على الرغم من إمكانية العثور على هذه المكونات في الإصدار 2.0 ، فإننا نوصيك بشدة باستخدام الإصدار 2.1.
من هذه المقالة ، ستتعلم كيفية إعادة إنشاء الشبكة القياسية (الموجودة في التخطيط: app / code / Vendor / Rules / view / adminhtml / layout / vendor_rules_example_rule_index.xml ) وإثرائها بمكونات واجهة المستخدم.
قارن فقط. هذه شبكة قديمة:
بواحد جديد ، مصنوع من مكونات UX:
كما ترى ، فإن الشبكة التي تمت ترقيتها ستكون أكثر سهولة في الاستخدام وموفرة للوقت ، وأسهل في القياس ، ولديها الكثير من الميزات الإضافية الرائعة (مثل الإشارات المرجعية القادرة على حفظ حالة الشبكة الحالية) وتعيين المرشحات الذكية.
دعنا نبدأ.
أولاً ، تحتاج إلى إجراء بعض التغييرات في الوحدة. فيما يلي كيفية القيام بذلك:
1) إنشاء ملف جديد للإعلان عن المكونات الضرورية:
> app / code / Vendor / Rules / etc / di.xml
<؟ xml version = "1.0"؟>
<config xmlns: xsi = "https://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: ObjectManager / etc / config.xsd">
<virtualType name = "VendorRulesRuleGridDataProvider" type = "Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ DataProvider">
<الحجج>
<اسم الوسيطة = "collection" xsi: type = "object" shared = "false"> البائع \ القواعد \ النموذج \ ResourceModel \ Rule \ Collection </argument>
<اسم الوسيطة = "filterPool" xsi: type = "object" shared = "false"> VendorRulesRuleGridFilterPool </argument>
</ الحجج>
</virtualType>
<virtualType name = "VendorRulesRuleGridFilterPool" type = "Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ FilterPool">
<الحجج>
<اسم الوسيطة = "appliers" xsi: type = "array">
<item name = "normal" 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>
</ الحجج>
</virtualType>
<type name = "Vendor \ Rules \ Model \ ResourceModel \ Rule \ Grid \ Collection">
<الحجج>
<اسم الوسيطة = "mainTable" xsi: type = "string"> vendor_rules </argument>
<اسم الوسيطة = "eventPrefix" xsi: type = "string"> vendor_rules_rule_grid_collection </argument>
<اسم الوسيطة = "eventObject" xsi: type = "string"> rule_grid_collection </argument>
<اسم الوسيطة = "ResourceModel" xsi: type = "string"> البائع \ القواعد \ النموذج \ ResourceModel \ Rule </argument>
</ الحجج>
</type>
<type name = "Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ CollectionFactory">
<الحجج>
<اسم الوسيطة = "مجموعات" xsi: type = "array">
<item name = "vendor_rules_rule_listing_data_source" xsi: type = "string"> البائع \ القواعد \ النموذج \ ResourceModel \ Rule \ Grid \ Collection </item>
</argument>
</ الحجج>
</type>
</config>
VendorRulesRuleGridDataProvide - يوفر هذا النوع الظاهري بيانات لشبكة قواعد واجهة المستخدم. يضيف VendorRulesRuleGridFilterPool بدوره وظيفة تصفية تتيح لك إضافة / تعديل أي عوامل تصفية موجودة.
ملاحظة ، لجعل الشبكة تعمل بشكل صحيح مع هذه المجموعة المعينة ، تحتاج إلى إضافتها إلى قائمة جميع المجموعات المتاحة. للقيام بذلك ، أضف vendor_rules_rule_listing_data_source مع فئة المجموعة القائمة على القيمة: Vendor \ Rules \ Model \ ResourceModel \ Rule \ Grid \ Collection إلى Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ CollectionFactory groups.
2) بالنسبة لشبكة UI ، نحتاج إلى مجموعة منفصلة تمثل واجهة `Magento \ Framework \ Api \ Search \ SearchResultInterface` .
يحتوي على الطرق القياسية التي ستتيح لك العمل مع الشبكة والفلاتر. يمكن تخصيص هذا الفصل وفقًا لاحتياجاتك الشخصية عن طريق تغيير طريقة عمل البحث بالمجموعات .
> app / code / Vendor / Rules / Model / ResourceModel / Rule / Grid / Collection.php
<؟ php
Vendor \ Rules \ Model \ ResourceModel \ Rule \ Grid؛
استخدام Vendor \ Rules \ Model \ ResourceModel \ Rule \ Collection كـ RuleCollection ؛
استخدم Magento \ Framework \ Api \ Search \ SearchResultInterface ؛
استخدم Magento \ Framework \ Api \ SearchCriteriaInterface ؛
استخدم Magento \ Framework \ Data \ Collection \ Db \ FetchStrategyInterface ؛
استخدم Magento \ Framework \ Data \ Collection \ EntityFactory ؛
استخدام Magento \ Framework \ Event \ ManagerInterface ؛
استخدم Magento \ Framework \ Model \ ResourceModel \ Db \ AbstractDb ؛
استخدام Psr \ Log \ LoggerInterface ؛
تقوم مجموعة فئة بتوسيع RuleCollection بتنفيذ SearchResultInterface
{
/ **
* التجمعات
*
*var \ Magento \ Framework \ Search \ AggregationInterface
* /
التجميعات المحمية بالدولار الأمريكي ؛
/ **
* البناء
*
*param \ Magento \ Framework \ Data \ Collection \ EntityFactory $ elementFactory
*param \ Psr \ Log \ LoggerInterface $ logger
*param \ Magento \ Framework \ Data \ Collection \ Db \ FetchStrategyInterface $ fetchStrategy
*param \ Magento \ Framework \ Event \ ManagerInterface $ eventManager
*param $ mainTable
*param $ eventPrefix
*param $ eventObject
*param $ ResourceModel
*param $ model
*param $ connection
*param \ Magento \ Framework \ Model \ ResourceModel \ Db \ AbstractDb $ Resource
* /
الوظيفة العامة __construct (
EntityFactory $ كيان مصنع ،
مسجل LoggerInterface $ ،
FetchStrategyInterface $ fetchStrategy ،
ManagerInterface $ eventManager ،
$ mainTable،
eventPrefix $ ،
eventObject ،
نموذج $ ResourceModel ،
$ model = 'Magento \ Framework \ View \ Element \ UiComponent \ DataProvider \ Document'،
اتصال $ = لا شيء ،
AbstractDb $ Resource = خالية
) {
الأصل :: __ build ($ elementFactory ، $ logger ، $ fetchStrategy ، $ eventManager ، $ connection ، $ Resource) ؛
$ this -> _ eventPrefix = $ eventPrefix ؛
$ this -> _ eventObject = $ eventObject ؛
$ this -> _ init ($ model، $ resourcesModel)؛
$ this-> setMainTable ($ mainTable) ؛
}
/ **
*return \ Magento \ Framework \ Search \ AggregationInterface
* /
getAggregations وظيفة عامة ()
{
إرجاع $ this-> التجميعات ؛
}
/ **
*param \ Magento \ Framework \ Search \ AggregationInterface $ تجميعات
*return $ هذا
* /
مجموعة الوظائف العامة: التجميعات (التجميعات بالدولار الأمريكي)
{
$ this-> التجميعات = التجميعات بالدولار الأمريكي ؛
}
/ **
* استرجاع جميع المعرفات للتحصيل
* التوافق مع الإصدارات السابقة مع مجموعة EAV
*
*param int $ حد
*param int $ offset
*return مجموعة
* /
getAllIds الوظيفة العامة ($ limit = null، $ offset = null)
{
إرجاع $ this-> getConnection () -> fetchCol ($ this -> _ getAllIdsSelect ($ limit، $ offset)، $ this -> _ bindParams) ؛
}
/ **
* احصل على معايير البحث.
*
*return \ Magento \ Framework \ Api \ SearchCriteriaInterface | فارغة
* /
getSearchCriteria () الوظيفة العامة
{
عودة فارغة ؛
}
/ **
* تعيين معايير البحث.
*
*param \ Magento \ Framework \ Api \ SearchCriteriaInterface $ searchCriteria
*return $ هذا
*SuppressWarnings (PHPMD.UnusedFormalParameter)
* /
تعيين الوظيفة العامة (SearchCriteriaInterface $ searchCriteria = خالية)
{
إرجاع $ هذا ؛
}
/ **
* احصل على العدد الإجمالي.
*
*return int
* /
وظيفة عامة getTotalCount ()
{
إرجاع $ this-> getSize ()؛
}
/ **
* تعيين العدد الإجمالي.
*
*param int $ totalCount
*return $ هذا
*SuppressWarnings (PHPMD.UnusedFormalParameter)
* /
تعيين الوظيفة العامة توتالكونت ($ totalCount)
{
إرجاع $ هذا ؛
}
/ **
* قائمة مجموعة العناصر.
*
*param \ Magento \ Framework \ Api \ ExtensibleDataInterface [] $ items
*return $ هذا
*SuppressWarnings (PHPMD.UnusedFormalParameter)
* /
مجموعة الوظائف العامة (مجموعة عناصر $ = خالية)
{
إرجاع $ هذا ؛
}
}
؟>3) قم بتعديل المجموعة الرئيسية بالطريقة الموضحة أدناه (من المهم ، حيث أن مجموعتنا المخصصة موروثة منها). يجب عليك إجراء التغييرات التالية:
> app / code / Vendor / Rules / Model / ResourceModel / Rule / Collection.php
<؟ php
بائع مساحة الاسم \ Rules \ Model \ ResourceModel \ Rule ؛
تمتد مجموعة الفئة \ Magento \ Rule \ Model \ ResourceModel \ Rule \ Collection \ AbstractCollection
{
/ **
* تعيين نموذج الموارد وتحديد مجال التعيين
*
*return الفراغ
* /
وظيفة محمية _construct ()
{
$ this -> _ init ('Vendor \ Rules \ Model \ Rule'، 'Vendor \ Rules \ Model \ ResourceModel \ Rule')؛
}
/ **
* جمع عامل التصفية حسب التاريخ المحدد.
* جمع عامل التصفية إلى القواعد النشطة فقط.
*
* سلسلةparam | خالية $ الآن
*use $ this-> addStoreGroupDateFilter ()
*return $ هذا
* /
تعيين الوظيفة العامة setValidationFilter ($ now = null)
{
إذا (! $ this-> getFlag ('validation_filter')) {
$ this-> addDateFilter ($ الآن)؛
$ this-> addIsActiveFilter ()؛
$ this-> setOrder ('sort_order'، self :: SORT_ORDER_DESC)؛
$ this-> setFlag ('validation_filter'، true)؛
}
إرجاع $ هذا ؛
}
/ **
* من تاريخ أو حتى تاريخ التصفية
*
*param $ الآن
*return $ هذا
* /
addDateFilter الوظيفة العامة ($ now)
{
$ this-> getSelect () -> أين (
"from_date فارغ أو from_date <=؟" ،
$ الآن
) -> أين (
'to_date فارغ أو to_date> =؟'،
$ الآن
) ؛
إرجاع $ هذا ؛
}
}
؟>
4) بعد ذلك ، قم بإزالة الترميز القديم من تخطيط الشبكة وإضافة قائمة واجهة المستخدم هناك:
> app / code / Vendor / Rules / view / adminhtml / layout / vendor_rules_example_rule_index.xml
<؟ xml version = "1.0"؟>
<page xmlns: xsi = "https://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: View / Layout / etc / page_configuration.xsd">
<الجسم>
<اسم referenceBlock = "القائمة">
<طريقة الإجراء = "setActive">
<اسم الوسيطة = "itemId" xsi: type = "string"> قواعد_المورد :: vendor_rules </argument>
</action>
</referenceBlock>
<referenceBlock name = "page.title">
<طريقة الإجراء = "setTitleClass">
<اسم الوسيطة = "class" xsi: type = "string"> معقد </ الوسيطة>
</action>
</referenceBlock>
<referenceContainer name = "content">
<uiComponent name = "vendor_rules_rule_listing" />
</referenceContainer>
</body>
</page>في الأساس ، نضيف فقط " vendor_rules_rule_listing " المذكورة في محتوى الصفحة (الإجراء الرئيسي) ، ونغير حالة قائمة منتجاتنا إلى "نشطة" ، وقم بتعيين فئة العنوان.
5) في الخطوة التالية ، نقوم بصندوق قائمة واجهة المستخدم ، والتي سيتم وضعها هنا:
> app / code / Vendor / Rules / view / adminhtml / ui_component / vendor_rules_rule_listing.xml
<؟ xml version = "1.0"؟>
<إدراج xmlns: xsi = "https://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: Ui / etc / ui_configuration.xsd">
<اسم الوسيطة = "data" xsi: type = "array">
<item name = "js_config" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing_data_source </item>
<item name = "deps" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing_data_source </item>
</item>
<item name = "spinner" xsi: type = "string"> vendor_rules_rule_columns </item>
<اسم العنصر = "أزرار" xsi: type = "array">
<اسم العنصر = "إضافة" xsi: type = "array">
<item name = "name" xsi: type = "string"> إضافة </item>
<item name = "label" xsi: type = "string" translate = "true"> إضافة قاعدة جديدة </ item
<item name = "class" xsi: type = "string"> أساسي </item>
<item name = "url" xsi: type = "string"> * / * / newaction </item>
</item>
</item>
</argument>
<dataSource name = "vendor_rules_rule_listing_data_source">
<اسم الوسيطة = "dataProvider" xsi: type = "configurableObject">
<اسم الوسيطة = "class" xsi: type = "string"> VendorRulesRuleGridDataProvider </argument>
<اسم الوسيطة = "name" xsi: type = "string"> vendor_rules_rule_listing_data_source </argument>
<اسم الوسيطة = "primaryFieldName" xsi: type = "string"> rule_id </argument>
<اسم الوسيطة = "requestFieldName" xsi: type = "string"> rule_id </argument>
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "update_url" xsi: type = "url" path = "mui / index / render" />
</item>
</argument>
</argument>
<اسم الوسيطة = "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>
<اسم الحاوية = "List_top">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "template" xsi: type = "string"> ui / grid / toolbar </item>
<item name = "stickyTmpl" xsi: type = "string"> ui / grid / sticky / toolbar </item>
</item>
</argument>
<اسم الإشارة المرجعية = "الإشارات المرجعية">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "storageConfig" xsi: type = "array">
<item name = "namespace" xsi: type = "string"> vendor_rules_rule_listing </item>
</item>
</item>
</argument>
</bookmark>
<اسم المكون = "عمود_التحكم">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<اسم العنصر = "أعمدة البيانات" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns </item>
</item>
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / controls / أعمدة </item>
<item name = "displayArea" xsi: type = "string"> dataGridActions </item>
</item>
</argument>
</component>
<اسم المرشحات = "list_filters">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "columnProvider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns </item>
<item name = "storageConfig" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks </item>
<item name = "namespace" xsi: type = "string"> current.filters </item>
</item>
<اسم العنصر = "قوالب" xsi: type = "array">
<اسم العنصر = "عوامل التصفية" xsi: type = "array">
<اسم العنصر = "حدد" xsi: type = "array">
<item name = "component" xsi: type = "string"> Magento_Ui / js / form / element / ui-select </item>
<item name = "template" xsi: type = "string"> واجهة المستخدم / الشبكة / الفلاتر / العناصر / ui-select </item>
</item>
</item>
</item>
<item name = "childDefaults" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.listing_filters </item>
<اسم العنصر = "يستورد" xsi: type = "array">
<item name = "visual" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns. $ {$ .index}: مرئية </item>
</item>
</item>
</item>
<item name = "Observers" xsi: type = "array">
<item name = "column" xsi: type = "string"> عمود </item>
</item>
</argument>
</filters>
<اسم الصفحة = "list_paging">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "storageConfig" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks </item>
<item name = "namespace" xsi: type = "string"> current.paging </item>
</item>
<item name = "selectProvider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns.ids </item>
</item>
</argument>
</paging>
</container>
<اسم الأعمدة = "vendor_rules_rule_columns">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "storageConfig" xsi: type = "array">
<item name = "provider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top.bookmarks </item>
<item name = "namespace" xsi: type = "string"> الحالي </item>
</item>
</item>
</argument>
<selectionsColumn name = "ids">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "resizeEnabled" xsi: type = "boolean"> خطأ </item>
<item name = "resizeDefaultWidth" xsi: type = "string"> 55 </item>
<item name = "indexField" xsi: type = "string"> rule_id </item>
</item>
</argument>
</selectionsColumn>
<اسم العمود = "rule_id">
<اسم الوسيطة = "data" xsi: type = "array">
<item name = "js_config" xsi: type = "array">
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / عمود / عمود </item>
</item>
<اسم العنصر = "config" xsi: type = "array">
<item name = "filter" xsi: type = "string"> textRange </item>
<item name = "dataType" xsi: type = "string"> نص </item>
<item name = "sorting" xsi: type = "string"> تصاعدي </item>
<item name = "align" xsi: type = "string"> يسار </item>
<item name = "label" xsi: type = "string" translate = "true"> ID </item>
<item name = "sortOrder" xsi: type = "number"> 1 </item>
</item>
</argument>
</column>
<اسم العمود = "الاسم">
<اسم الوسيطة = "data" xsi: type = "array">
<item name = "js_config" xsi: type = "array">
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / عمود / عمود </item>
</item>
<اسم العنصر = "config" xsi: type = "array">
<item name = "filter" xsi: type = "string"> نص </item>
<item name = "dataType" xsi: type = "string"> نص </item>
<item name = "align" xsi: type = "string"> يسار </item>
<item name = "label" xsi: type = "string" translate = "true"> الاسم </item>
</item>
</argument>
</column>
<اسم العمود = "is_active">
<اسم الوسيطة = "data" xsi: type = "array">
<item name = "options" xsi: type = "array">
<item name = "active" xsi: type = "array">
<item name = "value" xsi: type = "string"> 1 </item>
<item name = "label" xsi: type = "string" translate = "true"> نشطة </item>
</item>
<item name = "inactive" xsi: type = "array">
<item name = "value" xsi: type = "string"> 0 </item>
<item name = "label" xsi: type = "string" translate = "true"> غير نشط </ em>
</item>
</item>
<اسم العنصر = "config" xsi: type = "array">
<item name = "filter" xsi: type = "string"> حدد </item>
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / عمود / حدد </item>
<item name = "editor" xsi: type = "string"> حدد </item>
<item name = "dataType" xsi: type = "string"> حدد </item>
<item name = "label" xsi: type = "string" translate = "true"> نشط </ em>
<item name = "sortOrder" xsi: type = "number"> 65 </item>
</item>
</argument>
</column>
<اسم العمود = "sort_order">
<اسم الوسيطة = "data" xsi: type = "array">
<item name = "js_config" xsi: type = "array">
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / عمود / عمود </item>
</item>
<اسم العنصر = "config" xsi: type = "array">
<item name = "filter" xsi: type = "string"> نص </item>
<item name = "dataType" xsi: type = "string"> number </item>
<item name = "align" xsi: type = "string"> يسار </item>
<item name = "label" xsi: type = "string" translate = "true"> الأولوية </item>
</item>
</argument>
</column>
<اسم العمود = "from_date" class = "Magento \ Ui \ Component \ List \ Columns \ Date">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "sorting" xsi: type = "string"> وصف </ em>
<item name = "filter" xsi: type = "string"> dateRange </item>
<item name = "dataType" xsi: type = "string"> التاريخ </item>
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / الأعمدة / التاريخ </item>
<item name = "label" xsi: type = "string" translate = "true"> ابدأ </item>
</item>
</argument>
</column>
<اسم العمود = "to_date" class = "Magento \ Ui \ Component \ List \ Columns \ Date">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "sorting" xsi: type = "string"> وصف </ em>
<item name = "filter" xsi: type = "string"> dateRange </item>
<item name = "dataType" xsi: type = "string"> التاريخ </item>
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / الأعمدة / التاريخ </item>
<item name = "label" xsi: type = "string" translate = "true"> End </item>
</item>
</argument>
</column>
<ActionsColumn name = "Actions" class = "Vendor \ Rules \ Ui \ Component \ List \ Column \ RuleActions">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "indexField" xsi: type = "string"> rule_id </item>
<item name = "urlEntityParamName" xsi: type = "string"> rule_id </item>
<item name = "sortOrder" xsi: type = "number"> 70 </item>
</item>
</argument>
</actionsColumn>
</columns>
<اسم الحاوية = "مثبت">
<اسم الوسيطة = "data" xsi: type = "array">
<اسم العنصر = "config" xsi: type = "array">
<item name = "component" xsi: type = "string"> Magento_Ui / js / grid / sticky / sticky </item>
<item name = "toolbarProvider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.listing_top </item>
<item name = "ListProvider" xsi: type = "string"> vendor_rules_rule_listing.vendor_rules_rule_listing.vendor_rules_rule_columns </item>
</item>
</argument>
</container>
</listing>
تحتوي قائمة "مصدر البيانات" على ارتباط إلى " dataProvider " - النوع الذي أنشأناه في " di.xml ". يحتوي على بيانات الإدخال الضرورية للشبكة.
من هنا ، نحتاج إلى تحديد المفتاح المُودع - في حالتنا هو " rule_id ".
بالإضافة إلى ذلك ، يمكنك أيضًا إضافة الأزرار المخصصة ، ما عليك سوى وصفها في قسم "الأزرار". في مثالنا ، أضفنا زر "إضافة" القياسي بعنوان " * / * / newaction " (* في المسار يتوافق مع المعنى الحالي).
يحتوي " اسم الحاوية =" List_top " على بعض مكونات القائمة الإضافية: المرشحات ، ترقيم الصفحات ، إلخ. يمكنك تغييرها وفقًا لمتطلباتك الشخصية.
يحتوي " اسم الأعمدة =" vendor_rules_rule_columns " على العمود المتماثل تقريبًا ، كما هو الحال في الشبكة الافتراضية. الاختلاف الوحيد ذو المعنى هو عمود " ActionsColumn " الجديد الذي يقدم مجموعة من الإجراءات: التحرير والحذف. يمكن أيضًا تمديد هذه الإجراءات ، إذا لزم الأمر.
كما لاحظت على الأرجح ، يحتوي هذا العمود على فئة جديدة. دعنا نتعلم كيف يمكننا إنشائه:
> التطبيق / الكود / البائع / القواعد / واجهة المستخدم / المكون / القائمة / العمود / RuleActions.php
<؟ php
Vendor \ Rules \ Ui \ Component \ List \ Column؛
يمتد class RuleActions \ Magento \ Ui \ Component \ List \ Columns \ Column
{
/ **
* مسار Url للتحرير
*
*var سلسلة
* /
const URL_PATH_EDIT = 'vendor_rules / example_rule / edit' ،
/ **
* مسار URL للحذف
*
*var سلسلة
* /
const URL_PATH_DELETE = 'vendor_rules / example_rule / delete' ،
/ **
* منشئ URL
*
*var \ Magento \ Framework \ UrlInterface
* /
محمية urlBuilder $؛
/ **
* البناء
*
*param \ Magento \ Framework \ UrlInterface $ urlBuilder
*param \ Magento \ Framework \ View \ Element \ UiComponent \ ContextInterface $ Context
*param \ Magento \ Framework \ View \ Element \ UiComponentFactory $ uiComponentFactory
*param مجموعة $ مكونات
*param array $ data
* /
الوظيفة العامة __construct (
\ Magento \ Framework \ UrlInterface $ urlBuilder ،
\ Magento \ Framework \ View \ Element \ UiComponent \ ContextInterface $ سياق ،
\ Magento \ Framework \ View \ Element \ UiComponentFactory $ uiComponentFactory ،
مجموعة مكونات $ = [] ،
مجموعة بيانات $ = []
) {
$ this-> urlBuilder = $ urlBuilder؛
الأصل :: __ build ($ Context، $ uiComponentFactory، $ component، $ data)؛
}
/ **
* تحضير مصدر البيانات
*
*param array $ dataSource
*return مجموعة
* /
تحضير الوظيفة العامة
{
if (! isset ($ dataSource ['data'] ['items'])) {
إرجاع $ dataSource؛
}
foreach ($ dataSource ['data'] ['items'] كـ & $ item) {
إذا (! isset ($ item ['rule_id'])) {
استمر؛
}
$ item [$ this-> getData ('name')] = [
'تحرير' => [
'href' => $ this-> urlBuilder-> getUrl (
ثابت :: URL_PATH_EDIT ،
[
'id' => $ item ['rule_id']،
]
) ،
"التسمية" => __ ("تحرير") ،
] ،
"حذف" => [
'href' => $ this-> urlBuilder-> getUrl (
ثابت :: URL_PATH_DELETE ،
[
'id' => $ item ['rule_id']،
]
) ،
"تسمية" => __ ("حذف") ،
"تأكيد" => [
'title' => __ ('Delete "$ {$. $ data.name}")،
'message' => __ ('هل أنت متأكد أنك تريد حذف القاعدة "$ {$. $ data.name}"؟')،
] ،
] ،
] ؛
}
إرجاع $ dataSource؛
}
}
؟>هذه الفئة هي المسؤولة عن معالجة الإجراءات من الشبكة. من هنا ، يمكن تغيير عناوين URL أو اسم المعلمة المرسلة. في حالتنا ، المفتاح هو rule_id (يتم إرساله تحت اسم "id" لتسهيل فهم قيمته).
تبدو هكذا:
إذا كنت قد فعلت كل شيء بالطريقة الصحيحة ، فيجب أن تبدو شبكتك كما يلي:
كما نرى من المثال ، من السهل جدًا تحويل الشبكة القياسية الحالية إلى واجهة مستخدم. بالإضافة إلى توسيع وظائف الشبكة القياسية ، فإنه يسمح لك أيضًا بتبسيط العمل مع هذا الجزء من وظيفة Magento 2.
ملاحظة : في المقالة التالية من السلسلة ، سنقوم بشرح إمكانية إضافة كتلة - أفعال وأعمدة إضافية.
ابقوا متابعين!