Magento 后台表单高级操作

这篇文章中，我们主要来看一下magneto的后台高级操作。

在上一篇文章中，我们了解了magento的后台基础表单部分，在这篇文章中我们来了解一下在这些表单中可以使用的功能。

一．为表单添加操作按钮。

在表单区域，我们可以自己来添加所有需要在表单中用到的操作按钮，如下图你可以看到我为表单添加了四个自定义按钮。

后台表单多按钮如下图：

以下是需要添加的代码：

<?php

class Magease_Form_Block_Adminhtml_Form_Edit extends Mage_Adminhtml_Block_Widget_Form_Container {

    public function __construct() {
        parent::__construct();

        $this->_objectId = 'id';
        $this->_blockGroup = 'form';
        $this->_controller = 'adminhtml_form';

        $this->_updateButton('save', 'label', Mage::helper('form')->__('Save'));
        $this->_updateButton('delete', 'label', Mage::helper('form')->__('Delete'));

        $this->_addButton('saveandcontinue', array(
            'label' => Mage::helper('adminhtml')->__('Save And Continue Edit'),
            'onclick' => 'saveAndContinueEdit()',
            'class' => 'save',
                ), -100);

        $this->_addButton('button1', array(
            'label' => Mage::helper('adminhtml')->__('Button1'),
            'onclick' => 'setLocation(\'' . $this->getUrl('*/*/button1Click') . '\')',
            'class' => 'back',
                ), -1, 5);

        $this->_addButton('button2', array(
            'label' => Mage::helper('adminhtml')->__('Button2'),
            'onclick' => 'setLocation(\'' . $this->getUrl('*/*/button2Click') . '\')',
            'class' => 'save',
                ), -1, 3);

        $this->_addButton('button3', array(
            'label' => Mage::helper('adminhtml')->__('Button3'),
            'onclick' => 'setLocation(\'' . $this->getUrl('*/*/button3Click') . '\')',
            'class' => 'delete',
                ), -1, 1);

        $this->_addButton('button4', array(
            'label' => Mage::helper('adminhtml')->__('Button4'),
            'onclick' => 'setLocation(\'' . $this->getUrl('*/*/button4Click') . '\')',
            'class' => 'delete',
                ), -1, 4, 'footer');
    }

    public function getHeaderText() {
        return Mage::helper('form')->__('My Form Container');
    }

}

在这里，我们主要用到的方法就是$this->addButton()，我们来看一下这个方法中用到的主要参数。

• 参数1：button id，button id 是一个按钮唯一的标识。
• 参数2：button 参数数组，在这里你可以指定button的 label（标签），onclick（点击事件）和button的class类。
• 参数3：level，level的作用是指定几个按钮到同一组中。同时与参数4 sort_order相关。
• 参数4：sort_order，sort_order的作用是将同一组的按钮排序。比如让哪个按钮排在第一，哪个排在最后。
• 参数5：area，这个参数只有两个值可选，分别是header和footer，默认值是header，但是如果你想让这个按钮放在表单的下方，你就需要在这里传递footer值到area参数中。

二．添加多个tabs页以及基于ajax加载的tab页

要添加多tabs页，我们需要在Tabs.php类中做一些修改。

<?php

class Magease_Form_Block_Adminhtml_Form_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs {

    public function __construct() {
        parent::__construct();
        $this->setId('form_tabs');
        $this->setDestElementId('edit_form');
        $this->setTitle(Mage::helper('form')->__('Product Information'));
    }

    protected function _beforeToHtml() {
        $this->addTab('form_section', array(
            'label' => Mage::helper('form')->__('Item Information'),
            'title' => Mage::helper('form')->__('Item Information'),
            'content' => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form')->toHtml(),
        ));

        $this->addTab('form_section2', array(
            'label' => Mage::helper('form')->__('Item Information2'),
            'title' => Mage::helper('form')->__('Item Information2'),
            'content' => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form2')->toHtml(),
        ));

        $this->addTab('form_section3', array(
            'label' => Mage::helper('form')->__('Item Information3'),
            'url' => $this->getUrl('*/*/form', array('_current' => true)),
            'class' => 'ajax',
        ));

        return parent::_beforeToHtml();
    }

}

从上面的代码中，你可以看出来如果想要添加一个普通的html tab页，你都需要做哪些工作。

$this->addTab('form_section2', array(
    'label' => Mage::helper('form')->__('Item Information2'),
    'title' => Mage::helper('form')->__('Item Information2'),
    'content' => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form2')->toHtml(),
));

这里的代码非常简单，我们首先设置一下tab页的label，title并且指定需要添加的content，但是对于ajax 加载的tab页，这里的代码会稍微有些不同。

$this->addTab('form_section3', array(
    'label' => Mage::helper('form')->__('Item Information3'),
    'url' => $this->getUrl('*/*/form', array('_current' => true)),
    'class' => 'ajax',
));

这里我们添加了class参数为ajax，并且指定需要ajax请求的url，这个url指向后台controller的一个ajax 执行方法。如：

    public function formAction() {
        $this->loadLayout();
        $this->getResponse()->setBody(
                $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form3')
                        ->toHtml()
        );
    }

通常，基于 ajax 的 tab 页往往会用来加载一个后台 grid 表格。查看如何加载一个 grid 表格，请看这篇文章。

三．创建新表单字段。

在上一篇文章中，我们已经看过了 magento 后台自带的所有表单字段。下面我们看下如何在后台表单中添加一个新的字段类型。在 Form.php 类中有 _prepareForm() 方法，我们添加如下代码：

$fieldset->addType('custom_field', 'Magease_Form_Block_Adminhtml_Form_Edit_Tab_Field_Custom');

在这里我们调用了一个 addType() 方法，并且传递了一个唯一的字段 id 和这个字段的类，下一步我们来添加这个新的字段。

        $fieldset->addField('custom_field', 'custom_field', array(
            'label' => Mage::helper('form')->__('Checkboxs'),
            'name' => 'Checkbox',
            'custom1' => 'Custom1 Value',
            'custom2' => 'Custom2 Value',
            'value' => 'value1'
        ));

这里在 addField() 方法中我们使用了 custom_field 作为字段类型，我们增加两个变量 custom1 和 custom2 ，写这个的目的是告诉你如何向这个 custom field  类传递参数。下面是我们新建的 custom field  类。

<?php

class Magease_Form_Block_Adminhtml_Form_Edit_Tab_Field_Custom extends Varien_Data_Form_Element_Abstract {

    public function __construct($attributes = array()) {
        parent::__construct($attributes);
    }

    public function getElementHtml() {
        $value = $this->getValue();
        $custom1 = $this->getCustom1();
        $custom2 = $this->getCustom1();
        $html = '<p id="' . $this->getHtmlId() . '"' . $this->serialize($this->getHtmlAttributes()) . '>I can put any custom html/javascript here.</p>';
        $html .= "<p>Here i can access custom fields passed </p>";
        $html .= "<b>Custom1:</b> $custom1 <br/>";
        $html .= "<b>Custom2:</b> $custom2<br/>";
        $html .= $this->getAfterElementHtml();
        return $html;
    }

}

注意：
1. 这个类必须继承自  Varien_Data_Form_Element_Abstract
2. 你需要重写 getElementHtml()方法并且可以加入你自己定义的 html 代码。