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

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

五、效果截图

技术分享


//此处结束

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。