Ext Grid Json分页（asp.net）
首先感叹extjs的强大，无以言表！
今天瞎弄了很久的grid，看了很多网上的例子和教程，终于搞定了分页和返回的json数据中存在换行符的问题 。
刚开始参照网上的例子怎么弄都不能分页，经过调试发现ds.load({params:{start:0,limit:10}});这句话中的参数在后台用Request.QueryString["start"]这种方式获取不到数据，困了我好久，一直以为问题在前台，最后发现问题是后台获取参数的方式有问题，用Request.Params["start"]就OK了 。
下面是辛苦了很久的东东，仅供参考 。
基础教程：
【JavaScript代码】 ：
Ext.onReady(
function
(){
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header: ' id ' ,dataIndex: ' id ' ,align: ' center ' ,width: 200 },
{header: ' subject ' ,dataIndex: ' subject ' ,width: 500 },
{header: ' attributeID ' ,dataIndex: ' attributeID ' ,align: ' center ' ,width: 200 }
]);
cm.defaultSortable = true ;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: ' ajax/stgldata.aspx ' }),
reader: new Ext.data.JsonReader({
root: ' data ' ,
totalProperty: ' totalCount '
},[ ' id ' , ' subject ' , ' attributeID ' ]
)
});
ds.load({params:{start: 0 ,limit: 25 }});
var grid = new Ext.grid.GridPanel({
el: ' content ' ,
ds: ds,
cm:cm,
height: 500 ,
title: ' asp.net Json ' ,
bbar: new Ext.PagingToolbar({
pageSize: 25 ,
store: ds,
displayInfo: true ,
displayMsg: ' 显示第 {0} 条到 {1} 条记录，一共 {2} 条 ' ,
emptyMsg: " 没有记录 "
})
});
grid.render();
});
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header: ' id ' ,dataIndex: ' id ' ,align: ' center ' ,width: 200 },
{header: ' subject ' ,dataIndex: ' subject ' ,width: 500 },
{header: ' attributeID ' ,dataIndex: ' attributeID ' ,align: ' center ' ,width: 200 }
]);
cm.defaultSortable = true ;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: ' ajax/stgldata.aspx ' }),
reader: new Ext.data.JsonReader({
root: ' data ' ,
totalProperty: ' totalCount '
},[ ' id ' , ' subject ' , ' attributeID ' ]
)
});
ds.load({params:{start: 0 ,limit: 25 }});
var grid = new Ext.grid.GridPanel({
el: ' content ' ,
ds: ds,
cm:cm,
height: 500 ,
title: ' asp.net Json ' ,
bbar: new Ext.PagingToolbar({
pageSize: 25 ,
store: ds,
displayInfo: true ,
displayMsg: ' 显示第 {0} 条到 {1} 条记录，一共 {2} 条 ' ,
emptyMsg: " 没有记录 "
})
});
grid.render();
});
【HTML代码】：
<
link
rel
="stylesheet"
type
="text/css"
href
="http://localhost:2008/stk/js/extjs/resources/css/ext-all.css"
/>
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/ext-all.js" ></ script >
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/build/locale/ext-lang-zh_CN.js" ></ script >
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/ext-all.js" ></ script >
< script type ="text/javascript" src ="http://localhost:2008/stk/js/extjs/build/locale/ext-lang-zh_CN.js" ></ script >
<
div
id
="content"
style
="height: 500px;"
>
【后台（asp.net）】：
StringBuilder jsonStr
=
new
StringBuilder();
jsonStr.Append( " {'data':[ " );
int start = Convert.ToInt32(Request.Params[ " start " ].Trim());
int limit = Convert.ToInt32(Request.Params[ " limit " ].Trim());
SqlConnection conn = sqlConn();
string sqlstr = " select top " + limit + " id,subject,answer,attributeID from [2_questions] where id not in (select top " + start + " id from [2_questions]) " ;
try
{
conn.Open();
SqlCommand comm = new SqlCommand(sqlstr, conn);
SqlDataReader rd = comm.ExecuteReader();
while (rd.Read())
{
jsonStr.Append( " { " );
jsonStr.Append( " 'id': " + rd.GetInt32( 0 ).ToString() + " , " );
jsonStr.Append( " 'subject':' " + rd.GetString( 1 ) + " ', " );
jsonStr.Append( " 'attributeID': " + rd.GetInt32( 3 ).ToString() + "" );
jsonStr.Append( " }, " );
}
}
finally
{
conn.Close();
}
jsonStr.Remove(jsonStr.Length - 1 , 1 );
jsonStr.Append( " ],'totalCount':1000} " );
Response.Write(jsonStr);
jsonStr.Append( " {'data':[ " );
int start = Convert.ToInt32(Request.Params[ " start " ].Trim());
int limit = Convert.ToInt32(Request.Params[ " limit " ].Trim());
SqlConnection conn = sqlConn();
string sqlstr = " select top " + limit + " id,subject,answer,attributeID from [2_questions] where id not in (select top " + start + " id from [2_questions]) " ;
try
{
conn.Open();
SqlCommand comm = new SqlCommand(sqlstr, conn);
SqlDataReader rd = comm.ExecuteReader();
while (rd.Read())
{
jsonStr.Append( " { " );
jsonStr.Append( " 'id': " + rd.GetInt32( 0 ).ToString() + " , " );
jsonStr.Append( " 'subject':' " + rd.GetString( 1 ) + " ', " );
jsonStr.Append( " 'attributeID': " + rd.GetInt32( 3 ).ToString() + "" );
jsonStr.Append( " }, " );
}
}
finally
{
conn.Close();
}
jsonStr.Remove(jsonStr.Length - 1 , 1 );
jsonStr.Append( " ],'totalCount':1000} " );
Response.Write(jsonStr);
效果图：
