欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-12 18:04:50
      近日学习easyui,发现非常好用,界面很美观。将学习的心得在此写下,这篇博客写ssh结合easyui实现da...

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

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

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

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

 当每页显示10行数据,效果如下:

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

具体步骤:

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

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

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

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

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

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进行测试。

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