因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据。此处,我们使用Struts2框架整合DataGrid,实现数据的显示。
一、页面内容
为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>房产信息管理</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <table id="housesManage" style="height: 100%"></table> <div id="addHouse"></div> <div id="updateHouse"></div> <script type="text/javascript"> $(document).ready(function(){ //datagrid设置 $('#housesManage').datagrid({ title:'房产列表', //表格标题 iconCls:'icon-list', //表格图标 nowrap: false, //是否只显示一行,即文本过多是否省略部分。 striped: true, fitColumns:true, //防止水平滚动 scrollbarSize:0, //去掉右侧滚动条列 url:"houses/showHouses!show", //action地址 idField:'id', collapsible:false,//是否可折叠的 singleSelect:true,//只能单选 frozenColumns:[[ {field:'ck',checkbox:true} ]], pagination:true, //包含分页 pageSize: 10, pageList: [10,20,30],//可以设置每页记录条数的列表 rownumbers:true, singleSelect:true,//只能单选 columns :[[{ field : 'id', title : 'ID', align:'center', hidden : true },{ field : 'unitNum', title : "楼栋号", width : 100, align:'center', sortable : true, },{ field : 'doorCard', title : "门牌号", width : 100, align:'center', sortable : true, },{ field : 'roomArea', title : "房屋面积(平米)", width : 100, align:'center', sortable : true, },{ field : 'buildTime', title : "建筑时间", width : 150, align:'center', sortable : true, },{ field : 'isUse', title : "使用状态", width : 80, align:'center', sortable : true, formatter: function(value,row,index){ if(value=="0"){ return '已使用'; }else{ return '<font color="red">空置</font>'; } } }]], toolbar:[{ text:'添加', iconCls:'icon-add', handler:function(){ //显示上传界面 $('#addHouse').dialog({ title: '房产管理|添加房屋信息', width: 500, iconCls:'icon-add', height: 300, closed: false, cache: false, href: 'houses/addHouse.jsp', modal: true }); } }, '-', { text: "删除", iconCls: "icon-cut", handler: function () { //选中要修改删除的行 var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行 if (rows.length > 0) {//选中几行的话触发事件 $.messager.confirm("提示", "您确定要重置该用户密码吗?", function (res) {//提示是否删除 if (res) { //获得编号 var id=rows[0].id; // 获得删除行索引 var tableindex = $("#housesManage").datagrid('getRowIndex', id); $.post('houses/delHouse!delete',{ "house.id":id },function(data){ if(data.message=="2"){ $.messager.alert('温馨提示','删除失败!','error'); }else{ //删除选中的行 $("#housesManage").datagrid("deleteRow",tableindex); } }); } }); } } },'-',{ text: "修改", iconCls: "icon-edit", handler: function (){ //选中要修改删除的行 var rows = $("#housesManage").datagrid('getSelections'); //返回所有选中的行 if (rows.length > 0) {//选中几行的话触发事件 //获得编号 var id=rows[0].id; //显示修改界面 $('#updateHouse').dialog({ title: '房产管理|修改房屋信息', width: 500, iconCls:'icon-edit', height: 300, closed: false, cache: false, href: 'houses/getHouse!get?house.id='+id, modal: true }); } } },'-',{ text: "刷新列表", iconCls: "icon-reload", handler: function (){ $("#housesManage").datagrid('reload'); } }] ,onLoadError : function() { $.messager.alert('温馨提示','数据加载失败!','error'); } }); displayMsg(); }); //改变分页显示 function displayMsg() { $('#housesManage').datagrid('getPager').pagination({ displayMsg : '当前显示<font color="red"> {from} - {to} </font>条记录 共 <font color="red">{total}</font> 条记录' }); } </script> </body> </html>
由上可知,EasyUI数据表格可以通过JS生成,看上去比较清爽,也可以使用<tr><td></td></tr>方式生成,但是看上去比较乱。当点击链接按钮的时候,页面会根据url中action请求地址,自动去执行对应的action,并将结果返回。
二、struts.xml中配置
<!-- 显示房产信息 --> <action name="showHouses" class="com.wy.action.HouseAction" method="show"> <result type="json" name="success"> <param name="root">result</param> </result> </action>
三、对应的Action 处理类
private JSONObject result; //返回的json private String rows; //每页显示的记录数 private String page; //当前第几页 //显示房产基本信息 public String show(){ //当前页 int intPage = Integer.parseInt((page == null || page == "0") ? "1":page); //每页显示条数 int number = Integer.parseInt((rows == null || rows == "0") ? "10":rows); //每页的开始记录 第一页为1 第二页为number +1 int start = (intPage-1)*number; HouseDao houseDao=new HouseDao(); ArrayList<THouse> listHouses=houseDao.getHouses(start, number); //从数据库中查询数据 Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map int count=houseDao.getHouseCount(); //求出总记录数 //total键 存放总记录数,必须的 jsonMap.put("total", count); jsonMap.put("rows", listHouses);//rows键 存放每页记录 list result=JSONObject.fromObject(CommonUtil.getJsonNotNull(jsonMap)); return SUCCESS; }
action 类中,rows,page 是用于EasyUI分页操作的,EasyUI会自动向后台传入参数:当前页及每页显示记录数,以此实现分页功能,此处只需要定义这两个变量即可。
四、EasyUI JSON数据格式
{"total":5,"rows":[{"doorCard":"1-1101","id":22,"roomArea":"140","unitNum":1,"tusers":[],"isUse":"1","buildTime":"2015-04-01"},{"doorCard":"1-1202","id":29,"roomArea":"160","unitNum":1,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"2-2202","id":28,"roomArea":"160","unitNum":2,"tusers":[],"isUse":"0","buildTime":"2015-04-06"},{"doorCard":"3-3301","id":26,"roomArea":"150","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-13"},{"doorCard":"3-2102","id":27,"roomArea":"160","unitNum":3,"tusers":[],"isUse":"1","buildTime":"2015-04-06"}]}
后台返回的JSON格式必须是这样的,才能被前台EasyUI DataGrid识别并显示数据,否则数据无法显示。
五、效果截图
//此处结束
时间: 2024-10-09 02:48:18