GridPanel绑定后台数据同时分页demo
2011-05-15 08:09
309 查看
前台页面:
<head>
<title>绑定后台数据</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<link href="ext-3.1.1/resources/css/ext-all.css" rel="Stylesheet" />
<script type="text/javascript">
Ext.onReady(function() {
//begin
//创建列
var cm = new Ext.grid.ColumnModel(
[
{ header: "用户ID", name: "ID", sortable: true },
{ header: "用户名", name: "UserName", sortable: true },
{ header: "年龄", name: "Age", sortable: true }
]);
//创建recode格式
var recode = new Ext.data.Record.create([
{ name: "ID" },
{ name: "UserName" },
{ name: "Age" }
]);
//创建JSONreader
var reader = new Ext.data.JsonReader({
totalProperty: "count", // 该属性是指定记录集的总数(可选的)the property which contains the total dataset size (optional)
root: "root"
}, recode);
//创建store返回recode
var store = new Ext.data.Store({
url: "GetUserDataJson.aspx",//通过访问服务端的数据
reader: reader
})
store.load({params:{ start: 0, limit: 3}});//传递参数
var gridpanel = new Ext.grid.GridPanel({
title: "通过后台获取数据",
height: 500,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({pageSize:3,store:store,displayInfo:true,displayMsg:"显示第{0}~{1},共有{2}条记录",emptyMsg:"没有可显示的数据"}), //创建分页
renderTo: "gpanel"
});
//end
})
</script>
</head>
<body>
<div id="gpanel"></div>
</body>
后台页面:
<%
int start =int.Parse(Request.Params["start"].ToString());
int limit = int.Parse(Request.Params["limit"].ToString());
string sqlcon = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString;
using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(sqlcon))
{
string sql = string.Format("select top {0} * from tuser where id not in( select top {1} id from tuser order by id desc) order by id desc",limit,start);
using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(sql, con))
{
con.Open();
System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader();
StringBuilder allStr = new StringBuilder();
allStr.Append(@"{root:[");
int i = 0;
while (reader.Read())
{
i++;
allStr.Append("{ID:'" + reader["Id"].ToString() + "',UserName:'" + reader["UserName"].ToString() + " ',Age:'" + reader["age"].ToString() + "'},");
}
allStr = allStr.Remove(allStr.Length - 1, 1);
allStr.Append(@"],count:'10'}");
%>
<%=allStr.ToString() %>
<%
}
}
%>
<head>
<title>绑定后台数据</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<link href="ext-3.1.1/resources/css/ext-all.css" rel="Stylesheet" />
<script type="text/javascript">
Ext.onReady(function() {
//begin
//创建列
var cm = new Ext.grid.ColumnModel(
[
{ header: "用户ID", name: "ID", sortable: true },
{ header: "用户名", name: "UserName", sortable: true },
{ header: "年龄", name: "Age", sortable: true }
]);
//创建recode格式
var recode = new Ext.data.Record.create([
{ name: "ID" },
{ name: "UserName" },
{ name: "Age" }
]);
//创建JSONreader
var reader = new Ext.data.JsonReader({
totalProperty: "count", // 该属性是指定记录集的总数(可选的)the property which contains the total dataset size (optional)
root: "root"
}, recode);
//创建store返回recode
var store = new Ext.data.Store({
url: "GetUserDataJson.aspx",//通过访问服务端的数据
reader: reader
})
store.load({params:{ start: 0, limit: 3}});//传递参数
var gridpanel = new Ext.grid.GridPanel({
title: "通过后台获取数据",
height: 500,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({pageSize:3,store:store,displayInfo:true,displayMsg:"显示第{0}~{1},共有{2}条记录",emptyMsg:"没有可显示的数据"}), //创建分页
renderTo: "gpanel"
});
//end
})
</script>
</head>
<body>
<div id="gpanel"></div>
</body>
后台页面:
<%
int start =int.Parse(Request.Params["start"].ToString());
int limit = int.Parse(Request.Params["limit"].ToString());
string sqlcon = ConfigurationManager.ConnectionStrings["mycon"].ConnectionString;
using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(sqlcon))
{
string sql = string.Format("select top {0} * from tuser where id not in( select top {1} id from tuser order by id desc) order by id desc",limit,start);
using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(sql, con))
{
con.Open();
System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader();
StringBuilder allStr = new StringBuilder();
allStr.Append(@"{root:[");
int i = 0;
while (reader.Read())
{
i++;
allStr.Append("{ID:'" + reader["Id"].ToString() + "',UserName:'" + reader["UserName"].ToString() + " ',Age:'" + reader["age"].ToString() + "'},");
}
allStr = allStr.Remove(allStr.Length - 1, 1);
allStr.Append(@"],count:'10'}");
%>
<%=allStr.ToString() %>
<%
}
}
%>
相关文章推荐
- [ExtJS5学习笔记]第二十四节 Extjs5中表格gridpanel或者表单数据后台传输remoteFilter设置
- 【开源】分页数据绑定控件GridPager 1.0版发布
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
- Ext.grid.GridPanel + asp.net 数据分页
- 在写extjs中一个panel里放了3个grid,但就是不显示页面,后台给出数据,前台也有加载数据
- ExtjsDemo--gridpannel 调用绑定本地data同时删除行案例
- 关于Kendo Grid数据绑定后台的问题
- Ext.NET 4.1.0 GridPanel数据分页
- Extjs Grid 数据绑定 json 分页 不分页
- Ext.grid.Panel 从后台获取数据源和数据格式详解
- Extjs 4.0 Grid 数据绑定 json 分页 不分页
- jQuery miniui grid 分页数据后台处理 基于springmvc 和hibernate
- 与ASP.NET服务器端结合返回JSON数据实现ExtJS GridPanel客户端分页
- Ext.grid.Panel远程加载数据分页,提供添加删除修改等操作
- jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
- 【Ext】EditorGrid绑定后台数据
- Ext2.0教程二:基本表格GridPanel,从后台数据库取数据
- EXT.NET GridPanel绑定XML里的数据
- Ext.grid.GridPanel + asp.net 数据分页
- ExtjsGrid 分页、ASP.net前后台数据交互