5 数据网格具有分页功能

来源：互联网发布：贪心算法举例编辑：程序博客网时间：2024/05/16 13:44

数据网格接收数据库中数据的例子可参看：

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;//创建JSONJSONObject json = new JSONObject();while(rs.next()){//将行记录中的字段存入jsonjson.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":"gdhyyanglang@126.com"}

如果有多行记录，使用“，”号连接。

最后将所有的信息组合成easy-ui数据网格接收的数据格式：

out.println("{\"total\":\""+ row + "\",\"rows\":[" + result + "]}");

访问jsp，你可能看到如下的数据：

{"total":"2","rows":[{"id":"1","name":"yanglang","password":"yanglang","mail":"gdhyyanglang@126.com"},{"id":"2","name":"st","password":"st","mail":"gdhyyang@126.com"}]}

注意：要将所有的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，页数为1String 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;//创建JSONJSONObject json = new JSONObject();while(rs.next()){//将行记录中的字段存入jsonjson.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，现在为rowsout.println("{\"total\":\"" + rows + "\",\"rows\":[" + result + "]}");//关闭连接rs.close();stmt.close();conn.close();%>