EasyUI学习笔记6：MIS开发利器_ datagrid插件(上)

一、引言

终于来到easyui系列笔记的重点部分——数据网格datagrid插件。在MIS开发中，需要展示数据大量数据并且频繁地进行CRUD操作，datagrid强大功能可以帮助我们简单快速实现各种功能，是必须要掌握开发MIS的利器。

为了将datagrid讲解清楚，我们打算分上、中、下三篇来进行介绍。

 上篇介绍datagrid数据网格创建，读取json数据并进行分页；

 中篇介绍配合dialog插件实现CRUD操作；

 下篇介绍datagrid如何与struts的action交换数据；

这次换个思路，首先给出最终实现的效果图，（分页栏没截出来）：

二、创建数据网格

查看http://www.jeasyui.net/我们发现datagrid提供三种创建数据网格的方式，偷个懒，直接从官网截图给出例子：

(1) 从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。

<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> 标签定义表格中的列。

<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）。

<table id="dg"></table>

$('#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，如下所示：

<div style="width:100%;height:100%;padding:0px;overflow:hidden">
<table id="grid"></table>
</div>

接下来编写如下js代码，代码几乎每一行都进行了注释，应该很清楚了。

<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数据格式如下：

{"total": ,"rows":[
{……},
{…}
]}

total为总记录数，rows为数据集合。为什么要这样写呢，依然龟腚！

这里我们给出测试的数据datagridData.json供参考：

{"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动态获取数据时就能起作用，下篇就可以了，喝点茶耐心等等。