zoukankan      html  css  js  c++  java
  • Struts2+Datagrid表格显示(可显示多表内容)

    概述

      最近学到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 }
    Teacher.java
     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 }    
    Student.java

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

     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

  • 相关阅读:
    SpringCloudAlibaba学习笔记-简介
    SpringCloudAlibaba学习笔记-目录
    go语言学习笔记-目录
    go语言学习笔记-配置idea开发go编程语言并配置导入本地包
    go语言学习笔记-Windows10开发环境安装和环境变量配置
    我与阿里云的日常-QuickBI开发教程
    我与阿里云的日常-阿里云帐号注册
    消息队列 RabbitMq(6)高级特性
    消息队列 (5) RabbtMQ SpringBoot整合
    Nginx的安装和使用
  • 原文地址:https://www.cnblogs.com/ldsggv/p/7570845.html
Copyright © 2011-2022 走看看