概述
最近学到EasyUI的Datagrid数据网格,然后就做了一个小例子,中间层利用Struts2来完成,DAO层用的是Hibernate。
数据库
数据库涉及到stuednt(name,noid,password,hobby,tno)表和teacher(tno,tname)表;实体的映射和实体之间关系的配置用的是注解的方式(mapper不能忘哦)。
1 @Entity 2 @Table 3 public class Teacher { 4 private String tname; 5 @Id 6 private String tno; 7 //set/get方法略 8 }
1 @Entity 2 @Table 3 public class Student { 4 5 private String name; 6 @Id 7 private String noid; 8 private String password; 9 private String hobby; 10 @ManyToOne(cascade=CascadeType.ALL,fetch=FetchType.EAGER) 11 @JoinColumn(name="tno",nullable=false,insertable=false,updatable=false) 12 private Teacher teacher; 13 //set/get方法略 14 15 }
中间对数据库一个是获得所有的数据库的总条数,一个实现按条件分页查询代码如下:
1 public List<Student> queryAllStudent(){ 2 Session session = factory.openSession(); 3 Transaction transaction = session.beginTransaction(); 4 String sql = "from Student"; 5 List<Student> list = null ; 6 try { 7 list = (List<Student>) session.createQuery(sql).list(); 8 transaction.commit(); 9 } catch (HibernateException e) { 10 transaction.rollback(); 11 // TODO Auto-generated catch block 12 e.printStackTrace(); 13 }finally{ 14 15 session.close(); 16 } 17 return list; 18 } 19 //通过学号姓名查询 20 public List<Student> queryStudentByNameOrNoid(String queryName,String queryNoid,int page,int rows){ 21 String sql = "from Student where 1=1 "; 22 List<Student> list = null ; 23 boolean ss = null==queryName; 24 if((null==queryName) || ("".equals(queryName))){ 25 sql = sql + "and to_char(1)=?"; 26 queryName = "1"; 27 }else{ 28 sql = sql + "and name=?"; 29 } 30 if((null == queryNoid) || ("".equals(queryNoid))){ 31 sql = sql + "and to_char(1)=?"; 32 queryNoid = "1"; 33 34 }else{ 35 sql = sql + "and noid=?"; 36 } 37 Session session = factory.openSession(); 38 Transaction transaction = session.beginTransaction(); 39 try { 40 list = (List<Student>) session.createQuery(sql).setParameter(0, queryName) 41 .setParameter(1, queryNoid) 42 .setFirstResult((page-1)*rows) 43 .setMaxResults(rows).list(); 44 transaction.commit(); 45 } catch (HibernateException e) { 46 transaction.rollback(); 47 // TODO Auto-generated catch block 48 e.printStackTrace(); 49 }finally{ 50 51 session.close(); 52 } 53 return list; 54 } 55 //其他代码略
中间层(Struts2)
中间的配置文件内容(struts.xml)为:
1 <struts> 2 <constant name="struts.custom.i18n.resources" value="info"> 3 </constant> 4 <constant name="struts.enable.DynamicMethodInvocation" value="true"></constant> 5 <package name="hm" namespace="/" extends="struts-default,json-default"> 6 <action name="queryStudentByNameOrNoid" class="com.lt.action.StudentAction" method="queryStudentByNameOrNoid"> 7 <result name="success" type="json"> 8 <param name="root">s</param> 9 <param name="excludeProperties">success</param></result> 10 <result name="error"></result> 11 </action> 12 </package> 13 </struts> 14 //中间其他配置内容略
Action的方法为:
1 public class StudentAction extends ActionSupport { 2 private Map <String,Object>request; 3 4 private Map <String,Object>session; 5 6 private Map <String,Object>application; 7 private Map<String,Object> s ; 8 private Student student; 9 10 private String queryName; 11 private String queryNoid; 12 13 private int page; 14 private int rows; 15 StudentDao studentDao = new StudentDao(); 16 17 public String queryStudentByNameOrNoid(){ 18 List<Student> student = new ArrayList<>(); 19 List<Student> student1 = new ArrayList<>(); 20 List<Teacher> student2 = new ArrayList<>(); 21 List<Object> sl = new ArrayList<>(); 22 s = new HashMap<String, Object>(); 23 student = studentDao.queryStudentByNameOrNoid(queryName, queryNoid,page,rows); 24 student1 = studentDao.queryAllStudent(); 25 s.put("total", student1.size()); 26 System.out.println(student1.size()); 27 s.put("rows", student); 28 return SUCCESS; 29 } 30 31 //其他略 32 }
页面内容:
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="UTF-8"> 7 <title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title> 8 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css"> 9 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css"> 10 <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script> 11 <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script> 12 </head> 13 <body> 14 <script type="text/javascript"> 15 function lal(){ 16 queryName = $("#queryName").val(); 17 queryNoid = $("#queryNoid").val(); 18 //var url = "queryStudentByNameOrNoid.action"; 19 //$("#detilfrom").attr("url",url); 20 $("#detilfrom").datagrid('load',{queryName:queryName,queryNoid:queryNoid}); 21 } 22 23 24 25 </script> 26 <h2>DataGrid Complex Toolbar</h2> 27 28 <div style="margin:20px 0;"></div> 29 <table id="detilfrom" class="easyui-datagrid" title="学生列表" style="450px;height:300px" 30 pagination="true" 31 data-options="rownumbers:true,singleSelect:true,url:'queryStudentByNameOrNoid.action',method:'get',toolbar:'#tb,#ft',footer:'#ft'"> 32 <thead> 33 <tr> 34 <th data-options="field:'name',80">姓名</th> 35 <th data-options="field:'noid',100">学号</th> 36 <th data-options="field:'password',80,align:'right'">密码</th> 37 <th data-options="field:'hobby',80,align:'right'">爱好</th> 38 <th data-options="field:'tname',80,align:'right', formatter: function (value, rec) { 39 return rec.teacher['tname'];}">教师姓名</th> 40 </tr> 41 </thead> 42 </table> 43 <div id="tb" style="padding:2px 5px;"> 44 姓名: <input id="queryName" style="110px"> 45 学号: <input id="queryNoid" style="110px"> 46 <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="lal()">Search</a> 47 </div> 48 <div id="ft" style="padding:2px 5px;"> 49 <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a> 50 <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a> 51 <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a> 52 <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a> 53 <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a> 54 </div> 55 </body> 56 </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查询的结果控制):
1 {"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