[แก้ไข 3 ต.ค. 2018]
อัปเดตสำหรับลิงก์ไปยัง devdocs: 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
2.1 - https://devdocs.magento.com/guides/v2.1/ui_comp_guide/components/ui-listing-grid.html
2.2 - https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-listing-grid.html
[แก้ไข 21 มกราคม 2016]
ตั้งแต่วันที่ 20/01/2559 magento2 devdocs ได้รับการอัปเดตด้วยเอกสารเพิ่มเติมขององค์ประกอบ UI ฉันยังไม่ได้ตรวจสอบมันอย่างกว้างขวาง แต่พวกเขาอาจมีข้อมูลมากกว่าคำตอบที่ฉันให้เมื่อไม่กี่วันที่ผ่านมาดังนั้นเพื่อประโยชน์ของเวลาของคุณคุณอาจต้องการดู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 />ในรายการหน้าเว็บแบบ cms ที่เพิ่มคอนเทนเนอร์ "เหนียว" ด้วยเหตุผลบางประการ
<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 (ซึ่งฉันคิดว่าถูกแปลงเป็นแฮช javascript) providervalue ประกอบด้วยชื่อรายการที่ใช้ในไฟล์เลย์เอาต์และชื่อแหล่งข้อมูลที่ไม่ซ้ำที่จะใช้ในภายหลัง ในรายชื่อเหล่านั้นฉันเช็คอินในวีโอไอพีproviderและdepsเหมือนกัน ฉันไม่แน่ใจว่าสิ่งที่ใช้ในการมีความแตกต่างนี้ spinnerใช้ชื่อของโหนดที่กำหนดคอลัมน์ของตาราง buttonsอนุญาตให้เพิ่มปุ่มด้านบนของตาราง ในกรณีส่วนใหญ่มันจะเป็นเพียงAdd newปุ่ม ปุ่มมีองค์ประกอบน้อย:nameใช้เป็นรหัสองค์ประกอบlabelคือสิ่งที่ปุ่มบอกว่าclassเป็นคลาสปุ่มและurlเป็นลิงก์ที่ชี้ไป Asteriks จะถูกแทนที่ด้วยส่วนของ URL ปัจจุบัน เป็นไปได้อื่น ๆ<item />โหนดปุ่มคือ: id, title, type(รีเซ็ตส่งหรือปุ่ม) onclick(แทนก็มีความสำคัญ)url , , องค์ประกอบปุ่มมีการแสดงผลตามคลาสstylevaluedisabledMagento\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 เกี่ยวข้องกับคอลัมน์หลักของฐานข้อมูลและตัวแปรในคำขอ http พวกเขาอาจจะเท่ากัน แต่ไม่ได้มีไปรายชื่อหน้า CMS ใช้เป็นและเป็น อ้างถึงจุดเริ่มต้นที่ ajax เรียกใช้การกรองและการเรียงลำดับที่จะส่ง อาร์กิวเมนต์ที่สองในอ้างถึงไฟล์ javascript ที่จัดการส่วน js ของการส่งและการประมวลผลการเรียก ajax สำหรับกริด ไฟล์เริ่มต้นคือdi.xmlprimaryFieldNamerequestFieldNamepage_idprimaryFieldNameidrequestFieldNameupdate_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ตามรูปแบบ [listing_name_from_layout] [listing_name_from_layout]. [listing_columns_node_name] (เหมือนในรายการโหนด / อาร์กิวเมนต์ / สปินเนอร์) componentหมายถึง js ไฟล์ที่แสดงตารางและจากจุดเริ่มต้นที่ใช้แม่แบบ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/template(ค่าเริ่มต้น: Magento/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>
โหนดนี้เพิ่มการค้นหาข้อความแบบเต็มในหน้า มันตั้งอยู่เหนือตารางเป็นช่องป้อนข้อความเดียวที่มี "ค้นหาโดยคำหลัก" เป็นตัวยึดตำแหน่ง ฉันไม่แน่ใจว่าตัวเลือกใดบ้างที่เป็นไปได้ที่นี่เนื่องจากฉันไม่ได้เล่นมากนัก แต่ listing_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ตามโครงสร้างที่คล้ายกับโหนดก่อนหน้าดังนั้น [listing_name_from_layout] [listing_name_from_layout] [listing_columns_node_name] storegeConfigไปเหมือน [listing_name_from_layout]. [listing_name_from_layout]. [container_node_name] [bookmark_node_name] ใน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โหนดแรกจะเป็น ommited เนื่องจากมีการระบุ URL ต่อสถานะตามคลาสที่กำหนดในargumentโหนดที่สอง คลาสควรใช้อินเทอร์เฟซ 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>
และแอตทริบิวต์ name จะใช้ในโหนดอื่นเมื่ออ้างถึง ลูกคนแรกคือ
<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- ประเภทตัวกรองของคอลัมน์ ใช้ในบล็อกตัวกรอง ค่าที่ใช้ได้คือ: ข้อความ, เลือก, dateRange หากใช้การเลือก<item name="options">...</item>จะถูกใช้เป็นคลาสที่มีตัวเลือกสำหรับการเลือกตัวกรอง
component- กำหนดไฟล์ js ซึ่งใช้ในการเรนเดอร์คอลัมน์ Magento/Ui/view/base/web/js/grid/columns/*ตัวเลือกที่มีอยู่ใน select ถูกจัดเตรียมไว้เป็นตัวกรองถูกตั้งค่าให้เลือก สำหรับตัวกรองข้อความค่านี้ไม่จำเป็น
dataType- ให้ข้อมูลประเภทข้อมูลที่ใช้สำหรับค่าคอลัมน์ สำหรับการเลือกใช้ select เลือกเช่นกันสำหรับ dateRange use date
bodyTmpl- กำหนดไฟล์ html ที่น่าพิศวงใช้เพื่อเรนเดอร์เซลล์ โดยค่าเริ่มต้นจะใช้ ui / grid / cells / text ( 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) เพื่อสิ้นสุดตารางเราจำเป็นต้องกำหนดองค์ประกอบบางอย่างใน บริษัท / โมดูล / etc / 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 และจะแก้ไขไม่ให้รวบรวม แต่เป็นคลาส GridCollection 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>