Własny widget grid w Magento 1.x
Jeśli potrzebujesz szybko i czytelnie wyświetlić dane w panelu administratora Magento, z pomocą przychodzi widget grid! Zaprezentuję krok po kroku proces implementacji tego rozwiązania, które nie tylko idealnie nadaje się do wyświetlania danych, ale również do ich zarządzania (dodawanie/usuwanie/edycja).
Artykuł podzieliłem na części:
- Deklaracja modułu;
- Dodanie odnośnika (tab) w panelu admina;
- Przygotowanie akcji kontrolera;
- Przygotowanie pliku xml widoku;
- Blok widget container;
- Blok widget grid;
Deklaracja modułu
app\etc\modules\Xcoding_Grid.xml
<?xml version="1.0"?>
<!--
~ @category Xcoding_Grid
~ @package Xcoding_Grid
~ @author X-Coding IT Studio (http://www.x-coding.pl/)
-->
<config>
<modules>
<Xcoding_Grid>
<active>true</active>
<codePool>local</codePool>
</Xcoding_Grid>
</modules>
</config>
Dodanie odnośnika w panelu admina
app\code\local\Xcoding\Grid\etc\adminhtml.xml
<!--
~ @category Xcoding_Grid
~ @package Xcoding_Grid
~ @author X-Coding IT Studio (http://www.x-coding.pl/)
-->
<config>
<menu>
<xcoding_grid module="xcoding_grid" translate="title">
<title>Testowy grid magento</title>
<sort_order>999</sort_order>
<action>adminhtml/mygrid/index</action>
</xcoding_grid>
</menu>
<acl>
<resources>
<!-- prawa dostępu -->
<all>
<title>Allow Everything</title>
</all>
<admin>
<children>
<xcoding_grid translate="title" module="xcoding_grid">
<title>Widok testowego grida</title>
<sort_order>1</sort_order>
</xcoding_grid>
</children>
</admin>
</resources>
</acl>
</config>
app\code\local\Xcoding\Grid\etc\config.xml
<?xml version="1.0"?>
<!--
~ @category Xcoding_Grid
~ @package Xcoding_Grid
~ @author X-Coding IT Studio (http://www.x-coding.pl/)
-->
<config>
<modules>
<Xcoding_Grid>
<version>0.0.1</version>
</Xcoding_Grid>
</modules>
<global>
<blocks>
<!-- deklaracja bloku -->
<xcoding_grid>
<class>Xcoding_Grid_Block</class>
</xcoding_grid>
</blocks>
<helpers>
<!-- deklaracja helpera -->
<xcoding_grid>
<class>Xcoding_Grid_Helper</class>
</xcoding_grid>
</helpers>
</global>
<admin>
<routers>
<!-- deklaracja controllera admina korzystającego z adminhtml -->
<adminhtml>
<args>
<modules>
<xcoding_grid before="Mage_Adminhtml">Xcoding_Grid_Adminhtml</xcoding_grid>
</modules>
</args>
</adminhtml>
</routers>
</admin>
<adminhtml>
<layout>
<updates>
<!-- deklaracja widoku admina xml -->
<xcoding_reports>
<file>xcoding/grid.xml</file>
</xcoding_reports>
</updates>
</layout>
</adminhtml>
</config>
Przy takiej konfiguracji można utworzyć rolę użytkownika z dostępem tylko do tego wybranego widoku.
Takiego efektu powinieneś się spodziewać
Przygotowanie akcji kontrolera
app\code\local\Xcoding\Grid\controllers\Adminhtml\MygridController.php
<?php
/**
* @category Xcoding_Grid
* @package Xcoding_Grid
* @author X-Coding IT Studio (http://www.x-coding.pl/)
*/
class Xcoding_Grid_Adminhtml_MygridController extends Mage_Adminhtml_Controller_Action
{
/**
* index/default action
*/
public function indexAction()
{
$this->loadLayout();
$this->renderLayout();
}
/**
* ajax grid action
*/
public function gridAction()
{
$this->loadLayout(false);
$this->renderLayout();
}
/**
* Check current user permission on resource and privilege
*
* @return boolean
*/
public function _isAllowed()
{
return Mage::getSingleton('admin/session')->isAllowed('xcoding_grid');
}
}
Przygotowanie widoku pliku XML
app\design\adminhtml\default\default\layout\xcoding\grid.xml
<?xml version="1.0"?>
<!--
~ @category Xcoding_Grid
~ @package Xcoding_Grid
~ @author X-Coding IT Studio (http://www.x-coding.pl/)
-->
<layout>
<adminhtml_mygrid_index>
<reference name="content">
<block type="xcoding_grid/adminhtml_test" name="test.container" />
</reference>
</adminhtml_mygrid_index>
<adminhtml_mygrid_grid>
<!-- przeładowanie form key -->
<update handle="formkey" />
<block type="xcoding_grid/adminhtml_mygrid_grid" name="adminhtml_mygrid.grid" output="toHtml" />
</adminhtml_mygrid_grid>
</layout>
Blok widget container
app\code\local\Xcoding\Grid\Block\Adminhtml\Test.php
<?php
/**
* @category Xcoding_Grid
* @package Xcoding_Grid
* @author X-Coding IT Studio (http://www.x-coding.pl/)
*/
class Xcoding_Grid_Block_Adminhtml_Test extends Mage_Adminhtml_Block_Widget_Grid_Container
{
/** @var string */
protected $_blockGroup = 'xcoding_grid';
/**
* constructor.
*/
public function __construct()
{
$this->_controller = 'adminhtml_mygrid';
$this->_headerText = $this->__('Testowy grid');
parent::__construct();
$this->_removeButton('add');
}
}
Blok widget grid
app\code\local\Xcoding\Grid\Block\Adminhtml\Mygrid\Grid.php
<?php
/**
* @category Xcoding_Grid
* @package Xcoding_Grid
* @author X-Coding IT Studio (http://www.x-coding.pl/)
*/
class Xcoding_Grid_Block_Adminhtml_Mygrid_Grid extends Mage_Adminhtml_Block_Widget_Grid
{
/**
* constructor.
*/
public function __construct()
{
parent::__construct();
// ustawiamy unikalne ID grida
$this->setId('xcoding_grid');
// ustawiamy domyslne sortowanie podając jako parametr nazwę kolumny (z metody _prepareColumns)
$this->setDefaultSort('ID');
// ustawiamy domyślne sortowanie
$this->setDefaultDir('DESC');
$this->setSaveParametersInSession(true);
$this->setUseAjax(true);
}
/**
* prepare collection
*
* @return $this
*/
protected function _prepareCollection()
{
// w tej metodzie tworzymy i przypisujemy kolekcję, którą chcemy obsłużyć
/** @var Mage_Catalog_Model_Resource_Product_Collection $collection */
$collection = Mage::getResourceModel('catalog/product_collection');
$collection->addAttributeToSelect('name');
$this->setCollection($collection);
return parent::_prepareCollection();
}
/**
* prepare columns grid
*
* @return $this
* @throws Exception
*/
protected function _prepareColumns()
{
// dodajemy kolumnę ( Mage_Adminhtml_Block_Widget_Grid_Column )
$this->addColumn('ID', array(
'header' => $this->__('ID'),
'type' => 'number', // typ danych
'index' => 'entity_id' // nazwa pola z kolekcji - taka wartość odczytywana jest jako main_table.entity_id
));
$this->addColumn('SKU', array(
'header' => $this->__('SKU'),
'type' => 'text',
'index' => 'sku'
));
$this->addColumn('Name', array(
'header' => $this->__('Name'),
'type' => 'text',
'index' => 'name'
));
return parent::_prepareColumns();
}
/**
* get row url
*
* @param $item
* @return string
*
*/
public function getRowUrl($item)
{
return $this->getUrl('*/catalog_product/edit', array('id' => $item->getId()));
}
/**
* get grid url
*
* @return string
*/
public function getGridUrl()
{
return $this->getUrl('*/*/grid', array('_current' => true));
}
}
Efekt końcowy
Tym szybkim sposobem otrzymaliśmy dynamiczny widok produktów. W razie potrzeby w każdym momencie w równie łatwy sposób dodając zaledwie kilka linii kodu możemy rozbudować nasz widok o kolejne funkcjonalności i kolumny do prezentacji danych.
Świetnie Ci poszło!
