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>
注意:生成easyui数据表格界面需要导入相关的esyui文件!这里不再赘述。
生成的表格如图:
实现后台的编码,这里需要下载并导入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;
}
这里只是简单的获取了前台的page和rows参数,并没有实现分页查询,但是这两个参数是日后用于分页查询的,限于篇幅,本篇博客就没有把数据库中数据查询出然后显示在数据表格,这里是手动写了两个测试对象,然后显示在前台。分页查询日后将单独写出。
做到这里,还需要在配置文件中配置数据表格的url(这里是基于搭建好的SSH框架):
<action name="init" class="com.zys.system.action.SysUserAction" method="init"> </action>
数据表格显示结果: