Ext Grid Json分页（asp.net）

最新推荐文章于 2017-01-09 22:31:53 发布

孤灯下的倩影

最新推荐文章于 2017-01-09 22:31:53 发布

阅读量850

点赞数

分类专栏： Ext.js 文章标签： Ext Grid Json分页asp.n

Ext.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先感叹extjs的强大，无以言表！

今天瞎弄了很久的grid，看了很多网上的例子和教程，终于搞定了分页和返回的json数据中存在换行符的问题。

刚开始参照网上的例子怎么弄都不能分页，经过调试发现ds.load({params:{start:0,limit:10}});这句话中的参数在后台用Request.QueryString["start"]这种方式获取不到数据，困了我好久，一直以为问题在前台，最后发现问题是后台获取参数的方式有问题，用Request.Params["start"]就OK了。

下面是辛苦了很久的东东，仅供参考。

基础教程：

Ext2.0框架的Grid使用介绍

ExtJS2.0实用简明教程

【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 - 1, 1);
            jsonStr.Append( " ],'totalCount':1000} ");
            Response.Write(jsonStr);

Response.Flush();
Response.Close();

上面这两句句是根据我的下面一篇博客来的，否则经试验返回不了数据(前台页面是一个，后台页面cs又是另外一个，奇怪，不能结合在一起吗？)

效果图：