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

时间 2019-11-11

标签重写默认 cgridview 点击删除按钮触发脚本栏目 PHP 繁體版

原文原文链接

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

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

[php] view plain copyhtml

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

如何改变confirm的内容？

[php] view plain copy

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方法。

[javascript] view plain copy

确认对话框以下图所示：

第一想法是重写confirm方法。

[javascript] view plain copy

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

[javascript] view plain copy

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

[javascript] view plain copy

$(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，那么点击“删除”，一弹出对话框后，程序当即进行删除，无需点“肯定”和“删除”。

好了，废话很少说，提供解决方案：

[php] view plain copy

$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。

进一步优化使用：

[php] view plain copy