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

最新推荐文章于 2020-12-10 08:08:00 发布

weixin_33841503

最新推荐文章于 2020-12-10 08:08:00 发布

阅读量121

点赞数

文章标签： php javascript python ViewUI

原文链接：https://my.oschina.net/jiangchike/blog/209060

版权

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

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

[php] 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;
});

如何改变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,
),
),
),