Yii框架zii.widgets.grid自定义按钮，ajax触发事件并提示

相关类手册：

http://www.yiichina.com/api/CButtonColumn

 

buttons 属性

public array $buttons;

the configuration for additional buttons. Each array element specifies a single button which has the following format:

'buttonID' => array(
    'label'=>'...',     // text label of the button
    'url'=>'...',       // a PHP expression for generating the URL of the button
    'imageUrl'=>'...',  // image URL of the button. If not set or false, a text link is used
    'options'=>array(...), // HTML options for the button tag
    'click'=>'...',     // a JS function to be invoked when the button is clicked
    'visible'=>'...',   // a PHP expression for determining whether the button is visible
)

In the PHP expression for the 'url' option and/or 'visible' option, the variable $row refers to the current row number (zero-based), and $data refers to the data model for the row. 

Note that in order to display these additional buttons, the template property needs to be configured so that the corresponding button IDs appear as tokens in the template.

Yii框架zii.widgets.grid自定义按钮，ajax触发事件并提示

我们在用表格展示数据并管理的时候，可能会需要用到按钮来操作某一行数据，比如查看，修改，删除！

Yii内置了3种按钮：查看，修改和删除，你可以自定义样式、事件。详细配置见类参考：CButtonColumn.

如果需要自定义按钮绑定指定的事件该怎么办呢？

幸运的是Yii提供了自定义按钮的办法.看代码：

在视图文件里面：

$this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'xx-xx-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'pager'=>array(
            'class'=>'CLinkPager',
            'nextPageLabel'=>'下一页',
            'prevPageLabel'=>'上一页',
            'header'=>'',
    ),
    'summaryText'=>'<font color=#0066A4>显示{start}-{end}条.共{count}条记录,当前第{page}页</font>',
    'columns'=>array(
        array(
                'name'=>'id',
                'htmlOptions'=>array('width'=>'25'),
                'sortable'=>false,
        ),
        array(
            'class'=>'CButtonColumn',
            'template'=>'{view} {update}',
            'viewButtonOptions'=>array('title'=>'查看'),
            'updateButtonOptions'=>array('title'=>'修改'),
        ),
        array(
            'class'=>'CButtonColumn',
            'header'=>'首页展示',
            'template'=>'{add} {del}',
            'buttons'=>array(
                    'add' => array(
                            'label'=>'展示',     // text label of the button
                            'url'=>'Yii::app()->controller->createUrl("focus/create",array("id"=>$data->primaryKey,"type"=>1))',       // a PHP expression for generating the URL of the button
                            'imageUrl'=>'http://s.maylou.com/common/images/ysh.jpg',  // image URL of the button. If not set or false, a text link is used
                            'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag
                            'click'=>$click,     // a JS function to be invoked when the button is clicked
                            'visible'=>'SiteRecommend::isItemInTypeAndId(1, $data->id)?false:true',
                    ),
                    'del' => array(
                            'label'=>'取消展示',     // text label of the button
                            'url'=>'Yii::app()->controller->createUrl("focus/delete",array("id"=>$data->primaryKey,"type"=>1))',       // a PHP expression for generating the URL of the button
                            'imageUrl'=>'http://s.maylou.com/common/images/yzhu.jpg',  // image URL of the button. If not set or false, a text link is used
                            'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag
                            'click'=>$click,     // a JS function to be invoked when the button is clicked
                            'visible'=>'SiteRecommend::isItemInTypeAndId(1, $data->id)?true:false',
                    )
            ),
        ),
    ),
));

 buttons选项提供了创建按钮的方法，上面创建了2个按钮:add和del，并注册到template里面。其中最主要的是click选项，决定了你的触发条件。这里用ajax触发。在上面的代码前面加上$click内容：

$csrfTokenName = Yii::app()->request->csrfTokenName;
    $csrfToken = Yii::app()->request->csrfToken;
    $csrf = "
		data:{ '$csrfTokenName':'$csrfToken' },";
    $Confirmation= "你确定要这么做？";
    $afterDelete = 'function(link,success,data){ if(success) alert(data); }';
    $click=<<<EOD
    function() {
    if(!confirm("$Confirmation")) return false;;
    var th=this;
    var afterDelete=$afterDelete;
    $.fn.yiiGridView.update('build-oneprice-grid', {
    type:'POST',
    url:$(this).attr('href'),$csrf
    success:function(data) {
    $.fn.yiiGridView.update('build-oneprice-grid');
        afterDelete(th,true,data);
    },
    error:function(XHR) {
        return afterDelete(th,false,XHR);
    }
    });
    return false;
    }
EOD;

srf不用管他，是安全验证，必须要有，否则会400报错.$click是js函数的字符窜，用了文档字符窜形式，注意结束的EOD前面必须没空格，也不能缩进。

