如何在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确认对话的官方正确方法。

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

替换默认确认对话框

自从Yii2推出以来yii.js被彻底检修以来，实际上非常容易。您必须创建一个部署到Web文件夹的JS文件。这样做如下：

1。为JS-File

创建文件夹

在您的网络文件夹中，创建一个名为js（或您希望的名称）的文件夹

2。创建实际的JS-File

在步骤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-File添加到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扩展可用，为您提供资产包，但它不是最新的，并使用旧的文件名。因此它不起作用。但是你自己很容易做到。

1。添加对SweetAlert的依赖

在composer.json添加

中

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

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

2。创建SweetAlertAsset

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

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

很简单，不是吗？

Answer 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

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

Answer 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'
]);