Yii2:用 Sweet alert 替换 Gridview 使用的默认确认消息
Yii2: Replace default confirmation message used by Gridview with Sweet alert
我在我的项目中使用 yii2mod/yii2-sweet-alert,我在基础和高级主题上使用它,我喜欢它。
问题。
我如何更改网格默认确认对话框,这是一个普通的 javascript 确认,以便使用 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 更改为甜蜜警报。
我也在尝试作为第二个选项,让它与 Krajee/ Grid and 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
在您的 public 文件夹中创建一个 js 文件,在我的例子中
/backend/web/js/confirmSwal.js
并添加提供的代码:
添加这些行
yii.confirm = function (message, okCallback, cancelCallback) {
swal({
title: message,
type: 'warning',
showCancelButton: true,
closeOnConfirm: true,
allowOutsideClick: true
}, okCallback);
};
将此添加到
上的 AppAssets
/backend/assets/AppAssets.php
public $js = [
'/js/confirmSwal.js',
];
就是这样,效果很好。
再次感谢穆罕默德。
更新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!")
),该参数将是模态的 text
而不是它的 title
.
type
和 imageUrl
已替换为单个 icon
选项。如果您使用的是 shorthand 版本 (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);
};
我在我的项目中使用 yii2mod/yii2-sweet-alert,我在基础和高级主题上使用它,我喜欢它。
问题。 我如何更改网格默认确认对话框,这是一个普通的 javascript 确认,以便使用 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 更改为甜蜜警报。
我也在尝试作为第二个选项,让它与 Krajee/ Grid and 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
在您的 public 文件夹中创建一个 js 文件,在我的例子中
/backend/web/js/confirmSwal.js
并添加提供的代码:添加这些行
yii.confirm = function (message, okCallback, cancelCallback) { swal({ title: message, type: 'warning', showCancelButton: true, closeOnConfirm: true, allowOutsideClick: true }, okCallback); };
将此添加到
上的 AppAssets/backend/assets/AppAssets.php
public $js = [ '/js/confirmSwal.js', ];
就是这样,效果很好。
再次感谢穆罕默德。
更新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!")
),该参数将是模态的text
而不是它的title
. type
和imageUrl
已替换为单个icon
选项。如果您使用的是 shorthand 版本 (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);
};