实例：SSh结合Easyui实现Datagrid的分页显示

近日学习Easyui，发现非常好用，界面很美观。将学习的心得在此写下，这篇博客写SSh结合Easyui实现Datagrid的分页显示，其他的例如添加、修改、删除、批量删除等功能将在后面的博客一一写来。

     首先看一下要实现的效果：当每页显示5行数据：

 

          当每页显示10行数据，效果如下：

具体步骤：

1、下载Easyui，并搭建环境。可参照博客 http://blog.csdn.net/lhq13400526230/article/details/9148299

 

2、搭建SSH工程，整个工程的目录结构如图所示：

 

3、在Oracle数据库中创建表Student。并且输入下面6行数据，因为添加操作还没有实现，所以先在数据库表中添加数据。默认设定的值是每行5个数据，所以请至少输入6行数据，便于分页的测试。

 

4、web.xml的配置

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
6.   
7.     <!-- Sttuts2过滤器 -->  
8.     <filter>  
9.         <filter-name>struts2</filter-name>  
10.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
11.     </filter>  
12.     <filter-mapping>  
13.         <filter-name>struts2</filter-name>  
14.         <url-pattern>/*</url-pattern>  
15.     </filter-mapping>  
16.   
17.     <!-- 监听器Spring -->  
18.     <listener>  
19.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
20.     </listener>  
21.   
22.     <!-- 定位applicationContext.xml的物理位置 -->  
23.     <context-param>  
24.         <param-name>contextConfigLocation</param-name>  
25.         <param-value>classpath:applicationContext.xml</param-value>  
26.     </context-param>  
27.   
28. </web-app>  

 

5、applicationContext.xml的配置

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <beans xmlns="http://www.springframework.org/schema/beans"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"  
4.     xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"  
5.     xsi:schemaLocation="http://www.springframework.org/schema/beans   
6.            http://www.springframework.org/schema/beans/spring-beans-2.5.xsd  
7.            http://www.springframework.org/schema/context  
8.            http://www.springframework.org/schema/context/spring-context-2.5.xsd  
9.            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd  
10.            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">  
11.   
12.   
13.   
14. <import resource="applicationContext_bean.xml"/>  
15. <import resource="applicationContext_db.xml"/>  
16. </beans>  

6、在com.model中创建模型类Student.Java

[java]  view plain copy

1. package com.model;  
2.   
3. public class Student {  
4.     String studentid;// 主键  
5.     String name;// 姓名  
6.     String gender;// 性别  
7.     String age;// 年龄  
8.   
9.     public String getStudentid() {  
10.         return studentid;  
11.     }  
12.   
13.     public void setStudentid(String studentid) {  
14.         this.studentid = studentid;  
15.     }  
16.   
17.     public String getName() {  
18.         return name;  
19.     }  
20.   
21.     public void setName(String name) {  
22.         this.name = name;  
23.     }  
24.   
25.     public String getGender() {  
26.         return gender;  
27.     }  
28.   
29.     public void setGender(String gender) {  
30.         this.gender = gender;  
31.     }  
32.   
33.     public String getAge() {  
34.         return age;  
35.     }  
36.   
37.     public void setAge(String age) {  
38.         this.age = age;  
39.     }  
40.   
41. }  

7、根据Student.java生成对应的映射文件Student.hbm.xml

[html]  view plain copy

1. <?xml version="1.0"?>  
2. <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"  
3. "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">  
4. <!-- Generated 2013-6-23 23:31:47 by Hibernate Tools 3.4.0.CR1 -->  
5. <hibernate-mapping>  
6.     <class name="com.model.Student" table="STUDENT">  
7.         <id name="studentid" type="java.lang.String">  
8.             <column name="STUDENTID" />  
9.             <generator class="assigned" />  
10.         </id>  
11.         <property name="name" type="java.lang.String">  
12.             <column name="NAME" />  
13.         </property>  
14.         <property name="gender" type="java.lang.String">  
15.             <column name="GENDER" />  
16.         </property>  
17.         <property name="age" type="java.lang.String">  
18.             <column name="AGE" />  
19.         </property>  
20.     </class>  
21. </hibernate-mapping>  

 

8、编写接口StudentService.java

[java]  view plain copy

1. package com.service;  
2.   
3. import java.util.List;  
4.   
5. public interface StudentService {  
6.      public List getStudentList(String page,String rows) throws Exception;//根据第几页获取，每页几行获取数据   
7.      public int getStudentTotal() throws Exception;//统计一共有多少数据  
8. }  

9、编写接口的实现类StudentServiceImpl.java

[java]  view plain copy

1. package com.serviceImpl;  
2.   
3. import java.util.List;  
4.   
5. import org.hibernate.SessionFactory;  
6.   
7. import com.service.StudentService;  
8.   
9. public class StudentServiceImpl implements StudentService {  
10.     private SessionFactory sessionFactory;  
11.       
12.     // 根据第几页获取，每页几行获取数据  
13.     public List getStudentList(String page, String rows) {  
14.           
15.         //当为缺省值的时候进行赋值  
16.         int currentpage = Integer.parseInt((page == null || page == "0") ? "1": page);//第几页  
17.         int pagesize = Integer.parseInt((rows == null || rows == "0") ? "10": rows);//每页多少行  
18.           
19.         List list = this.sessionFactory.getCurrentSession().createQuery("from Student")  
20.                        .setFirstResult((currentpage - 1) * pagesize).setMaxResults(pagesize).list();  
21.   
22.         return list;  
23.     }  
24.   
25.     // 统计一共有多少数据  
26.     public int getStudentTotal() throws Exception {  
27.         return this.sessionFactory.getCurrentSession().find("from Student").size();  
28.     }  
29.       
30.     public SessionFactory getSessionFactory() {  
31.         return sessionFactory;  
32.     }  
33.   
34.     public void setSessionFactory(SessionFactory sessionFactory) {  
35.         this.sessionFactory = sessionFactory;  
36.     }  
37.       
38.       
39. }  

10、配置连接数据库的配置文件applicationContext_db.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <beans xmlns="http://www.springframework.org/schema/beans"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"  
4.     xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"  
5.     xsi:schemaLocation="http://www.springframework.org/schema/beans   
6.            http://www.springframework.org/schema/beans/spring-beans-2.5.xsd  
7.            http://www.springframework.org/schema/context  
8.            http://www.springframework.org/schema/context/spring-context-2.5.xsd  
9.            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd  
10.            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">  
11.   
12.   
13.     <!-- 用Bean定义数据源 -->  
14.     <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"  
15.         destroy-method="close">  
16.         <!-- 定义数据库驱动 -->  
17.         <property name="driverClass">  
18.             <value>oracle.jdbc.driver.OracleDriver</value>  
19.         </property>  
20.         <!-- 定义数据库URL -->  
21.         <property name="jdbcUrl">  
22.             <value>jdbc:oracle:thin:@localhost:1521:orcl</value>  
23.         </property>  
24.         <!-- 定义数据库的用户名 -->  
25.         <property name="user">  
26.             <value>lhq</value>  
27.         </property>  
28.         <!-- 定义数据库的密码 -->  
29.         <property name="password">  
30.             <value>lhq</value>  
31.         </property>  
32.         <property name="minPoolSize">  
33.             <value>1</value>  
34.         </property>  
35.         <property name="maxPoolSize">  
36.             <value>40</value>  
37.         </property>  
38.         <property name="maxIdleTime">  
39.             <value>1800</value>  
40.         </property>  
41.         <property name="acquireIncrement">  
42.             <value>2</value>  
43.         </property>  
44.         <property name="maxStatements">  
45.             <value>0</value>  
46.         </property>  
47.         <property name="initialPoolSize">  
48.             <value>2</value>  
49.         </property>  
50.         <property name="idleConnectionTestPeriod">  
51.             <value>1800</value>  
52.         </property>  
53.         <property name="acquireRetryAttempts">  
54.             <value>30</value>  
55.         </property>  
56.         <property name="breakAfterAcquireFailure">  
57.             <value>true</value>  
58.         </property>  
59.         <property name="testConnectionOnCheckout">  
60.             <value>false</value>  
61.         </property>  
62.   
63.     </bean>  
64.   
65.     <!--定义Hibernate的SessionFactory -->  
66.     <bean id="sessionFactory"  
67.         class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">  
68.         <!-- 定义SessionFactory必须注入dataSource -->  
69.         <property name="dataSource">  
70.             <ref bean="dataSource" />  
71.         </property>  
72.         <!-- 定义Hibernate的SessionFactory属性 -->  
73.         <property name="hibernateProperties">  
74.             <props>  
75.                 <prop key="hibernate.dialect">  
76.                     org.hibernate.dialect.Oracle10gDialect  
77.                 </prop>  
78.             </props>  
79.         </property>  
80.   
81.         <!-- 定义POJO的映射文件 -->  
82.         <property name="mappingResources">  
83.             <list>  
84.                 <value>com/model/Student.hbm.xml</value>  
85.             </list>  
86.         </property>  
87.     </bean>  
88.   
89.     <!-- 配置事务拦截器 -->  
90.     <bean id="transactionManager"  
91.         class="org.springframework.orm.hibernate3.HibernateTransactionManager">  
92.         <property name="sessionFactory" ref="sessionFactory" />  
93.     </bean>  
94.   
95.     <tx:advice id="txAdvice" transaction-manager="transactionManager">  
96.         <tx:attributes>  
97.             <tx:method name="save*" propagation="REQUIRED" /><!-- 只有一save、delete、update开头的方法才能执行增删改操作 -->  
98.             <tx:method name="delete*" propagation="REQUIRED" />  
99.             <tx:method name="update*" propagation="REQUIRED" />  
100.             <tx:method name="*" propagation="SUPPORTS" read-only="true" /><!-- 其他方法为只读方法 -->  
101.         </tx:attributes>  
102.     </tx:advice>  
103.   
104.     <aop:config>  
105.         <aop:pointcut id="interceptorPointCuts"  expression="execution(* com.serviceImpl..*.*(..))" />  <!-- 对应实现类接口的包的位置 -->  
106.         <aop:advisor advice-ref="txAdvice" pointcut-ref="interceptorPointCuts" />  
107.     </aop:config>  
108.   
109. </beans>  

11、在控制层编写StudentAction.java类型

[java]  view plain copy

1. package com.action;  
2.   
3. import java.util.List;  
4.   
5. import javax.servlet.http.HttpServletRequest;  
6. import javax.servlet.http.HttpServletResponse;  
7.   
8. import net.sf.json.JSONObject;  
9.   
10. import org.apache.log4j.Logger;  
11. import org.apache.struts2.ServletActionContext;  
12.   
13. import com.service.StudentService;  
14.   
15. public class StudentAction {  
16.     static Logger log = Logger.getLogger(StudentAction.class);  
17.     private JSONObject jsonObj;  
18.     private String rows;// 每页显示的记录数  
19.     private String page;// 当前第几页  
20.     private StudentService student_services;//String依赖注入  
21.       
22.     //查询出所有学生信息  
23.     public String getAllStudent() throws Exception {  
24.         log.info("查询出所有学生信息");        
25.           
26.         List list = student_services.getStudentList(page, rows);  
27.         this.toBeJson(list,student_services.getStudentTotal());  
28.   
29.         return null;  
30.     }  
31.       
32.     //转化为Json格式  
33.        public void toBeJson(List list,int total) throws Exception{  
34.             HttpServletResponse response = ServletActionContext.getResponse();  
35.             HttpServletRequest request = ServletActionContext.getRequest();  
36.               
37.             JSONObject jobj = new JSONObject();//new一个JSON  
38.             jobj.accumulate("total",total );//total代表一共有多少数据  
39.             jobj.accumulate("rows", list);//row是代表显示的页的数据  
40.   
41.             response.setCharacterEncoding("utf-8");//指定为utf-8  
42.             response.getWriter().write(jobj.toString());//转化为JSOn格式  
43.               
44.             log.info(jobj.toString());  
45.        }  
46.          
47.   
48.     public StudentService getStudent_services() {  
49.         return student_services;  
50.     }  
51.   
52.     public void setStudent_services(StudentService student_services) {  
53.         this.student_services = student_services;  
54.     }  
55.   
56.     public void setJsonObj(JSONObject jsonObj) {  
57.         this.jsonObj = jsonObj;  
58.     }  
59.   
60.     public void setRows(String rows) {  
61.         this.rows = rows;  
62.     }  
63.   
64.     public void setPage(String page) {  
65.         this.page = page;  
66.     }  
67.          
68.          
69.       
70. }  

12、编写spring的依赖注入applicationContext_bean.xml配置文件

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <beans xmlns="http://www.springframework.org/schema/beans"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"  
4.     xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"  
5.     xsi:schemaLocation="http://www.springframework.org/schema/beans   
6.            http://www.springframework.org/schema/beans/spring-beans-2.5.xsd  
7.            http://www.springframework.org/schema/context  
8.            http://www.springframework.org/schema/context/spring-context-2.5.xsd  
9.            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd  
10.            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">  
11.       
12.     <!-- 业务层Service -->  
13.     <bean id="student_service" class="com.serviceImpl.StudentServiceImpl">  
14.         <property name="sessionFactory">  
15.              <ref bean="sessionFactory"></ref>  
16.         </property>  
17.     </bean>  
18.   
19.     <!-- 控制层Action -->  
20.     <bean id="student_action" class="com.action.StudentAction">  
21.         <property name="student_services">  
22.              <ref bean="student_service" />  
23.         </property>  
24.     </bean>  
25.       
26. </beans>  

13、编写struts.xml配置文件

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE struts PUBLIC   
3. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"   
4. "http://struts.apache.org/dtds/struts-2.0.dtd">  
5. <struts>  
6.     <package name="Easyui" extends="json-default">  
7.         <!-- 学生信息 -->  
8.         <action name="getAllStudentAction" class="student_action" method="getAllStudent">  
9.             <result type="json"> </result>  
10.         </action>  
11.     </package>  
12. </struts>  

14、编写JSP----index.jsp

[html]  view plain copy

1. <%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>  
2. <%  
3.     String path = request.getContextPath();  
4. %>  
5. <%@ taglib prefix="s" uri="/struts-tags"%>  
6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
7. <html>  
8. <head>  
9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
10. <title>数字框</title>  
11. <!-- 引入Jquery -->  
12. <script type="text/javascript"   src="<%=path%>/js/easyui/jquery-1.8.0.min.js" charset="utf-8"></script>  
13. <!-- 引入Jquery_easyui -->  
14. <script type="text/javascript"   src="<%=path%>/js/easyui/jquery.easyui.min.js" charset="utf-8"></script>  
15. <!-- 引入easyUi国际化--中文 -->  
16. <script type="text/javascript"   src="<%=path%>/js/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>  
17. <!-- 引入easyUi默认的CSS格式--蓝色 -->  
18. <link rel="stylesheet" type="text/css"   href="<%=path%>/js/easyui/themes/default/easyui.css" />  
19. <!-- 引入easyUi小图标 -->  
20. <link rel="stylesheet" type="text/css"   href="<%=path%>/js/easyui/themes/icon.css" />  
21.   
22. <script type="text/javascript">  
23.     $(function() {  
24.         $('#mydatagrid').datagrid({  
25.             title : 'datagrid实例',  
26.             iconCls : 'icon-ok',  
27.             width : 600,  
28.             pageSize : 5,//默认选择的分页是每页5行数据  
29.             pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合  
30.             nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取  
31.             striped : true,//设置为true将交替显示行背景。  
32.             collapsible : true,//显示可折叠按钮  
33.             toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个  
34.             url:'getAllStudentAction.action',//url调用Action方法  
35.             loadMsg : '数据装载中......',  
36.             singleSelect:true,//为true时只能选择单行  
37.             fitColumns:true,//允许表格自动缩放，以适应父容器  
38.             //sortName : 'xh',//当数据表格初始化时以哪一列来排序  
39.             //sortOrder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。  
40.             remoteSort : false,  
41.              frozenColumns : [ [ {  
42.                 field : 'ck',  
43.                 checkbox : true  
44.             } ] ],   
45.             pagination : true,//分页  
46.             rownumbers : true//行数  
47.         });   
48.           
49.     });  
50.       
51. </script>   
52.   
53. </head>  
54. <body>  
55.     <h2>  
56.         <b>easyui的DataGrid实例</b>  
57.     </h2>  
58.   
59.     <table id="mydatagrid">  
60.        <thead>  
61.             <tr>  
62.                 <th data-options="field:'studentid',width:100,align:'center'">学生学号</th>  
63.                 <th data-options="field:'name',width:100,align:'center'">姓名</th>  
64.                 <th data-options="field:'gender',width:100,align:'center'">性别</th>  
65.                 <th data-options="field:'age',width:100,align:'center'">年龄</th>  
66.             </tr>  
67.         </thead>  
68.     </table>  
69.      
70. </body>  
71. </html>