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

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

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

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

具体步骤：

1、下载easyui，并搭建环境。

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

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

4、web.xml的配置

<?xml version="1.0" encoding="utf-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"
 xsi:schemalocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

 <!-- sttuts2过滤器 -->
 <filter>
 <filter-name>struts2</filter-name>
 <filter-class>org.apache.struts2.dispatcher.ng.filter.strutsprepareandexecutefilter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>struts2</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

 <!-- 监听器spring -->
 <listener>
 <listener-class>org.springframework.web.context.contextloaderlistener</listener-class>
 </listener>

 <!-- 定位applicationcontext.xml的物理位置 -->
 <context-param>
 <param-name>contextconfiglocation</param-name>
 <param-value>classpath:applicationcontext.xml</param-value>
 </context-param>

</web-app>

5、applicationcontext.xml的配置

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns:context="http://www.springframework.org/schema/context"
 xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemalocation="http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-2.5.xsd
      http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
      http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">


<import resource="applicationcontext_bean.xml"/>
<import resource="applicationcontext_db.xml"/>
</beans>

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

package com.model;

public class student {
 string studentid;// 主键
 string name;// 姓名
 string gender;// 性别
 string age;// 年龄

 public string getstudentid() {
 return studentid;
 }

 public void setstudentid(string studentid) {
 this.studentid = studentid;
 }

 public string getname() {
 return name;
 }

 public void setname(string name) {
 this.name = name;
 }

 public string getgender() {
 return gender;
 }

 public void setgender(string gender) {
 this.gender = gender;
 }

 public string getage() {
 return age;
 }

 public void setage(string age) {
 this.age = age;
 }

}

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

<?xml version="1.0"?>
<!doctype hibernate-mapping public "-//hibernate/hibernate mapping dtd 3.0//en"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- generated 2013-6-23 23:31:47 by hibernate tools 3.4.0.cr1 -->
<hibernate-mapping>
  <class name="com.model.student" table="student">
    <id name="studentid" type="java.lang.string">
      <column name="studentid" />
      <generator class="assigned" />
    </id>
    <property name="name" type="java.lang.string">
      <column name="name" />
    </property>
    <property name="gender" type="java.lang.string">
      <column name="gender" />
    </property>
    <property name="age" type="java.lang.string">
      <column name="age" />
    </property>
  </class>
</hibernate-mapping>

 8、编写接口studentservice.java

package com.service;

import java.util.list;

public interface studentservice {
 public list getstudentlist(string page,string rows) throws exception;//根据第几页获取，每页几行获取数据 
 public int getstudenttotal() throws exception;//统计一共有多少数据
}

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

package com.serviceimpl;

import java.util.list;

import org.hibernate.sessionfactory;

import com.service.studentservice;

public class studentserviceimpl implements studentservice {
 private sessionfactory sessionfactory;
 
 // 根据第几页获取，每页几行获取数据
 public list getstudentlist(string page, string rows) {
 
    //当为缺省值的时候进行赋值
 int currentpage = integer.parseint((page == null || page == "0") ? "1": page);//第几页
 int pagesize = integer.parseint((rows == null || rows == "0") ? "10": rows);//每页多少行
 
 list list = this.sessionfactory.getcurrentsession().createquery("from student")
      .setfirstresult((currentpage - 1) * pagesize).setmaxresults(pagesize).list();

 return list;
 }

 // 统计一共有多少数据
 public int getstudenttotal() throws exception {
 return this.sessionfactory.getcurrentsession().find("from student").size();
 }
 
 public sessionfactory getsessionfactory() {
 return sessionfactory;
 }

