因为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>天才是百分之一的灵感加上百分之九十九的努力
