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":"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,页数为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();
%>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值