Yii2：替换GridView默认确认弹窗为Sweet Alert

我之前也碰到过这个问题，修改按钮模板没成功大概率是没处理好Yii2原生的POST请求逻辑，或者没覆盖掉默认的确认事件。这里给你两种实用的方案，按需选择：

方案一：全局替换（推荐） #

这种方式一劳永逸，所有带data-confirm属性的元素（包括GridView删除按钮、其他确认按钮）都会自动用Sweet Alert替代原生弹窗，完全不用修改GridView的按钮模板。

1. 确保Sweet Alert插件已正确加载
   先确认你已经在项目中正确引入了yii2mod/yii2-sweet-alert，可以在布局文件或者当前视图中注册它的资源：

   use yii2mod\sweetalert\SweetAlertAsset;
   SweetAlertAsset::register($this);
   

2. 重写Yii原生的yii.confirm函数
   在视图的末尾（或通过registerJs）添加以下JS代码，覆盖Yii自带的确认逻辑：

   yii.confirm = function(message, okCallback, cancelCallback) {
       swal({
           title: '确认操作',
           text: message,
           type: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#DD6B55', // 适配你的主题颜色
           confirmButtonText: '确认执行',
           cancelButtonText: '取消',
           closeOnConfirm: true,
           closeOnCancel: true
       }, function(isConfirm) {
           if (isConfirm) {
               okCallback(); // 确认后执行原有的操作（比如提交POST请求）
           } else if (cancelCallback) {
               cancelCallback();
           }
       });
   };
   

   你可以根据基础/高级主题调整type、按钮颜色、文本等参数，让弹窗风格和项目统一。

方案二：针对单个GridView定制 #

如果你只想给某个特定的GridView替换弹窗，可以修改ActionColumn的按钮模板，再绑定自定义事件：

1. 修改GridView的ActionColumn配置
   在GridView的columns中，自定义删除按钮的HTML结构，去掉原生的data-confirm，添加自定义属性：

   [
       'class' => 'yii\grid\ActionColumn',
       'buttons' => [
           'delete' => function ($url, $model) {
               return Html::a('<span class="glyphicon glyphicon-trash"></span>', '#', [
                   'class' => 'grid-delete-btn',
                   'data-url' => $url,
                   'title' => '删除',
               ]);
           },
       ],
   ]
   

2. 绑定Sweet Alert点击事件
   同样在视图末尾添加JS代码，处理删除按钮的点击逻辑：

   $('.grid-delete-btn').on('click', function(e) {
       e.preventDefault(); // 阻止默认跳转
       var deleteUrl = $(this).data('url');
       
       swal({
           title: '确定删除这条记录吗？',
           text: '删除后无法恢复，请谨慎操作！',
           type: 'error',
           showCancelButton: true,
           confirmButtonText: '确认删除',
           cancelButtonText: '取消'
       }, function(isConfirm) {
           if (isConfirm) {
               // 创建隐藏表单提交POST请求（符合Yii2的删除安全机制）
               var form = $('<form>').attr({
                   method: 'POST',
                   action: deleteUrl
               }).append($('<input>').attr({
                   name: '_csrf',
                   type: 'hidden',
                   value: yii.getCsrfToken()
               }));
               $('body').append(form);
               form.submit();
           }
       });
   });
   

为什么之前修改模板没成功？ #

大概率是忽略了Yii2删除操作默认要求POST请求的机制，直接修改按钮链接为GET会触发403错误；或者没有阻止原生的data-confirm事件，导致原生弹窗和Sweet Alert同时出现。上面的两种方案都处理了这些问题，你可以放心使用。

内容的提问来源于stack exchange，提问作者Pablo Palacios