重写默认的CGridView 点击“删除”按钮触发的脚本

默认的CGridView，点击“删除”按钮所触发的脚本－默认是用javascript 的confirm方法弹出确认对话框，不太美观。且如何更改弹出的对话框中的内容？

下面的脚本是由YII自动生成的。

$(document).on('click','#staff-grid a.delete',  function() {
    if(!confirm("你确定要这么做？")) return false;;
    var th=this;
    var afterDelete=function(link,success,data){ if(success) art_alert(1,data,false);; };
    $.fn.yiiGridView.update('manager-grid', {
        type:'POST',
        url:$(this).attr('href'),//
        success:function(data) {
            $.fn.yiiGridView.update('manager-grid');
            afterDelete(th,true,data);
        },
        error:function(XHR) {
            return afterDelete(th,false,XHR);
        }
    });
    return false;
});

如何改变confirm的内容？

array(
    'class'=>'CButtonColumn',
    'deleteConfirmation'=>"js:'在这里写上你想要的内容喽，比如确定删除 '+$(this).parent().parent().find('td:eq(1)').html()+'?'",
    'header'=>'功能操作',
    'updateButtonImageUrl'=>false,//当你设置 xxxButtonImageUrl 的属性为空或 false 时，文本形式的链接将会代替图片显示.
    'deleteButtonImageUrl'=>false,
    'template'=>'{update} {delete}',
    'headerHtmlOptions'=>array('class'=>'title','width'=>'15%'),
),

如何实现换个对话框框样式？

个人觉得这个弹出的框框不太美观，我一般是用artDialog中的confirm方法。

art.dialog.confirm('确认删除该新闻吗？',function(){
    //执行的内容
});

确认对话框如下图所示：

第一想法是重写confirm方法。

<script>
function confirm($str)
{
    art.dialog.confirm('确认删除该新闻吗？',function(){
        //执行的内容
    });
}
</script>

结果不行。因为：artDialog中的confirm方法不返回值。上面的重写方法中，程序一直执行，比如：

<script>
function confirm($str)
{
    alert(1);
    art.dialog.confirm('确认删除该新闻吗？',function(){
        alert(2);
    });
    alert(3);
}
</script>

当执行该重写的方法时，先弹出1，接着弹出对话框“确认删除该新闻吗？”，接着又弹出3。

$(document).on('click','#staff-grid a.delete',  function() {
    if(!confirm("你确定要这么做？")) return false;;
    var th=this;
    var afterDelete=function(link,success,data){ if(success) art_alert(1,data,false);; };
    $.fn.yiiGridView.update('manager-grid', {
        type:'POST',
        url:$(this).attr('href'),//
        success:function(data) {
            $.fn.yiiGridView.update('manager-grid');
            afterDelete(th,true,data);
        },
        error:function(XHR) {
            return afterDelete(th,false,XHR);
        }
    });
    return false;
});

如果在alert(3)处换为return true，那么在弹出对话框“确认删除该新闻吗？”，不管点确定或取消，上句代码已经是return false了，程序不会继续执行

如果在alert(3)处换为return false，那么点击“删除”，一弹出对话框后，程序立即进行删除，无需点“确定”和“删除”。

好了，废话不多说，提供解决方案：

$afterDelete = 'function(link,success,data){ if(success) art_alert(1,data,false);}';
$delete=<<<EOD
    function(event) {
        art.dialog.confirm('确认删除该新闻吗？',function(){
            var th=event.target;
            var afterDelete=$afterDelete;
            $.fn.yiiGridView.update('staff-grid', {
                type:'POST',
                url:$(th).attr('href'),//$csrf
                success:function(data) {
                    $.fn.yiiGridView.update('staff-grid');
                    afterDelete(th,true,data);//只有'ajaxUpdate' => false,设置为true，才通过ajax post提交。否则就是一般性质的post删除。
                },
                error:function(XHR) {
                    return afterDelete(th,false,XHR);
                }
            });
            //alert($(th).attr('href'));
            return true;
        });
        return false;
    }
EOD;

array(
    'class'=>'CButtonColumn',
    'deleteConfirmation'=>"js:'确定删除 '+$(this).parent().parent().find('td:eq(1)').html()+'?'",
    'header'=>'功能操作',
    'updateButtonImageUrl'=>false,//当你设置 xxxButtonImageUrl 的属性为空或 false 时，文本形式的链接将会代替图片显示.
    'deleteButtonImageUrl'=>false,
    'template'=>'{update} {delete}',
    'headerHtmlOptions'=>array('class'=>'title','width'=>'15%'),
    //以下代码为重写delete按钮相关内容
    'buttons'=>array(
        'delete'=>array(
            'label'=>'删除',
            'url'=>'Yii::app()->controller->createUrl("manager/delete",array("id"=>$data->id))',
            'click'=>$delete,
        ),
    ),

),

通过覆盖默认的delete按钮事件，可达到想要效果。具体不解释了，很easy。

进一步优化使用：

......
$afterDelete = 'function(link,result,data){
	if(result===true){
		$.fn.yiiGridView.update("manager-grid");//$(link).parents("ul:first").hide();
		art.dialog.tips(data.msg);//art_alert(1,data.msg,false);
	}
	else
		art.dialog.tips(data.msg);//art_alert(0,data.msg,false);
}';

$delete=<<<EOD
	function(event) {
		art.dialog.confirm('确认删除该帐户吗？',function(){
			var th=event.target;
			var afterDelete=$afterDelete;
			$.fn.yiiGridView.update('manager-grid', {
				type:'POST',
				dataType:'json',
				data:{'YII_CSRF_TOKEN':YII_CSRF_TOKEN},
				url:$(th).attr('href'),
				success:function(data) {
					afterDelete(th,data.result,data);
				},
				error:function(XHR) {
					return afterDelete(th,false,XHR);
				}
			});
		});
		return false;
	}
EOD;

$this->widget('zii.widgets.grid.CGridView', array(
	'ajaxUpdate' => true,
        ......