web
web
阅读(3.1k) 书签 赞(0) 我要纠错

struts2 整合 jQuery-easyUI之datagrid小例子

2018-09-12 13:32 更新

运行结果：

jsp:

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>easyUi-dataGrid</title>
  8. <link rel="stylesheet" type="text/css" href="easyUi/easyui.css">
  9. <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  10. <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
  11. <script type="text/javascript">
  12.     var xmlhttp;
  13.     function verify(){
  14.         if(window.XMLHttpRequest){        
  15.             xmlhttp = new XMLHttpRequest();        
  16.             if(xmlhttp.overrideMimeType){            
  17.                 xmlhttp.overrideMimeType("text/xml");        
  18.             }    
  19.         }else if(window.ActiveXObject){      
  20.             var activerxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        
  21.             for(var i=0;i<activerxName.length;i++){            
  22.                 try{                 
  23.                     xmlhttp = new ActiveXObject(activerxName[i]);              
  24.                     break;            
  25.                 }catch(e){ 
  26.                 }        
  27.             }    
  28.         }
  29.         if(!xmlhttp){        
  30.             alert("XMLHttpRequest对象创建失败");        
  31.             return;    
  32.         }
  33.         xmlhttp.onreadystatechange = callback;    
  34.         xmlhttp.open("POST","studentAction.action?page=1&rows=5","true");    
  35.         xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
  36.         xmlhttp.send();
  37.     }
  38.     function callback(){  
  39.         if(xmlhttp.readyState == 4){        
  40.             if(xmlhttp.status == 200){        
  41.                 var oBook = eval('(' + xmlhttp.responseText + ')');
  42.                 $.messager.alert('test jsonData',xmlhttp.responseText);        
  43.             }   
  44.         }
  45.     }
  47.     
  48.     $(function(){
  49.         $("#tt").datagrid({
  50.             title:'DataGrid例子',
  51.             width:600,
  52.             height:400,
  53.             pageSize:5,
  54.             pageList:[5,10,15,20],
  55.             nowrap:false,
  56.             striped:true,
  57.             collapsible:true,
  58.             url:'studentAction.action',
  59.             loadMsg:'数据加载中...',
  60.             sortName:'code',
  61.             sortOrder:'desc',
  62.             remoteSort:false,
  65.             pagination :true,//可以不要下面的 注释部分  要显示中文 可以easyui-lang-zh_CN.js
  66.             frozenColumns:[[     
  67.                   {field:'ck',checkbox:true}
  68.             ]],
  69.             columns:[[     
  70.                   {title:'学号',field:'id',width:'50',rowspan:2,align:'center'},
  71.                   {title:'姓名',field:'name',width:'60',rowspan:2,align:'center'},
  72.                   {title:'性别',field:'sex',width:'50',rowspan:2,align:'center'},
  73.                   {title:'年龄',field:'age',width:'50',rowspan:2,align:'center'},     
  74.                   {title:'出生日期',field:'birthday',width:'120',rowspan:2,align:'center'},     
  75.                   {title:'班级',field:'className',width:'100',rowspan:2,align:'center'}    
  76.             ]],
  77.             pagination:true,    
  78.             rownumbers:true
  79.         });
  82. 　　    /* $('#tt').datagrid('getPager').pagination({    
  83.             displayMsg:'当前显示从{from}到{to}共{total}记录',    
  84.             onBeforeRefresh:function(pageNumber, pageSize){     
  85.                 $(this).pagination('loading');     
  86.                     //alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);     
  87.                 $(this).pagination('loaded');    
  88.             },   
  89.          });
  90.         */        
  91.     })();
  94. </script>
  95. </head>
  96. <body>
  97. <a href="javascript:vodi(0)" onclick="verify()" class="easyui-linkbutton">json</a>
  99.    
  100.  <h2><b>DataGrid</b></h2>   
  103.  <table id="tt"></table>
  104.  <hr>
  105.  <form action="">
  106.      <input type="submit" value="提 交">
  107.  </form>
  108. </body>
  109. </html>

说明：返回的json格式的数据格式：

{ "total": 2, "rows": [ { "userCode": "kf123456", "userName": "屌丝", "attorney": "屌丝", "addressee": "文哥哥", "userAddr": "大幅度舒服点", "tele2": "18987651525", "applyDate": "2013-06-27 09:11:38" }, { "userCode": "kf_123456", "userName": "白秋霜", "attorney": "白秋霜", "addressee": "文哥哥", "userAddr": "江湖难填恨海，剑出伤我心怀", "tele2": "18987651525", "applyDate": "2013-06-27 09:09:27" } ] }

web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  3.   <display-name></display-name>
  4.   <welcome-file-list>
  5.     <welcome-file>index.jsp</welcome-file>
  6.   </welcome-file-list>
  7.   <filter>
  8.     <filter-name>struts2</filter-name>
  9.     <filter-class>         org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
  10.       </filter-class>
  11.   </filter>
  12.   <filter-mapping>
  13.     <filter-name>struts2</filter-name>
  14.     <url-pattern>*.action</url-pattern>
  15.   </filter-mapping>
  16. </web-app>

