Yii2:用 Sweet alert 替换 Gridview 使用的默认确认消息 [英] Yii2: Replace default confirmation message used by Gridview with Sweet alert

问题描述

我在我的项目中使用

请问您知道如何改变这种行为吗?

<小时>

更多关于如何解决问题 - 感谢

再次感谢穆罕默德.

解决方案

UPDATE2

只需更正您需要做的代码

• okCallback.call() 或添加括号 () 如'okCallback()`
• 然后 cancelCallback.call() 或添加括号 cancelCallback()

在 .then((selection)=>{}) 里面，它是一个匿名函数，需要被调用而不是仅仅使用 okCallback 所以代码在 .then((selection)=>{}) 里面变成

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

更新

以下选项在 sweetalert 2.0 版本中已弃用，

• callback 支持 promise:如果用户点击确认按钮，promise 解析为 true.如果警报被解除(通过在警报外部单击)，承诺将解析为 null.

• allowClickOutside 为清楚起见现在是 closeOnClickOutside.

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

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

yii.confirm = function (message, okCallback, cancelCallback) {swal({文本:消息，图标:'警告'，纽扣 : {取消 : {文本:哎呀！不"，值:空，可见:真实，班级名称 : ""，closeModal : 真},确认 : {text : "删除它已经",价值:真实，可见:真实，班级名称 : ""，closeModal : 真}},closeOnClickOutside: 真}).then((选择) => {如果(选择){okCallback;}else{cancelCallback;}});}

<小时>

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

基础是包含资产，然后添加这个JS:

/*** 覆盖默认的 yii 确认对话框.这个功能是* 当请求确认时由 yii 调用.** @param message 要显示的消息* @param okCallback 在确认为真时触发* 取消时触发@param cancelCallback 回调*/yii.confirm = 函数(消息，okCallback，cancelCallback){swal({标题:消息，类型:'警告'，显示取消按钮:真，closeOnConfirm: 真,允许外部点击:真}, okCallback);};

I am using yii2mod/yii2-sweet-alert in my projects, I am using it on basic and advanced themes, and I love it.

The question. How can I change the grid default confirmation dialog that is a plain javascript confirmation in order to use Sweet-alert to make it look better?

I already tried modifying the button's template for the delete, because if you want to change the message you will do the following:

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

But I haven't been successful on changing the confirmation message from the javascript one to sweet alert.

---

Also I am trying as a second option, to make it work with Krajee/ Grid and actionColumn but still can make it work «this is the second option am working, to do this».

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

Please any idea on how to change this behavior?

---

MORE ON HOW TO SOLVE IT - thanks to @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.

Thanks again to Muhammad.

解决方案

UPDATE2

Just correction in the code you need to do

• okCallback.call() or add parenthesis () like 'okCallback()`
• and then cancelCallback.call() or add parenthesis cancelCallback()

inside the .then((selection)=>{}) and it is an anonymous function and needs to be called rather than just using okCallback so the code inside the .then((selection)=>{}) becomes

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

UPDATE

The following options are deprecated in sweetalert 2.0 version,

• callback in favor of promise: If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.

• allowClickOutside is now closeOnClickOutside for clarity.

• showCancelButton and showConfirmButton are no longer needed. Instead, you can set buttons: true to show both buttons or buttons: false to hide all buttons. By default, only the confirm button is shown.
• When using a single string parameter (e.g. swal("Hello world!")), that parameter will be the modal's text instead of its title.
• type and imageUrl have been replaced with a single icon option. If you're using the shorthand version (swal("Hi", "Hello world", "warning")) you don't have to change anything.

So you can change the code to the following in case you are using ver 2.x or upgrading from 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;}
    });
}

---

You can override the Yii2 default data-confirm popup with the following code:

The basics are to include the asset, then add this 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);
};

这篇关于Yii2:用 Sweet alert 替换 Gridview 使用的默认确认消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！