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

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

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

[php] view plaincopy

1. $(document).on('click','#staff-grid a.delete',  function() {  

2.     if(!confirm("你确定要这么做？")) return false;;  

3.     var th=this;  

4.     var afterDelete=function(link,success,data){ if(success) art_alert(1,data,false);; };  

5.     $.fn.yiiGridView.update('manager-grid', {  

6.         type:'POST',  

7.         url:$(this).attr('href'),//  

8.         success:function(data) {  

9.             $.fn.yiiGridView.update('manager-grid');  

10.             afterDelete(th,true,data);  

11.         },  

12.         error:function(XHR) {  

13.             return afterDelete(th,false,XHR);  

14.         }  

15.     });  

16.     return false;  

17. });  

如何改变confirm的内容？

[php] view plaincopy

1. array(  

2.     'class'=>'CButtonColumn',  

3.     'deleteConfirmation'=>"js:'在这里写上你想要的内容喽，比如确定删除 '+$(this).parent().parent().find('td:eq(1)').html()+'?'",  

4.     'header'=>'功能操作',  

5.     'updateButtonImageUrl'=>false,//当你设置 xxxButtonImageUrl 的属性为空或 false 时，文本形式的链接将会代替图片显示.  

6.     'deleteButtonImageUrl'=>false,  

7.     'template'=>'{update} {delete}',  

8.     'headerHtmlOptions'=>array('class'=>'title','width'=>'15%'),  

9. ),  

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

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

[javascript] view plaincopy

1. art.dialog.confirm('确认删除该新闻吗？',function(){  

2.     //执行的内容  

3. });  

确认对话框如下图所示：

第一想法是重写confirm方法。

[javascript] view plaincopy

1. <script>  

2. function confirm($str)  

3. {  

4.     art.dialog.confirm('确认删除该新闻吗？',function(){  

5.         //执行的内容  

6.     });  

7. }  

8. </script>  

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

[javascript] view plaincopy

1. <script>  

2. function confirm($str)  

3. {  

4.     alert(1);  

5.     art.dialog.confirm('确认删除该新闻吗？',function(){  

6.         alert(2);  

7.     });  

8.     alert(3);  

9. }  

10. </script>  

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

[javascript] view plaincopy

1. $(document).on('click','#staff-grid a.delete',  function() {  

2.     if(!confirm("你确定要这么做？")) return false;;  

3.     var th=this;  

4.     var afterDelete=function(link,success,data){ if(success) art_alert(1,data,false);; };  

5.     $.fn.yiiGridView.update('manager-grid', {  

6.         type:'POST',  

7.         url:$(this).attr('href'),//  

8.         success:function(data) {  

9.             $.fn.yiiGridView.update('manager-grid');  

10.             afterDelete(th,true,data);  

11.         },  

12.         error:function(XHR) {  

13.             return afterDelete(th,false,XHR);  

14.         }  

15.     });  

16.     return false;  

17. });  

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

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

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

[php] view plaincopy

1. $afterDelete = 'function(link,success,data){ if(success) art_alert(1,data,false);}';  

2. $delete=<<<EOD  

3.     function(event) {  

4.         art.dialog.confirm('确认删除该新闻吗？',function(){  

5.             var th=event.target;  

6.             var afterDelete=$afterDelete;  

7.             $.fn.yiiGridView.update('staff-grid', {  

8.                 type:'POST',  

9.                 url:$(th).attr('href'),//$csrf  

10.                 success:function(data) {  

11.                     $.fn.yiiGridView.update('staff-grid');  

12.                     afterDelete(th,true,data);//只有'ajaxUpdate' => false,设置为true，才通过ajax post提交。否则就是一般性质的post删除。  

13.                 },  

14.                 error:function(XHR) {  

15.                     return afterDelete(th,false,XHR);  

16.                 }  

17.             });  

18.             //alert($(th).attr('href'));  

19.             return true;  

20.         });  

21.         return false;  

22.     }  

23. EOD;  

24.   

25. array(  

26.     'class'=>'CButtonColumn',  

27.     'deleteConfirmation'=>"js:'确定删除 '+$(this).parent().parent().find('td:eq(1)').html()+'?'",  

28.     'header'=>'功能操作',  

29.     'updateButtonImageUrl'=>false,//当你设置 xxxButtonImageUrl 的属性为空或 false 时，文本形式的链接将会代替图片显示.  

30.     'deleteButtonImageUrl'=>false,  

31.     'template'=>'{update} {delete}',  

32.     'headerHtmlOptions'=>array('class'=>'title','width'=>'15%'),  

33.     //以下代码为重写delete按钮相关内容  

34.     'buttons'=>array(  

35.         'delete'=>array(  

36.             'label'=>'删除',  

37.             'url'=>'Yii::app()->controller->createUrl("manager/delete",array("id"=>$data->id))',  

38.             'click'=>$delete,  

39.         ),  

40.     ),  

41.   

42. ),  

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

进一步优化使用：

[php] view plaincopy

1. ......  

2. $afterDelete = 'function(link,result,data){  

3.     if(result===true){  

4.         $.fn.yiiGridView.update("manager-grid");//$(link).parents("ul:first").hide();  

5.         art.dialog.tips(data.msg);//art_alert(1,data.msg,false);  

6.     }  

7.     else  

8.         art.dialog.tips(data.msg);//art_alert(0,data.msg,false);  

9. }';  

10.   

11. $delete=<<<EOD  

12.     function(event) {  

13.         art.dialog.confirm('确认删除该帐户吗？',function(){  

14.             var th=event.target;  

15.             var afterDelete=$afterDelete;  

16.             $.fn.yiiGridView.update('manager-grid', {  

17.                 type:'POST',  

18.                 dataType:'json',  

19.                 data:{'YII_CSRF_TOKEN':YII_CSRF_TOKEN},  

20.                 url:$(th).attr('href'),  

21.                 success:function(data) {  

22.                     afterDelete(th,data.result,data);  

23.                 },  

24.                 error:function(XHR) {  

25.                     return afterDelete(th,false,XHR);  

26.                 }  

27.             });  

28.         });  

29.         return false;  

30.     }  

31. EOD;  

32.   

33. $this->widget('zii.widgets.grid.CGridView', array(  

34.     'ajaxUpdate' => true,  

35.         ......