?近日學習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的配置

查看源碼 打印?

01	<?xml version="1.0" encoding="UTF-8"?>

02	<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

03	????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

04	????xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

05	????http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

06

?

07	????<!-- Sttuts2過濾器 -->

08	????<filter>

09	????????<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的配置

查看源碼 打印?

01	<?xml version="1.0" encoding="UTF-8"?>

02	<beans xmlns="http://www.springframework.org/schema/beans"

03	????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

04	????xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

05	????xsi:schemaLocation="http://www.springframework.org/schema/beans

06	???????????http://www.springframework.org/schema/beans/spring-beans-2.5.xsd

07	???????????http://www.springframework.org/schema/context

08	???????????http://www.springframework.org/schema/context/spring-context-2.5.xsd

09	???????????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

查看源碼 打印?

01	package com.model;

02

?

03	public class Student {

04	????String studentid;// 主鍵

05	????String name;// 姓名

06	????String gender;// 性別

07	????String age;// 年齡

08

?

09	????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

查看源碼 打印?

01	<?xml version="1.0"?>

02	<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"

03	"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

04	<!-- Generated 2013-6-23 23:31:47 by Hibernate Tools 3.4.0.CR1 -->

05	<hibernate-mapping>

06	????<class name="com.model.Student" table="STUDENT">

07	????????<id name="studentid" type="java.lang.String">

08	????????????<column name="STUDENTID" />

09	????????????<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

查看源碼 打印?

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

查看源碼 打印?

01	package com.serviceImpl;

02

?

03	import java.util.List;

04

?

05	import org.hibernate.SessionFactory;

06

?

07	import com.service.StudentService;

08

?

09	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

查看源碼 打印?

001	<?xml version="1.0" encoding="UTF-8"?>

002	<beans xmlns="http://www.springframework.org/schema/beans"

003	????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

004	????xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

005	????xsi:schemaLocation="http://www.springframework.org/schema/beans

006	???????????http://www.springframework.org/schema/beans/spring-beans-2.5.xsd

007	???????????http://www.springframework.org/schema/context

008	???????????http://www.springframework.org/schema/context/spring-context-2.5.xsd

009	???????????http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd

010	???????????http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">

011

?

012

?

013	????<!-- 用Bean定義數據源 -->

014	????<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"

015	????????destroy-method="close">

016	????????<!-- 定義數據庫驅動 -->

017	????????<property name="driverClass">

018	????????????<value>oracle.jdbc.driver.OracleDriver</value>

019	????????</property>

020	????????<!-- 定義數據庫URL -->

021	????????<property name="jdbcUrl">

022	????????????<value>jdbc:oracle:thin:@localhost:1521:orcl</value>

023	????????</property>

024	????????<!-- 定義數據庫的用戶名 -->

025	????????<property name="user">

026	????????????<value>lhq</value>

027	????????</property>

028	????????<!-- 定義數據庫的密碼 -->

029	????????<property name="password">

030	????????????<value>lhq</value>

031	????????</property>

032	????????<property name="minPoolSize">

033	????????????<value>1</value>

034	????????</property>

035	????????<property name="maxPoolSize">

036	????????????<value>40</value>

037	????????</property>

038	????????<property name="maxIdleTime">

039	????????????<value>1800</value>

040	????????</property>

041	????????<property name="acquireIncrement">

042	????????????<value>2</value>

043	????????</property>

044	????????<property name="maxStatements">

045	????????????<value>0</value>

046	????????</property>

047	????????<property name="initialPoolSize">

048	????????????<value>2</value>

049	????????</property>

050	????????<property name="idleConnectionTestPeriod">

051	????????????<value>1800</value>

052	????????</property>

053	????????<property name="acquireRetryAttempts">

054	????????????<value>30</value>

055	????????</property>

056	????????<property name="breakAfterAcquireFailure">

057	????????????<value>true</value>

058	????????</property>

059	????????<property name="testConnectionOnCheckout">

060	????????????<value>false</value>

061	????????</property>

062

?

063	????</bean>

064

?

065	????<!--定義Hibernate的SessionFactory -->

066	????<bean id="sessionFactory"

067	????????class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">

068	????????<!-- 定義SessionFactory必須注入dataSource -->

069	????????<property name="dataSource">

070	????????????<ref bean="dataSource" />

071	????????</property>

072	????????<!-- 定義Hibernate的SessionFactory屬性 -->

073	????????<property name="hibernateProperties">

074	????????????<props>

075	????????????????<prop key="hibernate.dialect">

076	????????????????????org.hibernate.dialect.Oracle10gDialect

077	????????????????</prop>

078	????????????</props>

079	????????</property>

080

?

081	????????<!-- 定義POJO的映射文件 -->

082	????????<property name="mappingResources">

083	????????????<list>

084	????????????????<value>com/model/Student.hbm.xml</value>

085	????????????</list>

086	????????</property>

087	????</bean>

088

?

089	????<!-- 配置事務攔截器 -->

090	????<bean id="transactionManager"

091	????????class="org.springframework.orm.hibernate3.HibernateTransactionManager">

092	????????<property name="sessionFactory" ref="sessionFactory" />

093	????</bean>

094

?

095	????<tx:advice id="txAdvice" transaction-manager="transactionManager">

096	????????<tx:attributes>

097	????????????<tx:method name="save*" propagation="REQUIRED" /><!-- 只有一save、delete、update開頭的方法才能執行增刪改操作 -->

098	????????????<tx:method name="delete*" propagation="REQUIRED" />

099	????????????<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類型

查看源碼 打印?

01	package com.action;

02

?

03	import java.util.List;

04

?

05	import javax.servlet.http.HttpServletRequest;

06	import javax.servlet.http.HttpServletResponse;

07

?

08	import net.sf.json.JSONObject;

09

?

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配置文件

查看源碼 打印?

01	<?xml version="1.0" encoding="UTF-8"?>

02	<beans xmlns="http://www.springframework.org/schema/beans"

03	????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

04	????xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

05	????xsi:schemaLocation="http://www.springframework.org/schema/beans

06	???????????http://www.springframework.org/schema/beans/spring-beans-2.5.xsd

07	???????????http://www.springframework.org/schema/context

08	???????????http://www.springframework.org/schema/context/spring-context-2.5.xsd

09	???????????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配置文件

查看源碼 打印?

01	<?xml version="1.0" encoding="UTF-8"?>

02	<!DOCTYPE struts PUBLIC

03	"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

04	"http://struts.apache.org/dtds/struts-2.0.dtd">

05

<struts>

06	????<package name="Easyui" extends="json-default">

07	????????<!-- 學生信息 -->

08	????????<action name="getAllStudentAction" class="student_action" method="getAllStudent">

09	????????????<result type="json"> </result>

10	????????</action>

11	????</package>

12

</struts>

14、編寫JSP----index.jsp

查看源碼 打印?

01	<%@ page language="java" pageEncoding="utf-8" isELIgnored="false"%>

02

<%

03	????String path = request.getContextPath();

04

%>

05	<%@ taglib prefix="s" uri="/struts-tags"%>

06	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

07

<html>

08

<head>

09	<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>

15、啟動程序，輸入http://localhost:8080/easyui/index.jsp進行測試

?

來自：http://blog.csdn.net/lhq13400526230/article/details/9158111
?

總結

以上是生活随笔為你收集整理的SSh结合Easyui实现Datagrid的分页显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。