Ext-Grid-HttpProxy-分页
1、客户端代码
<%
/**
* @author lzb
* Created on 2008-11-29
* 练习使用Ext-form-grid
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<%
String t_style="http://www.cnblogs.com/../style/"+s_style;
String t_image="http://www.cnblogs.com/../image/"+s_image;
String t_startdt = request.getParameter("startdt");
String t_enddt = request.getParameter("enddt");
String t_wtdw = new String(request.getParameter("wtdw").getBytes("iso-8859-1"),"utf-8");
%>
<html>
<head>
<title>练习使用Ext-form-grid</title>
<link href="<%=t_style%>/default/styles.css" rel="stylesheet">
<!-- Company css <link href="<%=t_style%>/default/styles.css" rel="stylesheet"> -->
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Company js -->
<script language="javascript" src="<%=path%>/script/<%=s_script%>/default/menubar.js"></script>
<script language="javascript" src="<%=path%>/script/<%=s_script%>/default/main_page.js"></script>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//使用HttpProxy
Ext.onReady(function(){
var t_wts = Ext.data.Record.create([
{name: 'xmmc', mapping: 'xmmc'},
{name: 'wtr'},
{name: 'wtdwmc', mapping: 'wtdwmc'},
{name: 'cwrq', mapping: 'cwrq'},
{name: 'jsrxm', mapping: 'jsrxm'},
{name: 'jsrq', mapping: 'jsrq'},
]);
//根据这个代理,获得json数据
//要用双层编码,后台用一层解码就可以了;
//js编码,jsp解码,两者是可以转化的
var t_wtdw = encodeURI(encodeURI("<%=t_wtdw%>"));
var proxy = new Ext.data.HttpProxy({url:'lzb-form-grid_getdata_json.jsp?t_kssj=<%=t_startdt%>&t_jssj=<%=t_enddt%>&t_wtdw=' + t_wtdw});
//数据读取器
var reader= new Ext.data.JsonReader({
totalProperty: "total",//数据总条数
root:"rows", //将要显示数据的数组
id:"rt" //每一行数据的唯一记录
},t_wts);
//创建一个store
var store=new Ext.data.Store({ proxy:proxy, reader:reader });
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "分类名称", width: 120, dataIndex: 'xmmc', sortable: true},
{header: "委托人", width: 180, dataIndex: 'wtr', sortable: true},
{header: "委托单位名称", width: 115, dataIndex: 'wtdwmc', sortable: true},
{header: "成为日期", width: 100, dataIndex: 'cwrq', sortable: true},
{header: "接收人姓名", width: 115, dataIndex: 'jsrxm', sortable: true},
{header: "接收日期", width: 100, dataIndex: 'jsrq', sortable: true}
],
renderTo:'example-grid',
width:700,
height:500,
bbar:new Ext.PagingToolbar(
{
store: store,
pageSize:30,
store: store,
displayInfo:true
})
});
store.load({params:{start:0, limit:30}});
});
</script>
</head>
<body>
<div id="example-grid"></div>
</body>
</html>
/**
* @author lzb
* Created on 2008-11-29
* 练习使用Ext-form-grid
*
*/
%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<%
String t_style="http://www.cnblogs.com/../style/"+s_style;
String t_image="http://www.cnblogs.com/../image/"+s_image;
String t_startdt = request.getParameter("startdt");
String t_enddt = request.getParameter("enddt");
String t_wtdw = new String(request.getParameter("wtdw").getBytes("iso-8859-1"),"utf-8");
%>
<html>
<head>
<title>练习使用Ext-form-grid</title>
<link href="<%=t_style%>/default/styles.css" rel="stylesheet">
<!-- Company css <link href="<%=t_style%>/default/styles.css" rel="stylesheet"> -->
<!-- Ext css -->
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../forms.css"/>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/examples.css"/>
<!-- Company js -->
<script language="javascript" src="<%=path%>/script/<%=s_script%>/default/menubar.js"></script>
<script language="javascript" src="<%=path%>/script/<%=s_script%>/default/main_page.js"></script>
<!-- Ext js -->
<script type="text/javascript" src="http://www.cnblogs.com/../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
//使用HttpProxy
Ext.onReady(function(){
var t_wts = Ext.data.Record.create([
{name: 'xmmc', mapping: 'xmmc'},
{name: 'wtr'},
{name: 'wtdwmc', mapping: 'wtdwmc'},
{name: 'cwrq', mapping: 'cwrq'},
{name: 'jsrxm', mapping: 'jsrxm'},
{name: 'jsrq', mapping: 'jsrq'},
]);
//根据这个代理,获得json数据
//要用双层编码,后台用一层解码就可以了;
//js编码,jsp解码,两者是可以转化的
var t_wtdw = encodeURI(encodeURI("<%=t_wtdw%>"));
var proxy = new Ext.data.HttpProxy({url:'lzb-form-grid_getdata_json.jsp?t_kssj=<%=t_startdt%>&t_jssj=<%=t_enddt%>&t_wtdw=' + t_wtdw});
//数据读取器
var reader= new Ext.data.JsonReader({
totalProperty: "total",//数据总条数
root:"rows", //将要显示数据的数组
id:"rt" //每一行数据的唯一记录
},t_wts);
//创建一个store
var store=new Ext.data.Store({ proxy:proxy, reader:reader });
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "分类名称", width: 120, dataIndex: 'xmmc', sortable: true},
{header: "委托人", width: 180, dataIndex: 'wtr', sortable: true},
{header: "委托单位名称", width: 115, dataIndex: 'wtdwmc', sortable: true},
{header: "成为日期", width: 100, dataIndex: 'cwrq', sortable: true},
{header: "接收人姓名", width: 115, dataIndex: 'jsrxm', sortable: true},
{header: "接收日期", width: 100, dataIndex: 'jsrq', sortable: true}
],
renderTo:'example-grid',
width:700,
height:500,
bbar:new Ext.PagingToolbar(
{
store: store,
pageSize:30,
store: store,
displayInfo:true
})
});
store.load({params:{start:0, limit:30}});
});
</script>
</head>
<body>
<div id="example-grid"></div>
</body>
</html>
2、服务端代码
<%
/**
* @author lzb
* Created on 2008-11-29
* 练习使用Ext-form-grid
*
*/
%>
<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored = "true" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<%
try
{
//json数据
String t_kssj = request.getParameter("t_kssj");
String t_sjsj = request.getParameter("t_sjsj");
String t_wtdw = request.getParameter("t_wtdw");
t_wtdw = java.net.URLDecoder.decode(t_wtdw,"UTF-8");
String t_start = request.getParameter("start");
String t_limit = request.getParameter("limit");
System.out.println(t_start+ ":" + t_limit);
//要截取得数据
String t_sql = " select * from (select t.xmmc,t.wtr,wtdwmc,t.cwrq,jsrxm,t.jsrq, rownum as rn from txnfxhy_aaxt_b_jbxx t ) where 1=1 ";//
if(t_wtdw != null && !t_wtdw.equals(""))
{
t_sql += " and wtdwmc like'%" + t_wtdw+ "%' ";
}
if(t_kssj != null && !t_kssj.equals(""))
{
t_sql += " and firsttime >=to_date('" + t_kssj+ "','YYYY-MM-DD') ";
}
if(t_sjsj != null && !t_sjsj.equals(""))
{
t_sql += " and firsttime <= to_date('" + t_sjsj+ "','YYYY-MM-DD') ";
}
System.out.println(t_sql);
//查询总数
Result rs_total = db.sqlQuery(t_sql);
t_sql += "and rn > " + t_start + " and rn < " + t_limit + "+ " + t_start;
Result rs_sql = db.sqlQuery(t_sql);
int i = 0;
String json = "{total:"+rs_total.getRows()+",rows:[";
while(rs_sql.next())
{
i++;
json += "{'rowid':'"+rs_sql.getString("rowid") + "','xmmc':'"+ rs_sql.getString("xmmc") + "','wtr':'"+ rs_sql.getString("wtr") + "','wtdwmc':'"+rs_sql.getString("wtdwmc") + "',";
json += "'cwrq':'"+rs_sql.getString("cwrq") + "','jsrxm':'" + rs_sql.getString("jsrxm") + "','jsrq':'" + rs_sql.getString("jsrq") + "'}";
if(i != rs_sql.getRows())
{
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
}
catch(Exception ex)
{
System.out.println(ex.getMessage());
}
%>
/**
* @author lzb
* Created on 2008-11-29
* 练习使用Ext-form-grid
*
*/
%>
<%@page import="java.net.URLEncoder"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored = "true" %>
<%@ include file="http://www.cnblogs.com/http://www.cnblogs.com/../common/common_page.jsp" %>
<%
try
{
//json数据
String t_kssj = request.getParameter("t_kssj");
String t_sjsj = request.getParameter("t_sjsj");
String t_wtdw = request.getParameter("t_wtdw");
t_wtdw = java.net.URLDecoder.decode(t_wtdw,"UTF-8");
String t_start = request.getParameter("start");
String t_limit = request.getParameter("limit");
System.out.println(t_start+ ":" + t_limit);
//要截取得数据
String t_sql = " select * from (select t.xmmc,t.wtr,wtdwmc,t.cwrq,jsrxm,t.jsrq, rownum as rn from txnfxhy_aaxt_b_jbxx t ) where 1=1 ";//
if(t_wtdw != null && !t_wtdw.equals(""))
{
t_sql += " and wtdwmc like'%" + t_wtdw+ "%' ";
}
if(t_kssj != null && !t_kssj.equals(""))
{
t_sql += " and firsttime >=to_date('" + t_kssj+ "','YYYY-MM-DD') ";
}
if(t_sjsj != null && !t_sjsj.equals(""))
{
t_sql += " and firsttime <= to_date('" + t_sjsj+ "','YYYY-MM-DD') ";
}
System.out.println(t_sql);
//查询总数
Result rs_total = db.sqlQuery(t_sql);
t_sql += "and rn > " + t_start + " and rn < " + t_limit + "+ " + t_start;
Result rs_sql = db.sqlQuery(t_sql);
int i = 0;
String json = "{total:"+rs_total.getRows()+",rows:[";
while(rs_sql.next())
{
i++;
json += "{'rowid':'"+rs_sql.getString("rowid") + "','xmmc':'"+ rs_sql.getString("xmmc") + "','wtr':'"+ rs_sql.getString("wtr") + "','wtdwmc':'"+rs_sql.getString("wtdwmc") + "',";
json += "'cwrq':'"+rs_sql.getString("cwrq") + "','jsrxm':'" + rs_sql.getString("jsrxm") + "','jsrq':'" + rs_sql.getString("jsrq") + "'}";
if(i != rs_sql.getRows())
{
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
}
catch(Exception ex)
{
System.out.println(ex.getMessage());
}
%>
3、总结
1）用post提交数据的书后，必须encodeURI(encodeURI("<%=t_wtdw%>"))，像这样编码两次
在服务段用request取数据的时候，要解码一次。如：t_wtdw = java.net.URLDecoder.decode(t_wtdw,"UTF-8");
2）分页其实就这么简单，start和limit两个参数传进去就ok。如：store.load({params:{start:0, limit:30}});返回json数据的时候，数据总条数很重要；如果一个页面显示所有的数据，或者不显示，一定要看一下，是否是你的sql有问题
