数据库:我们将使用一个简单的数据库
app/code/Mageplaza/HelloWorld/Setup/InstallSchema.php
该文件在安装模块时只执行一次。让这个文件的内容来创建上表
<?php namespace Mageplaza\HelloWorld\Setup; class InstallSchema implements \Magento\Framework\Setup\InstallSchemaInterface{ public function install(\Magento\Framework\Setup\SchemaSetupInterface $setup, \Magento\Framework\Setup\ModuleContextInterface $context) { $installer = $setup; $installer->startSetup(); if (!$installer->tableExists('mageplaza_helloworld_post')) { $table = $installer->getConnection()->newTable( $installer->getTable('mageplaza_helloworld_post') ) ->addColumn( 'post_id', \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER, null, [ 'identity' => true, 'nullable' => false, 'primary' => true, 'unsigned' => true, ], 'Post ID' ) ->addColumn( 'name', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, ['nullable => false'], 'Post Name' ) ->addColumn( 'url_key', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, [], 'Post URL Key' ) ->addColumn( 'post_content', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, '64k', [], 'Post Post Content' ) ->addColumn( 'tags', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, [], 'Post Tags' ) ->addColumn( 'status', \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER, 1, [], 'Post Status' ) ->addColumn( 'featured_image', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, [], 'Post Featured Image' ) ->addColumn( 'created_at', \Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP, null, ['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT], 'Created At' )->addColumn( 'updated_at', \Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP, null, ['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT_UPDATE], 'Updated At') ->setComment('Post Table'); $installer->getConnection()->createTable($table); $installer->getConnection()->addIndex( $installer->getTable('mageplaza_helloworld_post'), $setup->getIdxName( $installer->getTable('mageplaza_helloworld_post'), ['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 ); } $installer->endSetup(); }}
文件:app/code/Mageplaza/HelloWorld/etc/adminhtml/routes.xml
<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route id="mageplaza_helloworld" frontName="mageplaza_helloworld"> <module name="Mageplaza_HelloWorld"/> </route> </router></config>
管理菜单/路由:我们将使用mageplaza_helloworld
管理页面的路由和菜单链接:
mageplaza_helloworld/post/index
创建控制器文件:有关详细信息,请阅读创建控制器文章。
创建名为 index.php 的控制器文件
app/code/Mageplaza/HelloWorld/Controller/Adminhtml/Post/Index.php
具有以下内容:
<?php namespace Mageplaza\HelloWorld\Controller\Adminhtml\Post; 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->getConfig()->getTitle()->prepend((__('Posts'))); return $resultPage; }}
在依赖注入文件中声明资源现在我们将创建di.xml
文件,该文件将连接到模型以获取我们网格的数据。
文件:app/code/Mageplaza/HelloWorld/etc/di.xml
具有以下内容:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd"> <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> <arguments> <argument name="collections" xsi:type="array"> <item name="mageplaza_helloworld_post_listing_data_source" xsi:type="string">Mageplaza\HelloWorld\Model\ResourceModel\Post\Grid\Collection</item> </argument> </arguments> </type> <virtualType name="Mageplaza\HelloWorld\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> <arguments> <argument name="mainTable" xsi:type="string">mageplaza_helloworld_post</argument> <argument name="resourceModel" xsi:type="string">Mageplaza\HelloWorld\Model\ResourceModel\Post</argument> </arguments> </virtualType></config>
对于动作mageplaza_helloworld/post/index
,我们将创建一个布局文件名mageplaza_helloworld_post_index.xml
文件:app/code/Mageplaza/HelloWorld/view/adminhtml/layout/mageplaza_helloworld_post_index.xml
具有以下内容:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"> <update handle="styles"/> <body> <referenceContainer name="content"> <uiComponent name="mageplaza_helloworld_post_listing"/> </referenceContainer> </body></page>
在这个布局文件中,我们为这个页面的内容声明了一个uiComponent 。
作为布局文件中的声明,我们将创建一个组件文件mageplaza_helloworld_post_listing.xml
文件:app/code/Mageplaza/HelloWorld/view/adminhtml/ui_component/mageplaza_helloworld_post_listing.xml
具有以下内容:
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">mageplaza_helloworld_post_listing.mageplaza_helloworld_post_listing_data_source</item> <item name="deps" xsi:type="string">mageplaza_helloworld_post_listing.mageplaza_helloworld_post_listing_data_source</item> </item> <item name="spinner" xsi:type="string">spinner_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 Post</item> <item name="class" xsi:type="string">primary</item> <item name="url" xsi:type="string">*/*/new</item> </item> </item> </argument> <dataSource name="nameOfDataSource"> <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">mageplaza_helloworld_post_listing_data_source</argument> <argument name="primaryFieldName" xsi:type="string">post_id</argument> <argument name="requestFieldName" xsi:type="string">id</argument> <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">post_id</item> </item> </item> </argument> </argument> </dataSource> <columns name="spinner_columns"> <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">post_id</item> </item> </argument> </selectionsColumn> <column name="post_id"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">textRange</item> <item name="sorting" xsi:type="string">asc</item> <item name="label" xsi:type="string" translate="true">ID</item> </item> </argument> </column> <column name="name"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="filter" xsi:type="string">text</item> <item name="editor" xsi:type="array"> <item name="editorType" xsi:type="string">text</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> <item name="label" xsi:type="string" translate="true">Name</item> </item> </argument> </column> <column name="created_at" 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">Created</item> </item> </argument> </column> <column name="updated_at" 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">Modified</item> </item> </argument> </column> </columns></listing>
通过此代码,您将了解如何声明 Grid 布局(按钮、列)、调用数据源。请刷新缓存,并访问此网格页面,管理网格将显示如下: