8.如何添加后台数据网格

Magento 2 模块开发基础部分 - 目录

本章节讨论Magento 2后台数据网格。如你所知Magento 2 网格是一种数据表格，用来显示数据库中对应表的数据，并提供了排序、筛选、删除、更新数据的功能。示例网格可以查看后台产品列表和用户列表。

Magento 2 提供了两种创建网格的方式：使用布局文件和使用组件（component）。接下来会讨论他们的实现细节。在此之前请确保已经创建了前几章节的简单模块，并添加了后台菜单和路由文件，这些在本节都会用到。

创建管理网格步骤如下：

1 创建数据表
2 创建后台路由
3 添加后台导航菜单项
4 添加控制器
5 使用组件创建网格
6 使用布局文件创建网格

第一步创建数据表

编辑安装配置文件 app/code/Aqrun/HelloWorld/Setup/InstallSchema.php

这个文件只会运行一次在模块安装时。创建数据表的代码：

startSetup();
        if(!$installer->tableExists($this->_postTable)){
            $this->createTable($installer);
        }
        $installer->endSetup();
    }

    protected function createPostTable($installer)
    {
        $table = $installer->getConnection()->newTable(
            $installer->getTable($this->_postTable)
        )->addColumn(
            'post_id', T::TYPE_INTEGER, null,
            ['identity'=>true, 'nullable' => false, 'primary' => true, 'unsigned' => true],
            'Post ID'
        )->addColumn('name', T::TYPE_TEXT, 255, ['nullable' => false], 'Post Name')
        ->addColumn('url_key', T::TYPE_TEXT, 255, [], 'Post URL Key')
        ->addColumn('post_content', T::TYPE_TEXT, '64k', [], 'Post Post Content')
        ->addColumn('tags', T::TYPE_TEXT, 255, [], 'Post Tags')
        ->addColumn('status', T::TYPE_INTEGER, 1, [], 'Post status')
        ->addColumn('featured_image', T::TYPE_TEXT, 255, [], 'Post Featured Image')
        ->addColumn('created_at', T::TYPE_TIMESTAMP, null,
            ['nullable' => false, 'default' => T::TIMESTAMP_INI],
            'Created At'
        )->addColumn('updated_at', T::TYPE_TIMESTAMP, null,
            ['nullable' => false, 'default' => T::TIMESTAMP_INIT_UPDATE],
            'Updated At'
        );
        $installer->getConnection->createTable($table);

        $installer->getConnection->addIndex(
            $installer->getTable($this->_postTable),
            $installer->getIdxName(
                $installer->getTable($this->_postTable),
                ['name', 'url_key', 'post_content', 'tags', 'featured_image'],
                \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
            ),
            ['name', 'url_key', 'post_content', 'tags', 'featured_image'],
            \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
        );
    }
}

第二步添加后台路由

文件： app/code/Aqrun/HelloWorld/etc/adminhtml/routes.xml

第三步添加导航菜单

使用的路由名称是 aqrun_helloworld,那后台页面链接就会是 aqrun_helloworld/post/index

如何添加查看后台菜单部分内容

第四步添加控制器

文件： app/code/Aqrun/HelloWorld/Controller/Adminhtml/Post/Index.php

resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Posts'));
        return $resultPage;
    }
}

第五步方式一：使用组件创建后台网格

5.1 定义数据资源

创建依赖注入文件 di.xml 并定义数据资源，为我们的网格提供的数据关联模型。

文件： app/code/Aqrun/HelloWorld/etc/di.xml

代码：


    
        
            
                
                    Aqrun\HelloWorld\Model\ResourceModel\Post\Grid\Collection
                
            
        
    
    
        
            aqrun_helloworld_post
            Aqrun\HelloWorld\Model\ResourceModel\Post

这个文件为数据表定义了定义了 Post 集合类参数是表名称和资源模型（ResouceModel）。节点说明：

type节点是编辑系统的CollectionFactory类根据参数会给他的变量collections增加一个资源键=>值 ['aqrun_helloworld_post_listing_data_source' => 'Aqrun\HelloWorld\Model\ResourceModel\Post\Grid\Collection']。
virtualType 节点是定义一个类 Aqrun\HelloWorld\Model\ResourceModel\Post\Grid\Collection 类继承自 Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult。

在下面的布局文件中网格会调用这个数据资源键来获取数据。

5.2 创建布局文件

控制器动作是 aqrun_helloworld/post/index, 对应的布局文件就是 aqrun_helloworld_post_index.xml

文件： app/code/Aqrun/HelloWorld/view/adminhtml/layout/aqrun_helloworld_post_index.xml

代码：

当前页面内容通过布局文件中定义的 uiComponet 节点获取对应组件

5.3 创建组件布局文件

根据上一步布局文件内容，现在我们创建组件布局文件 aqrun_helloworld_post_listing.xml

文件： app/code/Aqrun/HelloWorld/view/adminhtml/ui_component/aqrun_helloworld_post_index.xml

代码：

    
        
            aqrun_helloworld_post_listing.aqrun_helloworld_post_listing_data_source
            aqrun_helloworld_post_listing.aqrun_helloworld_post_listing_data_source
        
        spinner_columns
        
            
                add
                Add New Post
                primary
                */*/new
            
        
    
    
        
            Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider
            aqrun_helloworld_post_listing_data_source
            post_id
            id
            
                
                    Magento_Ui/js/grid/provider
                    
                    
                        post_id
                    
                
            
        
    
    
        
            
                
                    55
                    false
                    post_id
                
            
        
        
            
                
                    textRange
                    asc
                    ID
                
            
        
        
            
                
                    
                    
                        text
                        
                            true
                        
                    
                    
                
            
        
        
            
                
                    dataRange
                    Magento_Ui/js/grid/columns/date
                    date
                    Created
                
            
        
        
            
                
                    dateRange
                    Magento_Ui/js/grid/columns/date
                    date
                    Modified

根据以上代码可以了解如何定义网格布局，如何调用数据。现在清除缓存如下显示：

8-post-list-1.png