一、引言
终于来到easyui系列笔记的重点部分——数据网格datagrid插件。在MIS开发中，需要展示数据大量数据并且频繁地进行CRUD操作，datagrid强大功能可以帮助我们简单快速实现各种功能，是必须要掌握开发MIS的利器。
为了将datagrid讲解清楚，我们打算分上、中、下三篇来进行介绍。
上篇介绍datagrid数据网格创建，读取json数据并进行分页；
中篇介绍配合dialog插件实现CRUD操作；
下篇介绍datagrid如何与struts的action交换数据；
这次换个思路，首先给出最终实现的效果图，（分页栏没截出来）：
二、创建数据网格
查看http://www.jeasyui.net/我们发现datagrid提供三种创建数据网格的方式，偷个懒，直接从官网截图给出例子：
(1) 从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table
class
=
"easyui-datagrid"
>
<thead>
<tr>
<th data-options=
"field:'code'"
>Code</th>
<th data-options=
"field:'name'"
>Name</th>
<th data-options=
"field:'price'"
>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td><td>name1</td><td>2323</td>
</tr>
<tr>
<td>002</td><td>name2</td><td>4612</td>
</tr>
</tbody>
</table>
|
(2) 通过 <table> 标记创建数据网格（datagrid）。嵌套的 <th> 标签定义表格中的列。
|
1
2
3
4
5
6
7
8
9
10
|
<table
class
=
"easyui-datagrid"
style=
"width:400px;height:250px"
data-options=
"url:'datagrid_data.json',fitColumns:true,singleSelect:true"
>
<thead>
<tr>
<th data-options=
"field:'code',width:100"
>Code</th>
<th data-options=
"field:'name',width:100"
>Name</th>
<th data-options=
"field:'price',width:100,align:'right'"
>Price</th>
</tr>
</thead>
</table>
|
(3) 使用 javascript 创建数据网格（datagrid）。
|
1
|
<
table
id
=
"dg"
></
table
>
|
|
1
2
3
4
5
6
7
8
|
$(
'#dg'
).datagrid({
url:
'datagrid_data.json'
,
columns:[[
{field:
'code'
,title:
'Code'
,width:100},
{field:
'name'
,title:
'Name'
,width:100},
{field:
'price'
,title:
'Price'
,width:100,align:
'right'
}
]]
});
|
这里我们采用第3种方式来创建datagrid。
首先在customer.html网页中编写div，如下所示：
|
1
2
3
|
<
div
style
=
"width:100%;height:100%;padding:0px;overflow:hidden"
>
<
table
id
=
"grid"
></
table
>
</
div
>
|
接下来编写如下js代码，代码几乎每一行都进行了注释，应该很清楚了。
|
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
|
<script type=
"text/javascript"
>
/* jquery入口*/
$(
function
() {
loadgrid();
//加载datagrid
});
/* 加载datagrid列表*/
function
loadgrid(){
$(
'#grid'
).datagrid({
title :
'客户'
,
url :
'datagridData.json'
,
loadMsg :
'正在加载…'
,
//当从远程站点载入数据时，显示的一条快捷信息。
fit :
true
,
//窗口自适应
nowrap:
false
,
//设置为true，当数据长度超出列宽时将会自动截取
fitColumns :
true
,
// 自动适应列宽
singleSelect :
true
,
// 每次只选中一行
sortName :
'customerNo'
,
//默认排序字段
sortOrder :
'asc'
,
// 升序asc/降序desc
striped :
true
,
// 隔行变色
pagination :
true
,
// 在底部显示分页工具栏
pageNumber : 1,
//初始化页码
pageSize : 20,
// 指定每页的大小，服务器要加上page属性和total属性
pageList : [ 20, 30, 50 ],
// 可以设置每页记录条数的列表，服务器要加上rows属性
//rownumbers : true, // 在最前面显示行号
idField :
'id'
,
// 主键属性
// 冻结列,当很多咧出现滚动条时该列不会动
frozenColumns : [ [
{title :
'序号'
, width :
'100'
, field :
'id'
, sortable :
true
},
{title :
'客户编号'
, width :
'100'
, field :
'customerNo'
, sortable :
true
},
{title :
'客户姓名'
, width :
'100'
, field :
'customerName'
,sortable :
true
}
] ],
columns : [ [
{title :
'联系电话'
, width :
'100'
, field :
'telephone'
, sortable :
false
},
{title :
'联系地址'
, width :
'200'
, field :
'address'
, sortable :
false
}
] ],
// 工具栏按钮
toolbar: [
"-"
, {id:
'add'
, text:
'添加'
, iconCls:
'icon-add'
, handler:
function
() { add()} },
"-"
, {id:
'edit'
, text:
'修改'
, iconCls:
'icon-edit'
, handler:
function
() { edit()} },
"-"
, {id:
'remove'
, text:
'删除'
,iconCls:
'icon-remove'
, handler:
function
() {remove()} },
"-"
, {id:
'remove'
, text:
'刷新'
,iconCls:
'icon-reload'
, handler:
function
() {reload()} }
]
});
}
</script>
|
接下来进行必要的补充解释：
(1) url属性指定从远程站点请求数据的 URL。这里可以指定一个struts的action访问地址，此处暂时读取本地json，具体内容稍后给出。
(2) sortOrder、pageSize、pageList这几个属性非常重要。后面与struts的action传递数据时需要传递几个属性值：order、page、total、rows。需要依靠这些属性实现分页和排序。
(3) 列使用了json格式进行定义，需要指定title/width/field/sortable等值。如果列数很多，可以固定某些列（frozenColumns），横向滚动条滚动时可固定不动。
(4) 工具栏里的add、edit、remove等方法为增删改操作。具体实现将在下一篇的给出。
三、datagrid的json数据
要让datagrid显示数据，远程传递或本地读取的json数据格式如下：
|
1
2
3
4
|
{
"total"
: ,
"rows"
:[
{……},
{…}
]}
|
total为总记录数，rows为数据集合。为什么要这样写呢，依然龟腚！
这里我们给出测试的数据datagridData.json供参考：
|
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
|
{
"total"
:25,
"rows"
:[
{
"id"
:
"1"
,
"customerNo"
:
"A001"
,
"customerName"
:
"张三1"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"2"
,
"customerNo"
:
"A002"
,
"customerName"
:
"张三2"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"3"
,
"customerNo"
:
"A003"
,
"customerName"
:
"张三3"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"4"
,
"customerNo"
:
"A004"
,
"customerName"
:
"张三4"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"5"
,
"customerNo"
:
"A005"
,
"customerName"
:
"张三5"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"6"
,
"customerNo"
:
"A006"
,
"customerName"
:
"张三6"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"7"
,
"customerNo"
:
"A007"
,
"customerName"
:
"张三7"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"8"
,
"customerNo"
:
"A008"
,
"customerName"
:
"张三8"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"9"
,
"customerNo"
:
"A009"
,
"customerName"
:
"张三9"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"10"
,
"customerNo"
:
"A010"
,
"customerName"
:
"张三10"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"11"
,
"customerNo"
:
"B001"
,
"customerName"
:
"李四1"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"12"
,
"customerNo"
:
"B002"
,
"customerName"
:
"李四2"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"13"
,
"customerNo"
:
"B003"
,
"customerName"
:
"李四3"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"14"
,
"customerNo"
:
"B004"
,
"customerName"
:
"李四4"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"15"
,
"customerNo"
:
"B005"
,
"customerName"
:
"李四5"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"16"
,
"customerNo"
:
"B006"
,
"customerName"
:
"李四6"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"17"
,
"customerNo"
:
"B007"
,
"customerName"
:
"李四7"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"18"
,
"customerNo"
:
"B008"
,
"customerName"
:
"李四8"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"19"
,
"customerNo"
:
"B009"
,
"customerName"
:
"李四9"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"20"
,
"customerNo"
:
"B010"
,
"customerName"
:
"李四10"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"21"
,
"customerNo"
:
"C001"
,
"customerName"
:
"王五1"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"22"
,
"customerNo"
:
"C002"
,
"customerName"
:
"王五2"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"23"
,
"customerNo"
:
"C003"
,
"customerName"
:
"王五3"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"24"
,
"customerNo"
:
"C004"
,
"customerName"
:
"王五4"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
},
{
"id"
:
"25"
,
"customerNo"
:
"C005"
,
"customerName"
:
"王五5"
,
"telephone"
:
"13888888888"
,
"address"
:
"广州天河区"
}
]}
|
哎，写这么多就是想超过20条能分页，请原谅我刷屏。
运行tomcat，在浏览器中输入localhost:8080/easyui/index.html，点击左侧菜单“客户”，就可以看到本笔记开篇的界面了。
需要提醒的是，由于工具栏按钮方法都没写，当然也不能增删改，中篇就可以了。由于读取本地json，分页排序暂时都是失效的，从action动态获取数据时就能起作用，下篇就可以了，喝点茶耐心等等。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