 public void setsessionfactory(sessionfactory sessionfactory) {
 this.sessionfactory = sessionfactory;
 }
 
 
}

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

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns:context="http://www.springframework.org/schema/context"
 xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemalocation="http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-2.5.xsd
      http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
      http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">


 <!-- 用bean定义数据源 -->
 <bean id="datasource" class="com.mchange.v2.c3p0.combopooleddatasource"
 destroy-method="close">
 <!-- 定义数据库驱动 -->
 <property name="driverclass">
  <value>oracle.jdbc.driver.oracledriver</value>
 </property>
 <!-- 定义数据库url -->
 <property name="jdbcurl">
  <value>jdbc:oracle:thin:@localhost:1521:orcl</value>
 </property>
 <!-- 定义数据库的用户名 -->
 <property name="user">
  <value>lhq</value>
 </property>
 <!-- 定义数据库的密码 -->
 <property name="password">
  <value>lhq</value>
 </property>
 <property name="minpoolsize">
  <value>1</value>
 </property>
 <property name="maxpoolsize">
  <value>40</value>
 </property>
 <property name="maxidletime">
  <value>1800</value>
 </property>
 <property name="acquireincrement">
  <value>2</value>
 </property>
 <property name="maxstatements">
  <value>0</value>
 </property>
 <property name="initialpoolsize">
  <value>2</value>
 </property>
 <property name="idleconnectiontestperiod">
  <value>1800</value>
 </property>
 <property name="acquireretryattempts">
  <value>30</value>
 </property>
 <property name="breakafteracquirefailure">
  <value>true</value>
 </property>
 <property name="testconnectiononcheckout">
  <value>false</value>
 </property>

 </bean>

 <!--定义hibernate的sessionfactory -->
 <bean id="sessionfactory"
 class="org.springframework.orm.hibernate3.localsessionfactorybean">
 <!-- 定义sessionfactory必须注入datasource -->
 <property name="datasource">
  <ref bean="datasource" />
 </property>
 <!-- 定义hibernate的sessionfactory属性 -->
 <property name="hibernateproperties">
  <props>
  <prop key="hibernate.dialect">
   org.hibernate.dialect.oracle10gdialect
  </prop>
  </props>
 </property>

 <!-- 定义pojo的映射文件 -->
 <property name="mappingresources">
  <list>
  <value>com/model/student.hbm.xml</value>
  </list>
 </property>
 </bean>

 <!-- 配置事务拦截器 -->
 <bean id="transactionmanager"
 class="org.springframework.orm.hibernate3.hibernatetransactionmanager">
 <property name="sessionfactory" ref="sessionfactory" />
 </bean>

 <tx:advice id="txadvice" transaction-manager="transactionmanager">
 <tx:attributes>
  <tx:method name="save*" propagation="required" /><!-- 只有一save、delete、update开头的方法才能执行增删改操作 -->
  <tx:method name="delete*" propagation="required" />
  <tx:method name="update*" propagation="required" />
  <tx:method name="*" propagation="supports" read-only="true" /><!-- 其他方法为只读方法 -->
 </tx:attributes>
 </tx:advice>

 <aop:config>
 <aop:pointcut id="interceptorpointcuts" expression="execution(* com.serviceimpl..*.*(..))" /> <!-- 对应实现类接口的包的位置 -->
 <aop:advisor advice-ref="txadvice" pointcut-ref="interceptorpointcuts" />
 </aop:config>

</beans>

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

package com.action;

import java.util.list;

import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;

import net.sf.json.jsonobject;

import org.apache.log4j.logger;
import org.apache.struts2.servletactioncontext;

import com.service.studentservice;

public class studentaction {
 static logger log = logger.getlogger(studentaction.class);
 private jsonobject jsonobj;
 private string rows;// 每页显示的记录数
 private string page;// 当前第几页
 private studentservice student_services;//string依赖注入
 
 //查询出所有学生信息
 public string getallstudent() throws exception {
 log.info("查询出所有学生信息"); 
 
 list list = student_services.getstudentlist(page, rows);
 this.tobejson(list,student_services.getstudenttotal());

 return null;
 }
 
 //转化为json格式
  public void tobejson(list list,int total) throws exception{
  httpservletresponse response = servletactioncontext.getresponse();
  httpservletrequest request = servletactioncontext.getrequest();
  
  jsonobject jobj = new jsonobject();//new一个json
  jobj.accumulate("total",total );//total代表一共有多少数据
  jobj.accumulate("rows", list);//row是代表显示的页的数据

  response.setcharacterencoding("utf-8");//指定为utf-8
  response.getwriter().write(jobj.tostring());//转化为json格式
  
  log.info(jobj.tostring());
  }
  

