easyui的數據表格（DataGrid）顯示後臺數據的一些關鍵點：
1.easyui數據表格生成數據需要解析JSON格式的數據；
2.由於需要分頁查詢，後臺需要獲取easyui的page和rows參數
下面具體演示如何實現：
創建一個easyui數據表格：
<body>
<div id="tb">
學號：<input class="easyui-textbox" style="width:75px;height:22px" name="id" />
姓名：<input class="easyui-textbox" style="width:75px;height:22px" name="name" />
<a href="#" οnclick="doEdit()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查詢</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ban',plain:true">啓禁</a>
</div>
<table id="dg"></table>
</body><script type="text/javascript">
$('#dg').datagrid({
url:'/mssh/init.action',
title:'用戶列表',
border:false,
rownumbers:true,
toolbar: '#tb',
pagination: true,
fit: true,
pageSize:"5",
pageList:[5,10,15,20],
editorHeight: "100",
striped: "true",
singleSelect: true,
beforePageText: '第',
afterPageText: '頁 共 {pages} 頁',
displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄',
columns:[[
{field:'id',title:'學號',width:120},
{field:'name',title:'姓名',width:120},
{field:'password',title:'密碼',width:120},
{field:'isban',title:'啓禁',width:50}
]]
});
</script>生成的表格如圖：
實現後臺的編碼，這裏需要下載並導入net.sf.json 包：
/**
*用戶列表初始化
*/
public String init(){
int page = this.getIntParam("page", 1);
int rows = this.getIntParam("rows",15);
SysUser sysUser=new SysUser();
sysUser.setId("2005");
sysUser.setName("張三");
sysUser.setPassword("132");
SysUser sysUser1=new SysUser();
sysUser1.setId("2006");
sysUser1.setName("張四");
sysUser1.setPassword("good");
List<SysUser> list=new ArrayList<SysUser>();
list.add(sysUser1);
list.add(sysUser);
JSONArray json = JSONArray.fromObject(list);
String s = "{\"total\":" + listSize + ",\"rows\":" + json + "}";
this.outJson(s);
return null;
}
做到這裏，還需要在配置文件中配置數據表格的url(這裏是基於搭建好的SSH框架):
<action name="init" class="com.zys.system.action.SysUserAction" method="init"> </action>數據表格顯示結果：
