首先感叹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又是另外一个,奇怪,不能结合在一起吗?)
效果图:

Ext Grid Json分页(asp.net)相关推荐

  1. Ext.grid.GridPanel + asp.net 数据分页

    Ext.grid.GridPanel + asp.net 数据分页 [转]http://www.cnblogs.com/tujiang/archive/2009/07/03/1516488.html ...

  2. Ext.grid.Panel表格分页

    Ext.grid.Panel表格分页示例 代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...

  3. 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(1)...

    应用程序的基本框架已经搭建好了,现在要做的是完成一个个的功能模块.先从简单做起,完成用户管理模块,该模块主要功能是使用一个Grid显示用户信息,并使用RowEditing进行用户的编辑.添加操作.Gr ...

  4. Ext.grid.ColumnModel

    http://szz0429-126-com.iteye.com/blog/978195 http://www.studyofnet.com/news/136.html (非原创) 2.如何在表格中添 ...

  5. 使用Dynamic LINQ实现Ext Grid的远程排序

    要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dy ...

  6. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  7. 使用Ext.grid.Panel显示远程数据

    使用Ext.grid.Panel显示远程数据 对于Ext.grid.Panel而言,它只是负责显示Store数组中心的数据,至于Store保存的数据到底是浏览器本地数据,还是远程服务器的数据,Ext. ...

  8. Ext.grid.CheckboxSelectionModel

    1.CheckboxSelectionModel简写sm 2.实现sm是否显示 后台传入的json对象包含selected属性 {root:[{id:'1',code:'1001',name:'老李' ...

  9. Ext.grid.ColumnModel基本设置(转自网易博客itworkto)

    Ext.grid.ColumnModel     该类用于定义表格的列模型,其配置项是一个由"列定义"组成的数组,还可以是JSON组成的对象.其中也定义很多操作列的 属性.方法 比 ...

最新文章

  1. linux文件时间属性的详解
  2. uwp连接mysql数据库_mysql 8.0 新版本出现group by 语句不兼容问题
  3. 一文读懂spring boot 和微服务的关系
  4. java runtime environment 官网_Java Runtime Environment SE Development Kit
  5. cbow word2vec 损失_Skip-gram和CBOW知识点
  6. Nacos源码NacosAutoServiceRegistration
  7. React Native应用如何想访问HTTP资源应该怎么办
  8. mysql 8.0.16修改root密码_mysql 8.0.16 winx64及Linux修改root用户密码 的方法
  9. Taro+react开发(77):taro项目目录介绍
  10. 跨平台RTSP/RTMP转RTMP转发SDK
  11. python3 内置方法
  12. 贪吃蛇javascript代码_源于Jquery开发贪吃蛇游戏——简单思路分析总结
  13. Android自定义控件之自定义倒计时按钮
  14. 高通IPQ4019 IPQ4029 模块+底板双频 AC无线路由模块开发板
  15. 微信公众号开发:素材管理(临时、永久)
  16. DM数据库全面调优指南之Linux操作系统
  17. 淘宝电商创业可能会面临哪些问题?
  18. 0716 process finished with exit code 0 解决
  19. Ubuntu和windows之间复制粘贴,遇到无法安装Vmware-tools
  20. Unloaded branch node detected. “loadOptions“ prop is required to load its children

热门文章

  1. JAVA IO系列----ObjectInputStream和ObjectOutputStream类
  2. flask-sqlalchemy分表解决方案
  3. CharacterEncodingFilter作用
  4. vmware 克隆centos 6.4网卡不识别
  5. MiniO纠删码快速入门
  6. EasyUI界面显示中文格式(日期中文格式)
  7. sql语句执行步骤详解
  8. vue遍历data所有变量并赋值
  9. c语言 年月日比较大小
  10. 【Python】解决No name 'QWidget' in module 'PyQt5.QtWidgets'