一、引言
上篇笔记我们已经新建了datagrid，并能够读取本地json数据。表格上方有工具栏，有添加、修改、删除、刷新4个按钮。表格下方有分页栏。本篇将给这些按钮添加事件。
二、数据管理对话框
首先，我们需要一个对数据进行管理的对话框，那对话框放在哪个页面呢？
开发MIS系统中一般有两种方案：一是数据列表(包括删除操作)和数据管理(添加和修改)在一个页面，另一种数据列表和数据管理各建一个页面。分开的话职责相对清晰，代码也不用堆在一起，但会涉及到页面跳转和传递数据的问题，交互复杂点。
作为一个小白笔记，我们这里采用前者。
在customer.html中添加如下div
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
div id="dialog" data-options="closed:true" title="客户管理" style="width:250px;height:200px;text-align:center" >
<
form
id
=
"form"
method
=
"post"
>
<
div
>
<
label
>客户编号</
label
>
<
input
name
=
"customerNo"
data-options
=
"required:true"
/>
</
div
>
<
div
>
<
label
>客户名称</
label
>
<
input
name
=
"customerName"
data-options
=
"required:true"
/>
</
div
>
<
div
>
<
label
>联系电话</
label
>
<
input
name
=
"telephone"
data-options
=
"required:false"
/>
</
div
>
<
div
>
<
label
>联系地址</
label
>
<
input
name
=
"address"
data-options
=
"required:false"
/>
</
div
>
</
form
>
</
div
>
|
对话框需要用到easyui-dialog插件。必要解释如下：
(1) closed用来定义该对话框默认是关闭的。也就是说，虽然这段div在页面上，但运行时其实是看不见的。
(2) easyui-validatebox插件可以让我们非常轻松地对文本输入框进行格式校验。比如这里的required属性表示是否可以为空，true代表必填字段。
(3) 请恕我啰嗦，代码中id诸如form、dialog、gird等一定要与js中#form，#dialog，#grid等一定要相同。
(4) 咦，怎么没有“保存”和“取消”那两个按钮。别着急，我们使用js代码实现的。
显示对话框的js代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/* 显示Dialog*/
function
openDialog(title){
$(
"#dialog"
).dialog({
resizable:
false
,
modal:
true
,
buttons: [{
//设置下方按钮数组
text:
'保存'
,
iconCls:
'icon-save'
,
handler:
function
() {
save();
}
}, {
text:
'取消'
,
iconCls:
'icon-cancel'
,
handler:
function
() {
closeDialog();
}
}]
});
$(
"#dialog"
).dialog(
'setTitle'
, title);
$(
"#dialog"
).dialog(
'open'
);
}
|
我们将显示对话款封装成了一个函数，参数是title。显示对话框其实是不用参数的，即
$("#dialog").dialog('open');
那封装的方法为什么要设参数呢？因为添加操作和修改操作我们是用同一个对话框，这样可以让它根据操作不同显示不同标题。
modal属性学过swing同学都知道啦，设为true就是有模对话框，显示时就无法激活其他页面。两个按钮调用的方法分别是保存数据和关闭对话框。关闭对话框方法实现，其实就2句：
|
1
2
3
4
5
|
/* 关闭Dialog*/
function
closeDialog() {
$(
"#form"
).form(
'clear'
);
// 清空form的数据
$(
"#dialog"
).dialog(
'close'
);
// 关闭dialog
}
|
至于保存数据方法实现，请稍等片刻，和添加、修改操作一起奉上。
三、添加和修改操作
1. 添加操作
直接上js代码：
|
1
2
3
4
5
6
|
/* 添加数据*/
function
add() {
openDialog(
'添加客户'
);
// 显示添加数据dialog窗口
$(
"#form"
).form(
'clear'
);
// 清空form的数据
url =
'customer!add.action'
;
//后台添加数据action
}
|
显示对话框，标题为“添加客户”，清空表单数据。
customer!add.action（下篇奉上）是后台struts添加数据操作地址，这里改成你的服务器数据操作地址就可以了。
这里出现了一个新的easyui插件，form表单插件。
2. 修改操作
还是先贴代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* 修改数据*/
function
edit() {
var
row = $(
'#grid'
).datagrid(
'getSelected'
);
得到选中的一行数据
//如果没有选中记录
if
(row ==
null
){
$.messager.alert(
"提示"
,
"请选择一条记录"
,
'info'
);
return
;
}
openDialog(
'修改客户'
);
// 显示更新数据dialog窗口
$(
"#form"
).form(
'load'
, row);
// 加载选择行数据
url =
'customer!edit.action?id='
+row.id;
//后台更新数据action
}
|
修改操作稍微复杂点，解释如下：
首先调用datagrid的getSelected方法选择一行。注意，如果采用这样的交互方式，建议把datagrid的singleSelect 属性设为true，代表最多只能选一行。把这一行数据存在row中。最爽的就是接下来这句了$("#form").form('load', row)。一句就能把数据加载到对话框里，想当年我们用jsp的时候…….不堪回首
3. 保存数据
依旧先上代码：
|
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
|
/* 保存数据*/
function
save(){
$(
'#form'
).form(
'submit'
,{
url: url,
//提交地址
onSubmit:
function
(){
return
$(
this
).form(
'validate'
);
//前台字段格式校验
},
success:
function
(result){
var
result = eval(
'('
+result+
')'
);
if
(result.success){
closeDialog();
// 调用closeDialog;
reload();
// 重新加载
$.messager.show({
//显示正确信息
title:
'提示'
,
msg: result.msg
});
}
else
{
$.messager.show({
//显示错误信息
title:
'错误'
,
msg: result.msg
});
}
}
});
}
|
这个好像更为复杂点。
查看http://www.jeasyui.net/表单插件如何提交数据。copy三段示例代码：
去做一个提交动作
|
1
2
3
4
5
6
7
8
9
10
11
|
1.
// call 'submit' method of form plugin to submit the form
2. $(
'#ff'
).form(
'submit'
, {
3. url:...,
4. onSubmit:
function
(){
5.
// do some check
6.
// return false to prevent submit;
7. },
8. success:
function
(data){
9. alert(data)
10. }
11. });
|
通过额外的参数提交
|
1
2
3
4
5
6
7
|
1. $(
'#ff'
).form(
'submit'
, {
2. url:...,
3. onSubmit:
function
(param){
4. param.p1 =
'value1'
;
5. param.p2 =
'value2'
;
6. }
7. });
|
现在在 'success' 回调函数中处理 JSON 字符串。
|
1
2
3
4
5
6
7
8
|
1. $(
'#ff'
).form(
'submit'
, {
2. success:
function
(data){
3.
var
data = eval(
'('
+ data +
')'
);
// change the JSON string to javascript object
4.
if
(data.success){
5. alert(data.message)
6. }
7. }
8. });
|
相信对照API你已经懂得七七八八了，不再解释。再次强调，看官方的api、教程、demo是灰常灰常灰常重要。
四、删除和刷新操作
1. 删除操作
依旧直接上代码：
|
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
|
/* 删除数据*/
function
remove(){
var
row = $(
'#grid'
).datagrid(
'getSelected'
);
//如果没有选中记录
if
(row ==
null
){
$.messager.alert(
"提示"
,
"请选择一条记录"
,
'info'
);
return
;
}
$.messager.confirm(
'确认'
,
'确定要删除吗？'
,
function
(r) {
if
(r) {
//提交到后台的action
$.post(
'customer!remove.action'
, { id: row.id },
function
(result) {
if
(result.success) {
reload();
$.messager.show({
//显示正确信息
title:
'提示'
,
msg: result.msg
});
}
else
{
$.messager.show({
//显示错误信息
title:
'错误'
,
msg: result.msg
});
}
},
'json'
);
}
});
}
|
后台删除数据需要传一个id，即所选行的row.id。其余不解释。我已经越来越懒了，版式都懒得排了，可见我是一个极度缺乏耐心的人。
2.刷新操作
上述代码经常能看到一句，reload()。这是什么？这其实是自己封装的，作用刷新页面。其实就一句，脱裤子放P，一句你还封装。其实还是有必要的，为刷新按钮服务，我有对称强迫症，必须一个按钮调用一个方法。
|
1
2
3
4
|
/* 刷新grid*/
function
reload(){
$(
'#grid'
).datagrid(
'reload'
);
}
|
伸个懒腰，easyui的笔记终于临近尾声了，最后一篇就是与ssh的struts的action交换数据了。
3780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
