Bài viết này sẽ hướng dẫn bạn cách tạo Admin Grid trong Magento 2, giúp bạn quản lý dữ liệu hiệu quả hơn. Chúng ta sẽ khám phá hai phương pháp chính: sử dụng UI Component và sử dụng Block. Việc lựa chọn phương pháp phù hợp sẽ giúp bạn tối ưu hóa quy trình làm việc và dễ dàng tùy chỉnh giao diện quản trị theo nhu cầu.
Magento 2 cung cấp sẵn các grid mặc định như Order Grid, Product Grid, nhưng chúng thường không đáp ứng được các yêu cầu tùy chỉnh. Khi bạn muốn quản lý dữ liệu từ các module tự phát triển hoặc hiển thị thông tin theo một cách đặc biệt, việc tạo một Admin Grid tùy chỉnh là vô cùng cần thiết. Một Admin Grid tùy chỉnh cho phép bạn:
Trong Magento 2, có hai phương pháp chính để tạo Admin Grid:
| Tính năng | UI Component | Block |
|---|---|---|
| Linh hoạt | Cao | Thấp |
| Khả năng mở rộng | Tốt | Hạn chế |
| Độ phức tạp | Trung bình | Thấp |
| Khuyến nghị | Magento | Cho các trường hợp đơn giản |
Đây là phương pháp được ưu tiên sử dụng trong Magento 2. Chúng ta sẽ đi qua các bước chính để tạo Admin Grid bằng UI Component.
Bạn cần khai báo Data Source trong file `di.xml` của module. Điều này cho phép Magento biết cách lấy dữ liệu cho grid của bạn.
Ví dụ:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="your_module_grid_listing_data_source" xsi:type="string">Your\Module\Model\ResourceModel\YourEntity\Grid\Collection</item>
</argument>
</arguments>
</type>
<virtualType name="Your\Module\Model\ResourceModel\YourEntity\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">your_entity_table</argument>
<argument name="resourceModel" xsi:type="string">Your\Module\Model\ResourceModel\YourEntity</argument>
</arguments>
</virtualType>
</config>
Tạo file layout để hiển thị UI Component.
Ví dụ: `your_module_your_controller_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="your_module_grid_listing"/>
</referenceContainer>
</body>
</page>
Đây là trái tim của phương pháp UI Component. Tạo file XML định nghĩa cấu trúc grid, các cột, bộ lọc, và hành động.
Ví dụ: `your_module_grid_listing.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="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">your_module_grid_listing.your_module_grid_listing_data_source</item>
</item>
</argument>
<dataSource name="your_module_grid_listing_data_source">
<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">your_module_grid_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">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>
</dataSource>
<columns name="your_module_columns">
<column name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</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="label" xsi:type="string" translate="true">Name</item>
</item>
</argument>
</column>
<!-- Thêm các cột khác -->
</columns>
</listing>
Phương pháp này sử dụng các Block để tạo và quản lý Admin Grid.
Tạo một Block để chứa grid.
<?php
namespace Your\Module\Block\Adminhtml;
use Magento\Backend\Block\Widget\Grid\Container;
class YourGrid extends Container
{
protected function _construct()
{
$this->_controller = 'adminhtml_yourgrid';
$this->_blockGroup = 'Your_Module';
$this->_headerText = __('Your Grid Title');
$this->_addButtonLabel = __('Add New Item');
parent::_construct();
}
}
Tạo Block để định nghĩa grid, các cột, và data source.
<?php
namespace Your\Module\Block\Adminhtml\YourGrid;
use Magento\Backend\Block\Widget\Grid\Extended;
use Magento\Backend\Block\Template\Context;
use Magento\Backend\Helper\Data;
use Your\Module\Model\ResourceModel\YourEntity\CollectionFactory;
class Grid extends Extended
{
protected $collectionFactory;
public function __construct(
Context $context,
Data $backendHelper,
CollectionFactory $collectionFactory,
array $data = []
) {
$this->collectionFactory = $collectionFactory;
parent::__construct($context, $backendHelper, $data);
}
protected function _construct()
{
parent::_construct();
$this->setId('yourgrid_grid');
$this->setDefaultSort('entity_id');
$this->setDefaultDir('ASC');
$this->setSaveParametersInSession(true);
}
protected function _prepareCollection()
{
$collection = $this->collectionFactory->create();
$this->setCollection($collection);
return parent::_prepareCollection();
}
protected function _prepareColumns()
{
$this->addColumn(
'entity_id',
[
'header' => __('ID'),
'index' => 'entity_id',
]
);
$this->addColumn(
'name',
[
'header' => __('Name'),
'index' => 'name',
]
);
// Thêm các cột khác
return parent::_prepareColumns();
}
}
Tạo file layout để hiển thị Block Grid.
<?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">
<body>
<referenceContainer name="content">
<block class="Your\Module\Block\Adminhtml\YourGrid" name="your_module_grid"/>
</referenceContainer>
</body>
</page>
Việc tạo Admin Grid trong Magento 2 là một kỹ năng quan trọng để quản lý và tùy chỉnh giao diện quản trị. Với UI Component, bạn có thể tạo các grid linh hoạt và dễ dàng mở rộng, trong khi phương pháp Block phù hợp cho các trường hợp đơn giản. Lựa chọn phương pháp phù hợp sẽ giúp bạn tối ưu hóa quy trình làm việc và nâng cao hiệu quả quản lý dữ liệu trong Magento 2.
Bài viết liên quan