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

Question

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

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

以下是我的 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");
    });
});

然而，在执行此代码后会出现确认对话框，但同时也会在不单击任何按钮的情况下进行重定向。

如有任何帮助，我们将不胜感激。

Answer 1

我的回答包含两部分:

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

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

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

替换默认的确认对话框

自从 Yii2 发布以来，yii.js 已经过大修，这实际上非常简单。您必须创建一个 JS 文件，然后将其部署到您的 Web 文件夹中。这是按如下方式完成的:

1。为 JS 文件创建文件夹

在您的 web 文件夹中创建一个名为 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 - 项目漂亮的警报框。随意使用您想要的任何确认样式或扩展名。不过 SweetAlert 看起来很棒......

3。添加 JS 文件到你的 Yii2-asset-bundle

打开 assets\AppAsset.php 并添加您的 JS 文件以确保它将添加到您的 HTML header 中。您的文件现在应该看起来像这样:

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',
    ];
}

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

添加 SweetAlert

如果您也想使用 SweetAlert，请按以下步骤操作。有一个 yii2-extension 可以为您提供 Assets 包，但它不是最新的并且使用旧文件名。因此它不起作用。但是自己做起来非常容易。

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。完成

很简单，不是吗!？