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

来源：互联网发布：java经典程序源代码编辑：程序博客网时间：2024/06/05 10:06

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

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

[php] view plaincopy
$(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 plaincopy
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 plaincopy
art.dialog.confirm('确认删除该新闻吗？',function(){  
    //执行的内容  
});  

确认对话框如下图所示：

第一想法是重写confirm方法。

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

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

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

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

[javascript] view plaincopy
$(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 plaincopy
$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 plaincopy
......  
$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,  
        ......  

0 0