javascript 如何在 Yii2 Gridview 中自定义默认数据确认对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30449098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize default data-confirm dialog box in Yii2 Gridview
提问by J.K.A.
I want to change the browser's default confirm dialog (data-confirm) box which comes on click of delete button.
我想更改点击删除按钮时浏览器的默认确认对话框（数据确认）框。
I want to replace this with custom dialog box.
我想用自定义对话框替换它。
Following is my Gridview Code:
以下是我的 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'
]);
}
]
],
],
]);
?>
My JQuery code:
我的 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");
});
});
However the confirm dialog box appearing after implementation of this code but simultaneously its redirecting as well without clicking on any button.
但是，在执行此代码后会出现确认对话框，但同时也无需单击任何按钮即可进行重定向。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by PLM57
My answer contains two parts:
我的回答包含两部分：
- Replacing the default confirm-dialog
- Using SweetAlert as the replacement
- 替换默认的确认对话框
- 使用 SweetAlert 作为替代
In the first part I explain the procedure to replace the default confirmation-dialog. This is the official and proper way to replace the Yii2-confirm-dialog globally.
在第一部分中，我解释了替换默认确认对话框的过程。这是在全球范围内替换 Yii2-confirm-dialog 的正式且正确的方法。
In the second (optional) part I show how to use SweetAlert in Yii2 to replace the dialog.
在第二部分（可选）中，我展示了如何在 Yii2 中使用 SweetAlert 来替换对话框。
Replacing the default confirm-dialog
替换默认的确认对话框
Its pretty easy actually since the yii.jswas overhauled since the launch of Yii2. You have to create a JS-file which you deploy to your web folder. This is done as follows:
yii.js自从 Yii2 推出以来，它实际上很容易进行大修。您必须创建一个 JS 文件，并将其部署到您的 Web 文件夹中。这是按如下方式完成的：
1. Create folder for JS-File
1. 为 JS-File 创建文件夹
In your web folder create a folder named js(or whatever name you wish)
在您的 web 文件夹中创建一个名为js（或您希望的任何名称）的文件夹
2. Create the actual JS-File
2. 创建实际的 JS 文件
In the folder from step 1 create a JS-file named for example yii_overrides.jsIn this file you override the yii.confirmvariable with your own handler-method.
在第 1 步的文件夹中，创建一个名为 example 的 JS 文件yii_overrides.js在此文件中，您可以yii.confirm使用自己的处理程序方法覆盖该变量。
My yii_overrides.jslooks like this:
我的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);
};
The swalfunction calls the SweetAlert-Projects beautiful alert-box. Feel free to use whatever confirmation-style or -extension you want. SweetAlert looks awesome though...
该swal函数调用SweetAlert-Projects 漂亮的警报框。随意使用您想要的任何确认样式或扩展名。SweetAlert 看起来棒极了...
3. Add JS-File to your Yii2-asset-bundle
3. 将 JS-File 添加到您的 Yii2-asset-bundle
Open assets\AppAsset.phpand add your JS-File to assure it will be added to your HTML-header. Your file should look something like this now:
打开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',
];
}
Also make sure to include the asset of your custom alert-library if necessary. You can see this on the last line of the $depends-variable in the code above.
如有必要，还要确保包含自定义警报库的资产。您可以$depends在上面代码中 -variable的最后一行看到这一点。
Adding SweetAlert
添加 SweetAlert
If you want to use SweetAlert as well, here is how you do it. There is a yii2-extension available providing you with an asset-bundle, but it is not current and uses old filenames. It therefore doesn't work. But its VERY easy to do it yourself.
如果您也想使用 SweetAlert，请按照以下方法操作。有一个 yii2-extension 可以为您提供资产包，但它不是最新的并且使用旧文件名。因此它不起作用。但它很容易自己做。
1. Add dependency to SweetAlert
1. 添加对 SweetAlert 的依赖
In your composer.jsonadd
在您composer.json添加
"bower-asset/sweetalert": "1.1.*"
to the required section and trigger composer update. You now have the necessary files.
到所需的部分并触发composer update. 您现在拥有了必要的文件。
2. Create SweetAlertAsset
2. 创建 SweetAlertAsset
Create a file named SweetAlertAsset.phpnext to your AppAssetin the assets-folder of your project. This is the content:
在项目的 - 文件夹中创建一个名为SweetAlertAsset.php您旁边的文件。这是内容：AppAssetassets
<?php
namespace app\assets;
class SweetAlertAsset extends \yii\web\AssetBundle
{
public $sourcePath = '@bower/sweetalert/dist';
public $css = [
'sweetalert.css',
];
public $js = [
'sweetalert.min.js'
];
}
Reference it within AppAssetas seen further above.
AppAsset如上所见，在其中引用它。
3. Done
3. 完成
Easy, wasn't it!?
很简单，不是吗！？
回答by Kai Loon
Based on Sweet Alert 2.0updates
i've modify the answerby PLM57
SweetAlert has changed callback functions to promises.
Here is the example override code for promise implementation:
SweetAlert 已将回调函数更改为承诺。
以下是承诺实现的示例覆盖代码：
/**
* 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()
}
});
}
For more info on update from 1.x to 2.x, refer to this
有关从 1.x 更新到 2.x 的更多信息，请参阅此
回答by karmi
Short and simple way.
简短而简单的方法。
[
'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'
]);
},
]
回答by James Everest
i think you only need to change $url to #
我认为你只需要将 $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'
]);
