0%

EasyUI的对话框(dialog)按钮重复点击的问题

EasyUI的对话框(dialog)按钮重复点击,导致多次请求数据

第一种实现思路,点击一次后把请求数据的按钮设置为disable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$('#mydialog').dialog({
width: 500,
height: 250,
modal: true,
title: 'my dialog',
iconCls: 'icon-edit',
minimizable: false,
closed: true,
maximizable: false,
buttons: [
{
id:"submit",
text: '确定',
iconCls: 'icon-ok',
handler: function() {
requestData(this);
}
},
{
text: '关闭',
iconCls: 'icon-no',
handler: function() {
$('#mydialog').dialog("close");
}
}
],
onClose: function() {
$("#form1").form("clear");
}
});

function requestData(button) {
$(button).linkbutton('disable');
//参数
var param={};
$.ajax({
url: '/api/requestData',
type: 'post',
data: { param },
dataType: 'json',
success: function(res) {
$(button).linkbutton('enable');
if (res.IsSuccess) {
$.messager.alert("提示", "操作成功", "info", function() {
location.reload();
});
} else {
$.messager.alert("提示", res.ErrMsg, "info");
}
},
error: function() {
$(button).linkbutton('enable');
$.messager.alert('提示', '请求出错!', 'error');
}
});
}

注意EasyUI的dialog的按钮设置disable和jQuery不一样,jQuery通过$(button).attr(‘disable’:”true”)来设置,但是EasyUI是通过$(button).linkbutton(‘enable’)来设置。

第二种方式,给button设置flag,点击一次后flag设置1,判断flag为1时提示toast

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$('#mydialog').dialog({
width: 500,
height: 250,
modal: true,
title: 'my dialog',
iconCls: 'icon-edit',
minimizable: false,
closed: true,
maximizable: false,
buttons: [
{
id:"submit",
text: '确定',
iconCls: 'icon-ok',
handler: function() {
if($('#submit').attr("flag")!=1){
requestData();
}else{
$.messager.show({
title:' ',
msg:'请不要重复提交',
showType:'fade',
timeout:1000,
style:{
}
});
}
$('#submit').attr("flag", 1);
}
},
{
text: '关闭',
iconCls: 'icon-no',
handler: function() {
$('#mydialog').dialog("close");
}
}
],
onClose: function() {
$("#form1").form("clear");
}
});

function requestData() {
//参数
var param={};
$.ajax({
url: '/api/requestData',
type: 'post',
data: { param },
dataType: 'json',
success: function(res) {
$('#submit').removeAttr("flag");
if (res.IsSuccess) {
$.messager.alert("提示", "操作成功", "info", function() {
location.reload();
});
} else {
$.messager.alert("提示", res.ErrMsg, "info");
}
},
error: function() {
$('#submit').removeAttr("flag");
$.messager.alert('提示', '请求出错!', 'error');
}
});
}

参考EasyUI官网:
http://www.jeasyui.com/documentation/index.php#