前言
最近的項目一直用到DataGrid元件，于是就抽時間整理一下思路。DataGrid主要是設定url和分頁，通過在前台DataGrid的屬性中添加pagination:true屬性，就會在表格末尾顯示分頁工具欄。背景添加一個int page和int rows儲存第幾頁和每頁的數量即可。當然，url傳回的是JSON格式的資料。一下是我寫的一個Demo
頁面（index.jsp）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/demo/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can append some buttons to the standard datagrid pager bar.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:550px"
data-options="rownumbers:true,singleSelect:true,pagination:true,url:'getStudentList',method:'get'">
<thead>
<tr>
<th data-options="field:'id',width:80">學号</th>
<th data-options="field:'name',width:100">姓名</th>
<th data-options="field:'course',width:180">課程</th>
<th data-options="field:'score',width:80">分數</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
buttons:[{
iconCls:'icon-search',
handler:function(){
}
},{
iconCls:'icon-add',
handler:function(){
}
},{
iconCls:'icon-edit',
handler:function(){
}
}]
});
})
</script>
</body>
</html> Struts2的配置檔案
struts.xml檔案的内容：
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.server.static.browserCache" value="false" />
<constant name="struts.ui.theme" value="simple" />
<constant name="struts.devMode" value="true" />
<constant name="struts.i18n.encoding" value="UTF-8" />
<constant name="struts.configuration.xml.reload" value="true" />
<package name="fileUploadPackage" extends="struts-default">
<action name="getStudentList" class="edu.njupt.zhb.action.DataGridDemoAction" method="getStudentList">
<result type="httpheader"></result>
</action>
</package>
</struts> 背景實體類Student(注意：成員變量的名稱要與前台feild的值相對應)
/*
* $filename: Student.java,v $
* $Date: 2013-10-11 $
* Copyright (C) ZhengHaibo, Inc. All rights reserved.
* This software is Made by Zhenghaibo.
*/
package edu.njupt.zhb.model;
import java.util.Date;
/*
*@author: ZhengHaibo
*2013-10-11 Nanjing,njupt,China
*/
public class Student{
/**
*
*/
private static final long serialVersionUID = 891846967116946566L;
private int id;//學号
private String name;//姓名
private String course;//課程
private int score;//分數
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCourse() {
return course;
}
public void setCourse(String course) {
this.course = course;
}
public int getScore() {
return score;
}
public void setScore(int score) {
this.score = score;
}
} 背景實體類DataGrid（目的：拼成DataGrid所需JSON格式）
/*
* $filename: DataGrid.java,v $
* $Date: 2013-10-11 $
* Copyright (C) ZhengHaibo, Inc. All rights reserved.
* This software is Made by Zhenghaibo.
*/
package edu.njupt.zhb.tools;
import java.util.List;
/*
*@author: ZhengHaibo
*2013-10-11 Nanjing,njupt,China
*/
public class DataGrid <T>{
private int total;
private List<T> rows;
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
} 背景Action類（page 和 rows字段）
/*
* $filename: ZTreeDemoAction.java,v $
* $Date: Sep 27, 2013 $
* Copyright (C) ZhengHaibo, Inc. All rights reserved.
* This software is Made by Zhenghaibo.
*/
package edu.njupt.zhb.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import edu.njupt.zhb.model.Student;
import edu.njupt.zhb.tools.DataGrid;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/*
*@author: ZhengHaibo
*Sep 27, 2013 Nanjing,njupt,China
*/
public class DataGridDemoAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = -3318989776253565435L;
private int page;//DataGrid中的頁數
private int rows;//DataGrid中的每頁的條數
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
/**
* 模拟從資料庫讀取資料
* @return
*/
public String getStudentList(){
System.out.println("page = "+page);
System.out.println("rows = "+rows);
//假設讀取到的資料長度是87
int resultMaxCount = 87 ;
int startIndex = (page-1)*rows;
int endIndex = page*rows<resultMaxCount?page*rows:resultMaxCount;
//聲明一個Student類型的DataGrid對象
DataGrid<Student> dataGrid = new DataGrid<Student>();
List<Student> studentList = new ArrayList<Student>();
//真實情況是從startIndex到endIndex取值
for (int i = startIndex; i < endIndex ; i++) {
Student s = new Student();
s.setId(10120106+i);
s.setCourse("數字圖像處理");
s.setName("學生"+i);
s.setScore(i);
studentList.add(s);
}
//設定總條數
dataGrid.setTotal(resultMaxCount);
//設定Rows資料連結清單
dataGrid.setRows(studentList);
//轉化為JSON
String result = JSONObject.fromObject(dataGrid).toString();
System.out.println("result："+result);
//将JSON資料傳回前台
getPrintWriter().write(result);
return SUCCESS;
}
/**
* 獲得HttpServletResponse對象
*
* @return
*/
public static HttpServletResponse getResponse() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
return response;
}
public PrintWriter getPrintWriter() {
PrintWriter pw = null;
try {
pw = getResponse().getWriter();
} catch (IOException e) {
e.printStackTrace();
}
return pw;
}
} 這樣，整個Demo大緻完成，Demo完整源代碼：
效果：
點選頁數，就會出現相應的更新。
未經允許不得使用者商業目的
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)