如何在 Yii2 Gridview 中自定义默认数据确认对话框

Posted 2023-02-24

【中文标题】如何在 Yii2 Gridview 中自定义默认数据确认对话框

【英文标题】：How to customize default data-confirm dialog box in Yii2 Gridview

【发布时间】：2015-08-07 13:40:08

【问题描述】：

我想更改点击删除按钮时浏览器的默认确认对话框（数据确认）框。

我想用自定义对话框替换它。

以下是我的 Gridview 代码：

<?=
    GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,                
        'columns' => [            
            //['class' => 'yii\grid\SerialColumn'],
            'account',
            'code',  
            [
                'class' => 'yii\grid\ActionColumn',
                'header' => 'Action',
                'template' => ' update delete',
                'buttons' => [
                    'update' => function ($url, $model) 
                        return html::a('<span class="btn-xs btn-primary">Edit</span>', $url, [
                                    'title' => Yii::t('app', 'Edit'),
                        ]);
                    ,
                            'delete' => function ($url, $model) 
                        return Html::a('<span class="btn-xs btn-danger">Delete</span>', $url, [
                                    'title' => Yii::t('app', 'Delete'),
                                    //'data-confirm'=>'Are you sure you want to delete this item?',
                                    'data-method'=>'POST'
                        ]);
                    
                        ]
                    ],
                ],
            ]);
            ?>

我的 JQuery 代码：

    confirm: function (message, title, okAction) 
        $("<div></div>").dialog(
            // Remove the closing 'X' from the dialog
            open: function (event, ui) 
                $(".ui-dialog-titlebar-close").hide();
            ,
            buttons: 
                "Ok": function () 
                    $(this).dialog("ok");
                    okAction();
                ,
                "Cancel": function () 
                    $(this).dialog("close");
                
            ,
            close: function (event, ui) 
                $(this).remove();
            ,
            resizable: false,
            title: title,
            modal: true
        ).text(message);
    
);

$(document).ready(function () 
    $(".delete-row").click(function () 
        $.confirm("Are you sure you want to delete this item?", "Production Control WF");
    );
);

但是，在执行此代码后出现确认对话框，但同时它也重定向，而无需单击任何按钮。

任何帮助将不胜感激。

【问题讨论】：

如果我在下面的回答解决了您的问题，请善待并将其标记为答案。否则让我知道如何改进它！干杯人！

您应该将 $(".delete-row").click(function () 替换为 $(".delete-row").click(function (e) e.preventDefault() ; 并且在点击事件结束时您应该返回 false。如果您还想禁用附加的其他事件，您可以查看 stopImmediatePropagation 和 stopPropagation。

【参考方案1】：

我的回答包含两部分：

替换默认的确认对话框 使用 SweetAlert 作为替代品

在第一部分中，我解释了替换默认确认对话框的过程。这是全局替换 Yii2-confirm-dialog 的官方且正确的方法。

在第二部分（可选）中，我将展示如何在 Yii2 中使用 SweetAlert 来替换对话框。

替换默认的确认对话框

实际上，自从 Yii2 推出以来，yii.js 进行了大修，这很容易。您必须创建一个 JS 文件，并将其部署到您的 web 文件夹。这样做如下：

1。为 JS-File 创建文件夹

在您的网络文件夹中创建一个名为 js（或任何您想要的名称）的文件夹

2。创建实际的 JS 文件

在第 1 步的文件夹中创建一个名为 yii_overrides.js 的 JS 文件 在此文件中，您使用自己的处理程序方法覆盖 yii.confirm 变量。

我的yii_overrides.js 看起来像这样：

/**
 * Override the default yii confirm dialog. This function is 
 * called by yii when a confirmation is requested.
 *
 * @param string message the message to display
 * @param string ok callback triggered when confirmation is true
 * @param string cancelCallback callback triggered when cancelled
 */
yii.confirm = function (message, okCallback, cancelCallback) 
   swal(
       title: message,
       type: 'warning',
       showCancelButton: true,
       closeOnConfirm: true,
       allowOutsideClick: true
   , okCallback);
;

swal 函数调用SweetAlert-Projects 漂亮的警报框。随意使用您想要的任何确认样式或扩展。不过 SweetAlert 看起来很棒……

3。将 JS 文件添加到您的 Yii2-asset-bundle 中

打开 assets\AppAsset.php 并添加您的 JS 文件以确保将其添加到您的 HTML 标题中。您的文件现在应该如下所示：

class AppAsset extends AssetBundle

    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $css = [
        'css/site.css',
    ];
    public $js = [
        //HERE!
        'js/yii_overrides.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',

        //additional import of third party alert project
        'app\assets\SweetAlertAsset',
    ];

如有必要，请确保包含自定义警报库的资产。您可以在上面代码中$depends-变量的最后一行看到这一点。

添加 SweetAlert

如果您也想使用 SweetAlert，请按照以下方法操作。有一个 yii2-extension 可以为你提供一个资产包，但它不是最新的并且使用旧的文件名。因此它不起作用。但是自己做很容易。

1。添加对 SweetAlert 的依赖

在你的composer.json添加

"bower-asset/sweetalert": "1.1.*"

到所需的部分并触发composer update。您现在有了必要的文件。

2。创建 SweetAlertAsset

在项目的assets 文件夹中的AppAsset 旁边创建一个名为SweetAlertAsset.php 的文件。这是内容：

<?php
namespace app\assets;

class SweetAlertAsset extends \yii\web\AssetBundle

    public $sourcePath = '@bower/sweetalert/dist';
    public $css = [
        'sweetalert.css',
    ];
    public $js = [
        'sweetalert.min.js'
    ];

在AppAsset 中引用它，如上所示。

3。完成

简单，不是吗！？

【讨论】：

如果你使用bootstrap，我建议使用lipis.github.io/bootstrap-sweetalert项目，如果有额外的选择，比如confirmButtonClass。

【参考方案2】：

基于Sweet Alert 2.0 更新 我已将answer 修改为PLM57

SweetAlert 已将回调函数更改为 Promise。 这是承诺实现的示例覆盖代码：

/**
 * Override the default yii confirm dialog. This function is 
 * called by yii when a confirmation is requested.
 *
 * @param string message the message to display
 * @param string ok callback triggered when confirmation is true
 * @param string cancelCallback callback triggered when cancelled
 */
yii.confirm = function (message, okCallback, cancelCallback) 
  swal(
    title: message,
    icon: 'warning',
    buttons: true
  ).then((action) => 
    if(action)
      okCallback()
    
  );

有关从 1.x 更新到 2.x 的更多信息，请参阅this

【参考方案3】：

短而简单的方法。

[
    'class' => 'yii\grid\ActionColumn',
    'template' => 'view update delete',
    'buttons' => [
        'delete' => function ($url, $model, $key) 
            return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
                'data-method' => 'post',
                'data-pjax' => 0,
                'data-confirm' => 'Your message text'
            ]);
        ,
    ]

【参考方案4】：

我认为你只需要将 $url 更改为 #

return Html::a('<span class="btn-xs btn-danger">Delete</span>', "#", [
               'title' => Yii::t('app', 'Delete'),
               //'data-confirm'=>'Are you sure you want to delete this item?',
               'data-method'=>'POST'
]);

【讨论】：

很奇怪，你检查过“href”属性值吗？如果值为“#”，它应该可以工作..

我尝试了# 和javascript:void(0);，但问题仍然存在

你确定不是缓存问题..？

不..不是缓存问题

绝对不是要走的路。这可以通过挂钩到 yii.js 中的全局方法来实现！