Yii2: 用Sweet alert替换Gridview默认的确认消息

Question

我在项目中使用yii2mod/yii2-sweet-alert，在基本和高级主题上都使用它，我很喜欢它。

问题： 如何更改网格默认确认对话框，以便使用Sweet-alert使其外观更好？

我已经尝试修改删除按钮的模板，因为如果您想要更改消息，可以执行以下操作：

        [
            'class' => ActionColumn::className(),
            'template' => '{update}{delete}',
            'buttons' => [
                'delete' => function($url, $model){
                    return Html::a('<span class="glyphicon glyphicon-trash"></span>', ['delete', 'id' => $model->id], [
                        'class' => '',
                        'data' => [
                            'confirm' => 'Are you absolutely sure ? You will lose all the information about this user with this action.',
                            'method' => 'post',
                        ],
                    ]);
                }
            ]
        ]

但是我一直没有成功将确认消息从javascript更改为sweet alert。

---

我正在尝试第二种选择，使用Krajee/ Grid和actionColumn使其工作，但仍无法使其工作。 «这是我正在进行的第二个选择，以实现此目标»。

        [
            'class' => 'kartik\grid\ActionColumn',
            'viewOptions' => ['hidden' => true],
            'updateOptions' => ['title' => 'Edit events', 'data-toggle' => '??'],
            'deleteOptions' => ['title' => 'delete your event', 'data-toggle' => 'I am Lost here'],
        ],

请问如何改变这个行为？

---

如何解决问题的更多信息 - 感谢 @muhammad-omer-aslam

1. create a js file on your public folder, in my case
   /backend/web/js/confirmSwal.js and add the provided code:

   Add these lines

   yii.confirm = function (message, okCallback, cancelCallback) {
       swal({
           title: message,
           type: 'warning',
           showCancelButton: true,
           closeOnConfirm: true,
           allowOutsideClick: true
       }, okCallback);
   };
   

2. Add this to your AppAssets on

   /backend/assets/AppAssets.php

   public $js = [
       '/js/confirmSwal.js',
   ];
   

3. And that's it it works beautiful.

再次感谢穆罕默德。

- Pablo Palacios

Answer 1

更新2

只需要更正代码：

• okCallback.call() 或者加上括号 ()，像这样 'okCallback()`
• 然后 cancelCallback.call() 或者加上括号 cancelCallback()

在匿名函数 .then((selection)=>{}) 中，需要调用 okCallback 而不是仅使用它，所以 .then((selection)=>{}) 中的代码应该变成：

if(selection){ okCallback.call();}else{ cancelCallback.call();}

更新

以下选项在 sweetalert 2.0 版本中已经被弃用:

• callback 被 promise 替代: 如果用户点击确认按钮，承诺将解析为 true。如果警报被取消（通过在其外部单击），承诺会解析为 null。

• allowClickOutside 现在改为更加清晰的 closeOnClickOutside。

• showCancelButton 和 showConfirmButton 不再需要。相反，您可以设置 buttons: true 来显示两个按钮，或者设置 buttons: false 来隐藏所有按钮。默认情况下，只显示确认按钮。
• 当使用单个字符串参数（例如 swal("Hello world!")）时，该参数将成为模态框的文本而不是标题。
• type 和 imageUrl 已被替换为一个单一的 icon 选项。如果您正在使用简写版本（swal("Hi", "Hello world", "warning")），则无需更改任何内容。

因此，如果您正在使用版本号为 2.x 或从 1.x 升级，则可以将代码更改为以下内容。

yii.confirm = function (message, okCallback, cancelCallback) {
    swal({
            text: message,
            icon: 'warning',
            buttons : {
                cancel : {
                    text : "Oops! No",
                    value : null,
                    visible : true,
                    className : "",
                    closeModal : true
                },
                confirm : {
                    text : "Delete It Already",
                    value : true,
                    visible : true,
                    className : "",
                    closeModal : true
                }
            },
            closeOnClickOutside: true
    }).then((selection) => {
     if(selection){okCallback;}else{cancelCallback;}
    });
}

---

您可以使用以下代码覆盖 Yii2 默认的 data-confirm 弹出窗口：

基本步骤是包含资产，然后添加此JS:

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

- Muhammad Omer Aslam

---

谢谢。它工作得很好。 我会在我的问题上扩展您的解决方案。 - Pablo Palacios