5 数据网格具有分页功能
数据网格接收数据库中数据的例子可参看：
http://www.jeasyui.com/tutorial/datagrid/datagrid2_demo.html
5.1 接收jsp返回的表数据
在http://blog.csdn.net/gdhyyanglang/article/details/8249246中我们使用2中种方法使表格转换为数据网格。
现在我们使用第一种方法创建一个数据网格，首先我们将在web目录下新建一个文件夹datagridDemo，将前面需要引用的文件放入此文件夹，如下图所示。
其中datagrid_getdata.html和datagrid_getdata.jsp为我们需要创建的文件，WEB-INF为我们创建的文件夹，在此文件夹下有两个目录，如下图所示。
classes存放Java类，由于此例子中不需要用到类，所以此文件夹为空。lib存放jar包，由于我们需要将数据库中的数据转换为json格式，因此在此文件夹中存放了如下图所示的jar包。
注意，jar版本号一定要一致，不然会出现bug。
web.xml为web应用程序配置文件，此文件的内容为：
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app 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_3_0.xsd"
version="3.0"
metadata-complete="true">
<welcome-file-list><welcome-file>datagrid_getdata.html</welcome-file></welcome-file-list>
</web-app>
<welcome-file-list><welcome-file>datagrid_getdata.html</welcome-file></welcome-file-list>表示访问datagridDemo时，将自动定位到datagrid_getdata.html。
配置好JSP Web应用程序环境后，就可以编写datagrid_getdata.html了。
代码清单5-1 datagrid_getdata.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页效果数据网格</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="tt" class="easyui-datagrid" style="width:550px;height:250px"
url="datagrid_getdata.jsp"
title="Load Data"
iconCls="icon-save"
rownumbers="true"
pagination="true" >
<thead>
<tr>
<th field="id" width="80">id</th>
<th field="name" width="80">name</th>
<th field="password" width="80">pasword</th>
<th field="mail" width="180">mail</th>
</tr>
</thead>
</table>
</body>
</html>
url="datagrid_getdata.jsp"表示jsp返回json数据
title="LoadData" 表示数据网格的标题
iconCls="icon-save"表示不知道什么意思，去掉效果不变
rownumbers="true"表示显示行数
pagination="true"表示分页效果，必选，否则看不到jsp传来的json数据
需要注意的是表格中field属性的设置必须要和jsp返回的json对应，具体见datagrid_getdata.jsp。
下面使用JSP获取mysql数据，并转换为JSON。前面我们已经通过JSP获取mysql数据库中的数据：http://blog.csdn.net/gdhyyanglang/article/details/8257101。
现在我们稍微修改一下datagrid_getdata.jsp
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*, net.sf.json.JSONObject" errorPage="" %>
<%
//驱动程序名
String driverName = "com.mysql.jdbc.Driver";
//数据库用户名
String userName = "root";
//密码
String userPasswd = "";
//数据库名
String dbName = "st";
//表名
String tableName = "users";
//联结字符串
String url = "jdbc:mysql://localhost/" + dbName + "?user=" + userName + "&password=" + userPasswd;
//加载驱动
Class.forName("com.mysql.jdbc.Driver").newInstance();
//建立连接
Connection conn = DriverManager.getConnection(url);
//创建Statement（负责执行sql语句）
Statement stmt = conn.createStatement();
String sql="select * from " + tableName;
//获得数据结果集合
ResultSet rs = stmt.executeQuery(sql);
//查询数据表中数据并存储在此字符串中
String result = null;
//数据表记录行数
int row = 0;
//创建JSON
JSONObject json = new JSONObject();
while(rs.next())
{
//将行记录中的字段存入json
json.put("id", rs.getString("id"));
json.put("name", rs.getString("name"));
json.put("password", rs.getString("password"));
json.put("mail", rs.getString("mail"));
//行数增加
row++;
//判断记录行数，如果超过一行使用“，”号连接
if(row == 1){
result = json.toString();
}
else{
result += "," + json.toString();
}
}
//注意，json中所有key和value都是字符串
out.println("{\"total\":\"" + row + "\",\"rows\":[" + result + "]}");
//关闭连接
rs.close();
stmt.close();
conn.close();
%>
在使用json时，我们在inport中引用了lib中的jar包中的类。
和前面jsp不同的是，我们定义了rsult字符串专门存放数据库表中的值。row表示表中数据记录的行数。json专门实现key、value对应。
首先取出表中每行记录的字段值，将其放入json中，注意此时的字段值（value）和其属性名对应（key），如：
json.put("id",rs.getString("id"));
id表示key，和字段的属性对应，且和前面表格的field值对应。rs.getString("id")为从表中取出的字段值。
然后将一行记录的json转换为字符串形式，此时返回的数据应该为：
{"id":"1","name":"yanglang","password":"yanglang","mail":"[email protected]"}
如果有多行记录，使用“，”号连接。
最后将所有的信息组合成easy-ui数据网格接收的数据格式：
out.println("{\"total\":\""+ row + "\",\"rows\":[" + result + "]}");
访问jsp，你可能看到如下的数据：
{"total":"2","rows":[{"id":"1","name":"yanglang","password":"yanglang","mail":"[email protected]"},{"id":"2","name":"st","password":"st","mail":"[email protected]"}]}
注意：要将所有的key和value用双引号括起来，否则easy-ui数据网格不能识别。rows表示表中所有行数。
5.2 真正具有分页功能
现在我们的记录为两条，页面默认显示条数为10条，现在将users表中记录改为12条，刷新测试一下，看看效果如何？
数据网格中直接显示了jsp返回的所有数据，即12条数据都显示了。为了解决这个问题，需要再次修改一下代码，让jsp返回的数据控制在10条。
在数据网格中，需要注意2个属性，行数和页数。行数默认情况下为10，页数为第一页。当我们改变行数和页数的时候，在jsp中可以通过page和rows属性来访问改变的行数和页数。
下面是修改后的datagrid_getdata.jsp代码：
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*, net.sf.json.JSONObject" errorPage="" %>
<%
//驱动程序名
String driverName = "com.mysql.jdbc.Driver";
//数据库用户名
String userName = "root";
//密码
String userPasswd = "";
//数据库名
String dbName = "st";
//表名
String tableName = "users";
//获取行数和页数,默认情况下行数为10，页数为1
String datagridPage = "1";
String datagridRows = "10";
//判断是否提交数据，如果提交页数，改变页数值
if(request.getParameter("page") != null){
datagridPage = request.getParameter("page");
}
//判断是否提交数据，如果提交行数，改变行数值
if(request.getParameter("rows") != null){
datagridRows = request.getParameter("rows");
}
//偏移位置，用于控制不同页数显示的数据
int offset = (Integer.parseInt(datagridPage) - 1) * Integer.parseInt(datagridRows);
//联结字符串
String url = "jdbc:mysql://localhost/" + dbName + "?user=" + userName + "&password=" + userPasswd;
//加载驱动
Class.forName("com.mysql.jdbc.Driver").newInstance();
//建立连接
Connection conn = DriverManager.getConnection(url);
//创建Statement（负责执行sql语句）
Statement stmt = conn.createStatement();
//获取数据总行数
int rows = 0;
ResultSet rset = stmt.executeQuery("select * from " + tableName);
while(rset.next()) {
rows++;
}
//获得数据结果集合（依据页数和行数）
String sql="select * from " + tableName + " limit " + offset + ", " + datagridRows;
//获得数据结果集合
ResultSet rs = stmt.executeQuery(sql);
//查询数据表中数据并存储在此字符串中
String result = null;
//数据表记录行数，注意和前面rows的区别
int row = 0;
//创建JSON
JSONObject json = new JSONObject();
while(rs.next())
{
//将行记录中的字段存入json
json.put("id", rs.getString("id"));
json.put("name", rs.getString("name"));
json.put("password", rs.getString("password"));
json.put("mail", rs.getString("mail"));
//行数增加
row++;
//判断记录行数，如果超过一行使用，号连接
if(row == 1){
result = json.toString();
}
else{
result += "," + json.toString();
}
}
//注意，json中所有key和value都是字符串，rows存放为数据总行数
//注意前面为row，现在为rows
out.println("{\"total\":\"" + rows + "\",\"rows\":[" + result + "]}");
//关闭连接
rs.close();
stmt.close();
conn.close();
%>