Ext Grid Json分页(asp.net)

与世无争的帅哥 提交于 2020-02-14 05:27:02

首先感叹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();
    
});

 

【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>

 

<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 
- 11);
            jsonStr.Append(
"],'totalCount':1000}");
            Response.Write(jsonStr);
效果图:
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!