Struts2+Datagrid表格显示（可显示多表内容）

概述

　　最近学到EasyUI的Datagrid数据网格，然后就做了一个小例子，中间层利用Struts2来完成，DAO层用的是Hibernate。

数据库

　　数据库涉及到stuednt（name,noid,password,hobby,tno）表和teacher（tno，tname）表；实体的映射和实体之间关系的配置用的是注解的方式(mapper不能忘哦)。

@Entity
@Table
public class Teacher {
    private String tname;
    @Id
    private String tno;
//set/get方法略
}

@Entity
@Table
public class Student {

    private String name;
    @Id
    private String noid;
    private String password;
    private String hobby;
    @ManyToOne(cascade=CascadeType.ALL,fetch=FetchType.EAGER)
    @JoinColumn(name="tno",nullable=false,insertable=false,updatable=false)
        private Teacher teacher;
    //set/get方法略
    
}    

　　中间对数据库一个是获得所有的数据库的总条数，一个实现按条件分页查询代码如下：

public List<Student> queryAllStudent(){
        Session session = factory.openSession();
        Transaction transaction = session.beginTransaction();
        String sql = "from Student";
        List<Student> list = null ;
        try {
             list = (List<Student>) session.createQuery(sql).list();
             transaction.commit();
        } catch (HibernateException e) {
            transaction.rollback();
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            
            session.close();
        }
        return list;
    }
    //通过学号姓名查询
    public List<Student> queryStudentByNameOrNoid(String queryName,String queryNoid,int page,int rows){
        String sql = "from Student where 1=1 ";
        List<Student> list = null ;
        boolean ss = null==queryName;
        if((null==queryName) || ("".equals(queryName))){
            sql = sql + "and to_char(1)=?";
            queryName = "1";    
        }else{
            sql = sql + "and name=?";    
        }
        if((null == queryNoid) || ("".equals(queryNoid))){
            sql = sql + "and to_char(1)=?";
            queryNoid = "1";
            
        }else{
            sql = sql + "and noid=?";
        }
        Session session = factory.openSession();
        Transaction transaction = session.beginTransaction();
        try {    
                 list = (List<Student>) session.createQuery(sql).setParameter(0, queryName)
                         .setParameter(1, queryNoid)
                         .setFirstResult((page-1)*rows)
                         .setMaxResults(rows).list();
             transaction.commit();
        } catch (HibernateException e) {
            transaction.rollback();
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            
            session.close();
        }
        return list;
    }
//其他代码略

中间层（Struts2）

　　中间的配置文件内容（struts.xml）为：

<struts>
    <constant name="struts.custom.i18n.resources" value="info">
    </constant>
    <constant name="struts.enable.DynamicMethodInvocation" value="true"></constant>
    <package name="hm" namespace="/" extends="struts-default,json-default">
        <action name="queryStudentByNameOrNoid" class="com.lt.action.StudentAction" method="queryStudentByNameOrNoid">
            <result name="success" type="json">
            <param name="root">s</param>
            <param name="excludeProperties">success</param></result>
            <result name="error"></result>
        </action>    
</package>
</struts>
//中间其他配置内容略

　　Action的方法为：

public class StudentAction extends ActionSupport {
    private Map <String,Object>request;  
    
        private Map <String,Object>session;  
     
        private Map <String,Object>application;  
    private Map<String,Object> s ;
    private Student student;
    
    private String queryName;
    private String queryNoid;
    
    private int page;
    private int rows;
    StudentDao studentDao = new StudentDao(); 

public String queryStudentByNameOrNoid(){
         List<Student> student = new ArrayList<>();
         List<Student> student1 = new ArrayList<>();
         List<Teacher> student2 = new ArrayList<>();
         List<Object> sl = new ArrayList<>();
         s = new HashMap<String, Object>();
         student = studentDao.queryStudentByNameOrNoid(queryName, queryNoid,page,rows);
         student1 = studentDao.queryAllStudent();
         s.put("total", student1.size());
         System.out.println(student1.size());
         s.put("rows", student);
         return SUCCESS;
     }

//其他略
}

　页面内容：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function lal(){
        queryName = $("#queryName").val();
        queryNoid = $("#queryNoid").val();
        //var url = "queryStudentByNameOrNoid.action";
        //$("#detilfrom").attr("url",url);
        $("#detilfrom").datagrid('load',{queryName:queryName,queryNoid:queryNoid});
        }



</script>
    <h2>DataGrid Complex Toolbar</h2>

    <div style="margin:20px 0;"></div>
    <table id="detilfrom" class="easyui-datagrid" title="学生列表" style="width:450px;height:300px"
     pagination="true" 
            data-options="rownumbers:true,singleSelect:true,url:'queryStudentByNameOrNoid.action',method:'get',toolbar:'#tb,#ft',footer:'#ft'">
        <thead>
            <tr>
                <th data-options="field:'name',width:80">姓名</th>
                <th data-options="field:'noid',width:100">学号</th>
                <th data-options="field:'password',width:80,align:'right'">密码</th>
                <th data-options="field:'hobby',width:80,align:'right'">爱好</th>
                <th data-options="field:'tname',width:80,align:'right', formatter: function (value, rec) {
                        return rec.teacher['tname'];}">教师姓名</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:2px 5px;">
        姓名: <input id="queryName"  style="width:110px">
        学号: <input id="queryNoid"  style="width:110px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="lal()">Search</a>
    </div>
    <div id="ft" style="padding:2px 5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
    </div>
</body>
</html>

　　需要注意的是：

　　1.datagrid接收的数据格式为（从EasyUI的Demo中copy）：

{"total":28,"rows":[
	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
],"footer":[
	{"unitcost":19.80,"listprice":60.40,"productid":"Average:"},
	{"unitcost":198.00,"listprice":604.00,"productid":"Total:"}
]}

　　其中total和rows必不可少，total为总条数，rows为内容。

　　2.在上述的数据格式中若有嵌套的json数据，要想在表格中展示可以利用formatter属性（见jsp页面中的‘’教师姓名‘’列）；我的表格中的数据格式为（student实体属性中包含teache属性，为俩张变中的内容，现在利用formatter可以全部显示）

对于datagrid显示多表数据也可以利用后台数据输出格式来控制（可以利用mybatis查询的结果控制）：

{"total":2,"rows":[{"hobby":"123","name":"刘晓杰","noid":"123","password":"123","teacher":{"tname":"小刘","tno":"012"}},{"hobby":"456","name":"拉拉","noid":"456","password":"456","teacher":{"tname":"小拉","tno":"125"}}]}

 

 　　3.下面是查询的标签设置，若像下面书写，href为#时，点击查询只发送一条请求，若为其他则会发送俩次请求，导致查询结果出错。查看其他的解决datagrid发送俩次请求的解决方式—— 一种是去掉class，一种是去除url设置。由于和此处的用法有出入，因此没用采用。

<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="lal()">Search</a>

参考内容：

http://www.cnblogs.com/easypass/archive/2012/12/16/2820996.html

http://blog.csdn.net/qiushisoftware/article/details/37991591