 public studentservice getstudent_services() {
 return student_services;
 }

 public void setstudent_services(studentservice student_services) {
 this.student_services = student_services;
 }

 public void setjsonobj(jsonobject jsonobj) {
 this.jsonobj = jsonobj;
 }

 public void setrows(string rows) {
 this.rows = rows;
 }

 public void setpage(string page) {
 this.page = page;
 }
  
  
 
}

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

<?xml version="1.0" encoding="utf-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns:context="http://www.springframework.org/schema/context"
 xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemalocation="http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-2.5.xsd
      http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
      http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">
 
 <!-- 业务层service -->
 <bean id="student_service" class="com.serviceimpl.studentserviceimpl">
  <property name="sessionfactory">
  <ref bean="sessionfactory"></ref>
 </property>
 </bean>

 <!-- 控制层action -->
 <bean id="student_action" class="com.action.studentaction">
 <property name="student_services">
  <ref bean="student_service" />
 </property>
 </bean>
 
</beans>

13、编写struts.xml配置文件

<?xml version="1.0" encoding="utf-8"?>
<!doctype struts public 
"-//apache software foundation//dtd struts configuration 2.0//en" 
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
 <package name="easyui" extends="json-default">
 <!-- 学生信息 -->
 <action name="getallstudentaction" class="student_action" method="getallstudent">
  <result type="json"> </result>
 </action>
 </package>
</struts>

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

<%@ page language="java" pageencoding="utf-8" iselignored="false"%>
<%
 string path = request.getcontextpath();
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>数字框</title>
<!-- 引入jquery -->
<script type="text/javascript" src="<%=path%>/js/easyui/jquery-1.8.0.min.js" charset="utf-8"></script>
<!-- 引入jquery_easyui -->
<script type="text/javascript" src="<%=path%>/js/easyui/jquery.easyui.min.js" charset="utf-8"></script>
<!-- 引入easyui国际化--中文 -->
<script type="text/javascript" src="<%=path%>/js/easyui/locale/easyui-lang-zh_cn.js" charset="utf-8"></script>
<!-- 引入easyui默认的css格式--蓝色 -->
<link rel="stylesheet" type="text/css" href="<%=path%>/js/easyui/themes/default/easyui.css" />
<!-- 引入easyui小图标 -->
<link rel="stylesheet" type="text/css" href="<%=path%>/js/easyui/themes/icon.css" />

<script type="text/javascript">
 $(function() {
 $('#mydatagrid').datagrid({
  title : 'datagrid实例',
  iconcls : 'icon-ok',
  width : 600,
  pagesize : 5,//默认选择的分页是每页5行数据
  pagelist : [ 5, 10, 15, 20 ],//可以选择的分页集合
  nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
  striped : true,//设置为true将交替显示行背景。
  collapsible : true,//显示可折叠按钮
  toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个
  url:'getallstudentaction.action',//url调用action方法
  loadmsg : '数据装载中......',
  singleselect:true,//为true时只能选择单行
  fitcolumns:true,//允许表格自动缩放，以适应父容器
  //sortname : 'xh',//当数据表格初始化时以哪一列来排序
  //sortorder : 'desc',//定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。
  remotesort : false,
   frozencolumns : [ [ {
  field : 'ck',
  checkbox : true
  } ] ], 
  pagination : true,//分页
  rownumbers : true//行数
 }); 
 
 });
 
</script> 

</head>
<body>
 <h2>
 <b>easyui的datagrid实例</b>
 </h2>

 <table id="mydatagrid">
  <thead>
  <tr>
  <th data-options="field:'studentid',width:100,align:'center'">学生学号</th>
  <th data-options="field:'name',width:100,align:'center'">姓名</th>
  <th data-options="field:'gender',width:100,align:'center'">性别</th>
  <th data-options="field:'age',width:100,align:'center'">年龄</th>
  </tr>
 </thead>
 </table>
  
</body>
</html>

 15、启动程序，输入http://localhost:8080/easyui/index.jsp进行测试。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。