首页 > Java开发 > SSh结合Easyui实现Datagrid的分页显示

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][/html] view plaincopy

  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.     <!-- Sttuts2过滤器 -->
  7.     <filter>
  8.         <filter-name>struts2</filter-name>
  9.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  10.     </filter>
  11.     <filter-mapping>
  12.         <filter-name>struts2</filter-name>
  13.         <url-pattern>/*</url-pattern>
  14.     </filter-mapping>
  15.     <!-- 监听器Spring -->
  16.     <listener>
  17.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  18.     </listener>
  19.     <!-- 定位applicationContext.xml的物理位置 -->
  20.     <context-param>
  21.         <param-name>contextConfigLocation</param-name>
  22.         <param-value>classpath:applicationContext.xml</param-value>
  23.     </context-param>
  24. </web-app>

 

 

5、applicationContext.xml的配置

[html][/html] view plaincopy

  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. <import resource="applicationContext_bean.xml"/>
  12. <import resource="applicationContext_db.xml"/>
  13. </beans>

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

[java][/java] view plaincopy

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

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

[html][/html] view plaincopy

  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][/java] view plaincopy

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

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

[java][/java] view plaincopy

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

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

[html][/html] view plaincopy

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

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

[java][/java] view plaincopy

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

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

[html][/html] view plaincopy

  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.     <!-- 业务层Service -->
  12.     <bean id="student_service" class="com.serviceImpl.StudentServiceImpl">
  13.         <property name="sessionFactory">
  14.              <ref bean="sessionFactory"></ref>
  15.         </property>
  16.     </bean>
  17.     <!-- 控制层Action -->
  18.     <bean id="student_action" class="com.action.StudentAction">
  19.         <property name="student_services">
  20.              <ref bean="student_service" />
  21.         </property>
  22.     </bean>
  23. </beans>

13、编写struts.xml配置文件

[html][/html] view plaincopy

  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][/html] view plaincopy

  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. <script type="text/javascript">
  22.     $(function() {
  23.         $('#mydatagrid').datagrid({
  24.             title : 'datagrid实例',
  25.             iconCls : 'icon-ok',
  26.             width : 600,
  27.             pageSize : 5,//默认选择的分页是每页5行数据
  28.             pageList : [ 5, 10, 15, 20 ],//可以选择的分页集合
  29.             nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取
  30.             striped : true,//设置为true将交替显示行背景。
  31.             collapsible : true,//显示可折叠按钮
  32.             toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个
  33.             url:'getAllStudentAction.action',//url调用Action方法
  34.             loadMsg : '数据装载中......',
  35.             singleSelect:true,//为true时只能选择单行
  36.             fitColumns:true,//允许表格自动缩放,以适应父容器
  37.             //sortName : 'xh',//当数据表格初始化时以哪一列来排序
  38.             //sortOrder : 'desc',//定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。
  39.             remoteSort : false,
  40.              frozenColumns : [ [ {
  41.                 field : 'ck',
  42.                 checkbox : true
  43.             } ] ],
  44.             pagination : true,//分页
  45.             rownumbers : true//行数
  46.         });
  47.     });
  48. </script>
  49. </head>
  50. <body>
  51.     <h2>
  52.         <b>easyui的DataGrid实例</b>
  53.     </h2>
  54.     <table id="mydatagrid">
  55.        <thead>
  56.             <tr>
  57.                 <th data-options="field:'studentid',width:100,align:'center'">学生学号</th>
  58.                 <th data-options="field:'name',width:100,align:'center'">姓名</th>
  59.                 <th data-options="field:'gender',width:100,align:'center'">性别</th>
  60.                 <th data-options="field:'age',width:100,align:'center'">年龄</th>
  61.             </tr>
  62.         </thead>
  63.     </table>
  64. </body>
  65. </html>

本文固定链接: http://www.devba.com/index.php/archives/1348.html | 开发吧

报歉!评论已关闭.