前言
最近的项目一直用到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=)