JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

来源：互联网发布：九型人格出生日期算法编辑：程序博客网时间：2024/05/18 00:31

因为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识别并显示数据，否则数据无法显示。

五、效果截图

//此处结束

0 0