在modeladmin编辑表单中创建另一个内联按钮

时间:2014-06-12 05:20:29

标签: ajax silverstripe

我最近创建了产品modeladmin,如下所示,我想要的是显示另一个内联按钮,例如更新网址'在更改事件的类别下拉列表旁边,请参阅preveiw的网址。

http://minus.com/lj7czMhqI45TC

class Product extends DataObject
{

private static $db = array(
    'URLSegment' => 'Varchar(100)',
    'Title' => 'Varchar(255)',
    'MetaTitle' => 'Varchar(255)',
    'MetaDescription' => 'Varchar(255)',
    'Content' => 'HTMLText',        
    "SortOrder" => "Int",       
    "Size" => "Text",
);


private static $defaults = array(
    'Title'=>'New Item',
    'URLSegment' => 'new-item'
);

private static $has_one = array(
    'ProductCategory' => 'ProductCategory',
    'Image1' => 'Image',
    'Image2' => 'Image',
    'Image3' => 'Image'
);

//The class of the page which will list this DataObject
//private static $listing_page_class = 'ProductCategory';
 //Class Naming (optional but reccomended)
private static $singular_name = "Product";
private static $plural_name = "Products";

private static $default_sort = '"Title" ASC';


static $summary_fields = array(
    "ProductThumbnail" => "Image",      
    "Title" => "Name",
    "Size" => "Size",
    'ProductCategory.Title' => 'Category'
);

/*
static $searchable_fields = array(
    'Title',
    'Size',
    'Content'=> array('title' => 'Content'),
    'ProductCategoryID' => array('title' => 'Product Category')
);
*/

static $field_labels = array(
    'Title' => 'Product Name' 
);


public function getCMSFields() 
{
     $fields = parent::getCMSFields();

    / /$fields->addFieldToTab('Root.Main', new TextField('Title','Name'));      

    //Remove Scafolded fields
    $fields->removeFieldFromTab('Root.Main', 'URLSegment');
    $fields->removeFieldFromTab('Root.Main', 'MetaTitle');
    $fields->removeFieldFromTab('Root.Main', 'MetaDescription');


    $fields->addFieldToTab('Root.Main', new TextField('Title'));    

    if($this->ID)
     {
        $urlsegment = new SiteTreeURLSegmentField("URLSegment", $this->fieldLabel('URLSegment'));
        //$urlsegment->setURLPrefix($prefix);

        $helpText = _t('SiteTreeURLSegmentField.HelpChars', ' Special characters are automatically converted or removed.');
         $urlsegment->setHelpText($helpText);
        $fields->addFieldToTab('Root.Main', $urlsegment);
     }

    $fields->addFieldToTab('Root.Main', new HTMLEditorField('Content'));    

     $fields->addFieldToTab('Root.Main',new ToggleCompositeField('Metadata', 'Metadata',
        array(
            new TextField("MetaTitle", $this->fieldLabel('MetaTitle')),
            new TextareaField("MetaDescription", $this->fieldLabel('MetaDescription'))
        )
    ));



    $fields->removeFieldFromTab("Root.Main","ProductCategoryID");


    $fields->addFieldsToTab('Root.Main', array(
         DropdownField::create('ProductCategoryID', _t("Product.CATEGORY", "Category"), $this->categoryoptions())
            ,
        ), 'Content');      


    $fields->addFieldToTab('Root.ProductImages', $uploadField = new UploadField('Image1','Main Product Image'));
    $uploadField->setFolderName('Products/'.$this->URLSegment);
     $fields->addFieldToTab('Root.ProductImages', $uploadField = new UploadField('Image2','Second Product Image'));
    $uploadField->setFolderName('Products/'.$this->URLSegment);
    $fields->addFieldToTab('Root.ProductImages', $uploadField = new UploadField('Image3','Third Product Image'));
    $uploadField->setFolderName('Products/'.$this->URLSegment);
    //$uploadField->setConfig('fileEditFields', 'priorityField');
    //$uploadField->FolderName = 'Uploads/'.'member-photos/'.($this->Title);
    $fields->addFieldToTab('Root.Main', new TextField('Size')); 


    $fields->removeFieldsFromTab('Root.Main', array('SortOrder'));

    return $fields;
}



public function getProductThumbnail() { 
    if ($Image = $this->Image1()->ID) { 
        return $this->Image1()->SetWidth(100); 
    } else { 
        return '(No Image)'; 
    } 
}   
/**
 * Helper function for generating list of categories to select from.
 * @return array categories
 */
private function categoryoptions() {
    $categories = ProductCategory::get()->map('ID', 'NestedTitle')->toArray();
    $categories = array(
        0 => _t("SiteTree.PARENTTYPE_ROOT", "Top-level page")
    ) + $categories;        

    return $categories;
}

}

1 个答案:

答案 0 :(得分:2)

此代码基于cms/javascript/CMSMain.EditForm.js代码,它会显示更新网址按钮以及许多其他内容。以下代码是为Silverstripe 3.1编写的。

我们需要添加一些javascript到Product DataObject

cms-product-page.js目录中创建mysite/javascript/文件。

将此javascript文件加载到Product getCMSFields()函数中:

<强> Product.php

class Product extends DataObject {

    ...

    public function getCMSFields()
    {
        Requirements::javascript('mysite/javascript/cms-product-page.js');
        ...
    }

    ...

以下是在类别下拉列表后添加按钮的javascript:

<强> CMS-产品page.js

(function($) {
    $.entwine('ss', function($){

        // This binds the following to your Category select box
        $('.cms-edit-form select[name=ProductCategoryID]').entwine({
            // Constructor: onmatch
            onmatch : function() {
                var self = this;

                // This calls the function to create and hide the new button
                self._addActions();

                // This is the event listener, which will display the button when this field is changed
                this.bind('change', function(e) {
                    $('.customButton', self.parent()).show();
                });

                this._super();
            },
            onunmatch: function() {
                this._super();
            },

            // This is the function that creates and hides the button
            _addActions: function() {
                var self = this;
                var button;

                // update button
                button = $('<button />', {
                    'class': 'customButton ss-ui-button-small',
                    'text': 'Button text',
                    'click': function(e) {
                        e.preventDefault();
                        self.buttonActionFuction(self.val());
                    }
                });

                // insert elements
                self.parent().append(button);
                button.hide();
            }, 

            // This is the function that is called when the button is pressed
            buttonActionFuction: function(title) {
                var button = $('.customButton', this.parent());
                button.hide();
            }
        });
    });
}(jQuery));

目前,当更改类别时,按钮将出现,按下按钮时按钮将消失。需要添加更多javascript才能使按钮执行有用的操作。