这是Yii内置的yiiGridView Jquery插件，把请求提交到控制器的动作里面处理，然后返回结果并显示。最后还会更新一次gridvi

以下是本人测试代码：

Model中

    public function isShow($id)
    {
        $id = (int)$id;
        $record = $this->findByAttributes(array('id' => $id));
        if ($record && $record->status == 1) {
            return true;
        }else{
            return false;
        }
    }

Controller中

    public function actionStatus($id, $status)
    {
        $id = (int)$id;
        $status = (int)$status;
        $record = User::model()->findAllByAttributes(array('id' => $id));
        if ($record) {
            User::model()->updateAll(array('status' => $status), 'id=:id', array(':id' => $id));
            //$this->redirect('Yii::app()->request->urlReferrer');
            if($status == 1){
                echo '展示成功';  
            }elseif($status == 0){
                echo '取消成功';   
            }else{
                echo '操作失败';
            }
        }
    }

View中

<?php 
$csrfTokenName = Yii::app()->request->csrfTokenName;
$csrfToken = Yii::app()->request->csrfToken;
$csrf = "
		data:{ '$csrfTokenName':'$csrfToken' },";
$Confirmation= "确定操作吗？";
$Confirmation_add= "确定展示吗？";
$Confirmation_del= "确定取消吗？";
$afterDelete = 'function(link,success,data){ if(success) alert(data); }';
$gridViewId = 'user-grid';
$click_test = <<<EOD
    function() {
        //if(!confirm("$Confirmation_add")) return false;
        var th = this, 
            afterDelete = function(){};
        jQuery('#$gridViewId').yiiGridView('update', {
            type: 'POST',
            url: jQuery(this).attr('href'),
            success: function(data) {
                jQuery('#$gridViewId').yiiGridView('update');
                afterDelete(th, true, data);
                //alert('操作成功');
            },
            error: function(XHR) {
                return afterDelete(th, false, XHR);
            }
        });
        return false;
    }
EOD;

$click = <<<EOD
    function() {
        if(!confirm("$Confirmation")) return false;
        var th=this;
        var afterDelete=$afterDelete;
        $.fn.yiiGridView.update('$gridViewId', {
            type:'POST',
            url:$(this).attr('href'),
            success:function(data) {
                $.fn.yiiGridView.update('$gridViewId');
                afterDelete(th,true,data);
            },
            error:function(XHR) {
                return afterDelete(th,false,XHR);
            }
        });
        return false;
    }
EOD;

?>

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'user-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    //'template'=>'{summary}{items}{pager}',
    //'summaryText'=>'<font color=#0066A4>总计{count}条数据 共{pages}页 当前第{page}页</font>',    
    'pager'=>array(   
            //'class'=>'CLinkPager', 
            //'pageSize' => 5,
            //'firstPageLabel' => '首页',
            'prevPageLabel' => '上一页',
            'nextPageLabel' => '下一页',
            //'lastPageLabel' => '末页',  
            'header'=>'',   
    ),
    'columns'=>array(
        'id',
        'username',
        //'password',
        //'email',
        //'profile',
        'url',
        'role',
        'status',
//        array(
//            'class'=>'CButtonColumn',
//        ),
        array(
            'class'=>'CButtonColumn',
            'template'=>'{view} {update} {delete}',
            'viewButtonOptions'=>array('title'=>'查看'),
            'updateButtonOptions'=>array('title'=>'修改'),
        ),
        array(
            'class'=>'CButtonColumn',
            'header'=>'首页展示',
            'template'=>'{add_status} {del_status}',
            'buttons'=>array(
                    'add_status' => array(
                            'label'=>'展示',     // text label of the button
                            'url'=>'Yii::app()->controller->createUrl("status",array("id"=>$data->primaryKey, "status"=>1))',       // a PHP expression for generating the URL of the button
                            //'imageUrl'=>'http://s.maylou.com/common/images/ysh.jpg',  // image URL of the button. If not set or false, a text link is used
                            'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag
                            'click'=>$click,     // a JS function to be invoked when the button is clicked
                            'visible'=>'User::model()->isShow($data->primaryKey)?false:true',
                    ),
                    'del_status' => array(
                            'label'=>'取消',     // text label of the button
                            'url'=>'Yii::app()->controller->createUrl("status",array("id"=>$data->primaryKey, "status"=>0))',       // a PHP expression for generating the URL of the button
                            //'imageUrl'=>'http://s.maylou.com/common/images/yzhu.jpg',  // image URL of the button. If not set or false, a text link is used
                            'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag
                            'click'=>$click,     // a JS function to be invoked when the button is clicked
                            'visible'=>'User::model()->isShow($data->primaryKey)?true:false',
                    )
            ),
        ),
    ),
)); ?>

备注：

其中$data->primaryKey表示主键值，如果主键名为id，也可以写成$data->id

相关类参考手册：http://www.yiichina.com/api/CActiveRecord