strut2配置

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">; <struts> <package name="dataGrid" extends="json-default"> <action name="studentAction" class="com.yjdgis.action.StudentAction" method="execute"> <result name="success" type="json"/> </action> </package> </struts>

Action：

package com.yjdgis.action;

  2. import java.util.List;
  3. import javax.servlet.http.HttpServletRequest;
  4. import org.apache.struts2.interceptor.ServletRequestAware;
  5. import com.opensymphony.xwork2.ActionSupport;
  6. import com.yjdgis.dao.StudentDao;
  7. import com.yjdgis.dao.impl.StudentDaoBean;
  10. public class StudentAction extends ActionSupport implements ServletRequestAware {
  11.     private static final long serialVersionUID = 1L;
  12.     private StudentDao studentDao;
  13.     private HttpServletRequest request;
  14.     private int total;
  15.     private List<Object> rows;
  17.     
  18.     public StudentAction(){
  19.         System.out.println("Action初始化了");
  20.     }
  22.     
  23.     public int getTotal() {
  24.         return total;
  25.     }
  26.     public void setTotal(int total) {
  27.         this.total = total;
  28.     }
  31.     public List<Object> getRows() {
  32.         return rows;
  33.     }
  34.     public void setRows(List<Object> rows) {
  35.         this.rows = rows;
  36.     }
  39.     @Override
  40.     public void setServletRequest(HttpServletRequest request) {
  41.         this.request = request;
  42.     }
  44.     
  45.     public String execute(){
  46.         int page = Integer.parseInt(request.getParameter("page"));
  47.         int row = Integer.parseInt(request.getParameter("rows"));
  48.         studentDao=new StudentDaoBean();
  51.         this.rows = studentDao.getStudent(page, row);
  52.         this.total = studentDao.getTotalPages(row);
  53.         System.out.println("总页数："+this.total);
  54.         return "success";
  55.     }
  56. }

dao接口:

package com.yjdgis.dao;

  1.  
  2. import java.util.List;
  4.  
  5. public interface StudentDao {
  6.     public List<Object> getStudent(int page,int rows);
  7.     public int getTotalPages(int rows);
  8. }

　dao.impl(模拟了一个数据库)

package com.yjdgis.dao.impl;

  1.  
  2. import java.util.ArrayList;
  3. import java.util.Date;
  4. import java.util.List;
  5. import com.yjdgis.dao.StudentDao;
  6. import com.yjdgis.domain.Student;
  8.  
  9. public class StudentDaoBean implements StudentDao {
  10.     private static List<Student> list ;
  11.     static{
  12. //模拟数据<br>      list = new ArrayList<Student>();
  13.         for(int i=1;i<=110023;i++){
  14.             Student st = new Student(i,i,"NAME"+i,new Date(),"ClassName"+i,i%2==0? '0':'1');
  15.             list.add(st);
  16.         }
  17.     }
  19.  
  20.     @Override
  21.     public List<Object> getStudent(int page, int rows) {
  22.         System.out.println(page +" : "+ rows);
  23.         List<Object> students = new ArrayList<Object>();
  24.         for(int i=page*rows ;i<rows*(page+1); i++ ){
  25.             students.add(list.get(i));
  26.         }
  27. //获取数据<br>      return students;
  28.     }
  30.  
  31.     @Override
  32.     public int getTotalPages(int rows) {
  33.         int size = list.size();
  34.         //int pages = size%rows==0?  size/rows: size/rows+1; 
  35.         return size;
  36. //获取总的条数<br>    }
  38.  
  39. }

model实体类:

package com.yjdgis.domain;

  2. import java.util.Date;
  5. public class Student {
  6.     private Integer id;
  7.     private Integer age;
  8.     private String name;
  9.     private Date birthday;
  10.     private String className;
  11.     private char sex;
  13.     
  14.     public Student(){ }
  15.     public Student(Integer id, Integer age, String name, Date birthday, String className, char sex) {
  16.         this.id = id;
  17.         this.age = age;
  18.         this.name = name;
  19.         this.birthday = birthday;
  20.         this.className = className;
  21.         this.sex = sex;
  22.     }
  25.     public Integer getId() {
  26.         return id;
  27.     }
  28.     public void setId(Integer id) {
  29.         this.id = id;
  30.     }
  31.     public Integer getAge() {
  32.         return age;
  33.     }
  34.     public void setAge(Integer age) {
  35.         this.age = age;
  36.     }
  37.     public String getName() {
  38.         return name;
  39.     }
  40.     public void setName(String name) {
  41.         this.name = name;
  42.     }
  43.     public Date getBirthday() {
  44.         return birthday;
  45.     }
  46.     public void setBirthday(Date birthday) {
  47.         this.birthday = birthday;
  48.     }
  49.     public String getClassName() {
  50.         return className;
  51.     }
  52.     public void setClassName(String className) {
  53.         this.className = className;
  54.     }
  55.     public char getSex() {
  56.         return sex;
  57.     }
  58.     public void setSex(char sex) {
  59.         this.sex = sex;
  60.     }
  62.     
  63. }
以上内容是否对您有帮助：
← easyui中文解析
EasyUI怎么获取input框里输入的值 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号