Magento2 Grid表格UI组件1

2019年1月8日浏览量 46 8 min read

在这篇博客中，我们将看到如何为magento2后台创建网格组件。

Magento2引入了一个新的UIComponents概念，这使我们能够使用xml配置文件来操作ui组件。点击这里查看更多细节

要实现网格，请按照以下步骤操作

首先修改控制器

<?php
namespace Magease\Hello\Controller\Adminhtml\World;
 
class Index extends \Magento\Backend\App\Action
{
    protected $resultPageFactory = false;
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Magease_Hello::hello_world_test1');
        $resultPage->addBreadcrumb(__('Hello'), __('Hello'));
        $resultPage->addBreadcrumb(__('World'), __('World'));
        $resultPage->getConfig()->getTitle()->prepend(__('Hello World'));
        return $resultPage;
    }
}

接下来将其添加到布局中

Magease\Hello\view\adminhtml\layout\hello_world_index.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="hello_world_grid"/>
        </referenceContainer>
    </body>
</page>

我们之前已经定义了“uiComponent”，这是一个新的指令。我们需要创建一个在xml中定义的同名uiComponent文件

接下来添加

Magease\Hello\view\adminhtml\ui_component\hello_world_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="context" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
        <argument name="namespace" xsi:type="string">hello_world_grid</argument>
        <!-- this should be same as the file name or uicomponentname -->
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">hello_world_grid.magease_hello_grid_data_source</item>
            <!-- the format here is uicomponentname.datasourcename -->
            <item name="deps" xsi:type="string">hello_world_grid.magease_hello_grid_data_source</item>
            <!-- the format here is uicomponentname.datasourcename -->
        </item>
        <item name="spinner" xsi:type="string">hello_world_columns</item>
        <!-- the format here is columns name defined below -->
        <item name="buttons" xsi:type="array">
            <!-- here we can add buttons -->
            <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>
    <dataSource name="magease_hello_grid_data_source">
        <!-- this is data source name, this is used at many places -->
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">magease_hello_grid_data_source</argument>
            <!-- the same data source name as above -->
            <argument name="primaryFieldName" xsi:type="string">magease_hello_test_id</argument>
            <!-- our model's primary key -->
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <!-- the field used in ajax url's of grid. just define this as id -->
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <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>
                </item>
            </argument>
            <!-- keep above same always -->
        </argument>
    </dataSource>
    <columns name="hello_world_columns">
        <!-- this is columns section name, used above in spinner -->
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">entity_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <!-- this is for the first column which allows to select multiple columns -->
        <!-- below are different column types based on our models -->
        <column name="magease_hello_test_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">ID</item>
                </item>
            </argument>
        </column>
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                </item>
            </argument>
        </column>
        <column name="creation_time" 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">Purchase Date</item>
                </item>
            </argument>
        </column>
        <column name="update_time" 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">Purchase Date</item>
                </item>
            </argument>
        </column>
        <!--
            <column name="is_active" 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">Purchase Date</item>
                    </item>
                </argument>
            </column>
            actions
        -->
    </columns>
</listing>

请参阅xml中的注释以查看每个标记的含义
另外，为了获得有关网格的更多详细信息，您可以看到使用这些组件的核心模块，如Magento_Customer，Magento_Sales，Magento_CMS

接下来添加文件

Magease\Hello\etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 
    <virtualType name="Magease\Hello\Model\Resource\Test\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">magease_hello_test</argument>
            <argument name="resourceModel" xsi:type="string">Magease\Hello\Model\ResourceModel\Test</argument>
        </arguments>
    </virtualType>
 
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="magease_hello_grid_data_source" xsi:type="string">Magease\Hello\Model\Resource\Test\Grid\Collection</item>
            </argument>
        </arguments>
    </type>

</config>

这个文件很重要，这实际上将数据源连接到我们正在使用的网格模型中。

在这个过程中，当点击我们的菜单项时，我们应该显示管理网格。

博主： Magease寰云网络

发布在： Magento2 模块开发 Magento2 UI 部件开发

0 评论

你喜欢这篇文章么？

Comments

发表评论，留下你的足迹

我们不会公开你的邮箱地址

Magento2 Grid表格UI组件1

搜索文章

分类

标签

最新文章