首先感叹extjs的强大,无以言表!
今天瞎弄了很久的grid,看了很多网上的例子和教程,终于搞定了分页和返回的json数据中存在换行符的问题 。
刚开始参照网上的例子怎么弄都不能分页,经过调试发现ds.load({params:{start:0,limit:10}});这句话中的参数在后台用Request.QueryString["start"]这种方式获取不到数据,困了我好久,一直以为问题在前台,最后发现问题是后台获取参数的方式有问题,用Request.Params["start"]就OK了 。
下面是辛苦了很久的东东,仅供参考 。
基础教程:
【JavaScript代码】 :
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.onReady(
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);
Response.Flush();
Response.Close();
Response.Close();
上面这两句句是根据我的下面一篇博客来的,否则经试验返回不了数据(前台页面是一个,后台页面cs又是另外一个,奇怪,不能结合在一起吗?)
效果图: