这篇文章中,我们主要来看一下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 代码。