Magento 2 网格结构

Question

我已经开始研究 Magento 2 网格。我开发了一个简单的模块，但我不了解网格的结构。

在 Magento 1.9.X 中，添加网格的方式很明确，但在 Magento 2 中，结构有所不同。如何在 Magento 2 中添加网格？

Answer 1

在 Magento 2 中，您可以通过 XML 创建网格（参见 here）

但是，您可以通过 PHP 创建网格，例如 Magento 1：将网格 class 扩展到 "Magento\Backend\Block\Widget\Grid\Extended"

<?php

namespace Yourpackage\Yourmodule\Block\Adminhtml\Sample;

class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    protected $_yourmodelFactory;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Helper\Data $backendHelper,
        \Yourpackage\Yourmodule\Model\YourmodelFactory $yourmodelFactory,
        array $data = []
    ) {
        parent::__construct($context, $backendHelper, $data);
        $this->_yourmodelFactory = $yourmodelFactory;
    }

    protected function _construct()
    {
        parent::_construct();
        $this->setId('sample_grid');
        $this->setDefaultSort('id');
        $this->setDefaultDir('DESC');
        $this->setSaveParametersInSession(true);
    }

    protected function _prepareCollection()
    {
        $collection = $this->_yourmodelFactory->create()->getCollection();
        $this->setCollection($collection);

        return parent::_prepareCollection();
    }

    protected function _prepareColumns()
    {
        $this->addColumn(
            'id',
            [
                'header' => __('ID'),
                'align'  => 'right',
                'width'  => '50px',
                'index'  => 'id',
            ]
        );

        // Some columns

        return parent::_prepareColumns();
    }
}

您可以在以下位置查看更多信息：/vendor/magento/module-cms/Block/Adminhtml/Page/Grid.php.

Answer 2

最佳做法是通过 UI 个组件 (xml) 创建所有网格。

查看 Magento_Catalog 模块并找到 product_form.xml.

Answer 3

现在在 adminhtml 中添加网格的首选方法是使用 ui 组件

之所以现在是最好的方法是因为在将其添加为 ui 组件时可以使用很多 magento 2 后端功能。

但是有多种方法可以添加它。不要在 Whosebug 中重复答案和大量代码，我发现了一个 mageplaza explination，它解释了网格的创建。

https://www.mageplaza.com/magento-2-module-development/create-admin-grid-magento-2.html

您还可以参考 magento 2 文档来了解您可以在 ui 组件中使用的其他组件：

https://devdocs.magento.com/guides/v2.0/ui-components/ui-component.html

网格中有多个现有组件，您可以创建自己的组件。 Aldo complex 它们在设置时确实提供了很大的灵活性。当您创建一对时，您将了解它们的功能并能够轻松地与它们一起工作。

Answer 4

1:创建控制器Index.php

 <?php

 namespace Ced\Abhinay\Controller\Adminhtml\Account;

 class Index extends \Magento\Backend\App\Action {

 /**
 * @var bool|\Magento\Framework\View\Result\PageFactory
 */
 protected $resultPageFactory = false;

 /**
 * Index constructor.
 * @param \Magento\Backend\App\Action\Context $context
 * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
 */

 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((__('Ced Abhinay')));

    return $resultPage;
 }

 }

2:之后为此创建布局文件

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-          2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="Ced\Abhinay\Block\Adminhtml\Account\ListGrid" name="ced_custom_grid"/>
    </referenceContainer>
</body>
</page>

3.After 创建文件 ListGrid.php

<?php
  namespace Ced\Abhinay\Block\Adminhtml\Account;

  class ListGrid extends \Magento\Backend\Block\Widget\Grid\Container {

  /**
  * Class ListGrid extends parent constructor \Magento\Backend\Block     \Widget\Grid
 */
 protected function _construct()
 {
    $this->_controller = 'account_index';
    $this->_blockGroup = 'Ced_Abhinay';
    $this->_addButtonLabel = __('Ced Test');
    parent::_construct();
 }
 }

4:现在终于创建您的 Grid.php

<?php

namespace Ced\Abhinay\Block\Adminhtml\Account\Grid;

class Grid extends \Magento\Backend\Block\Widget\Grid\Extended {

/** @var \Ced\Abhinay\Model\ListModel */
protected $listModelData;

/**
 * Grid constructor.
 * @param \Magento\Backend\Block\Template\Context $context
 * @param \Magento\Backend\Helper\Data $backendHelper
 * @param \Ced\Abhinay\Model\ListModel $listModelData
 * @param array $data
 */

public function __construct(
    \Magento\Backend\Block\Template\Context $context,
    \Magento\Backend\Helper\Data $backendHelper,
    \Ced\Abhinay\Model\ListModel $listModelData,
    array $data = []
) {
    parent::__construct($context, $backendHelper, $data);
    $this->listModelData = $listModelData;
}

protected function _construct()
{
    parent::_construct();
    $this->setId('list_grid');
    $this->setDefaultSort('list_id');
    $this->setDefaultDir('DESC');
    $this->isAjax('true');
}

protected function _prepareCollection()
{
    $collection = $this->listModelData->getCollection();
    $this->setCollection($collection);

    return parent::_prepareCollection();
}

protected function _prepareColumns()
{
    $this->addColumn(
        'post_id',
        [
            'header' => __('ID'),
            'sortable' => true,
            'index' => 'post_id',
            'type' => 'number',
            'header_css_class' => 'col-id',
            'column_css_class' => 'col-id'
        ]
    );
    $this->addColumn(
        'title',
        [
            'header' => __('Name'),
            'index' => 'name',
            'header_css_class' => 'col-name',
            'column_css_class' => 'col-name'
        ]
    );
    $this->addColumn(
        'position',
        [
            'header' => __('Position'),
            'name' => 'position',
            'width' => 60,
            'type' => 'number',
            'validate_class' => 'validate-number',
            'index' => 'position',
            'editable' => true,
        ]
    );

    return parent::_prepareColumns();
}
}

Magento 2 网格结构

Magento 2 grid structure

grid

magento2