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

【转】http://www.cnblogs.com/tujiang/archive/2009/07/03/1516488.html

客户端显示数据页面,当然也可以用静态的html页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyQuestionList.aspx.cs" Inherits="MyQuestionList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJS/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ExtJS/ext-all.js" type="text/javascript"></script>
   
    <link href="css/Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

Ext.onReady(function() {
           
            var ds = new Ext.data.Store({
                url: "GetQuestionList.aspx",
                reader: new Ext.data.JsonReader(
                    { root: 'datalist', totalProperty: 'totalCount' },
                    [{ name: 'title', mapping: 'title' },
                     { name: 'type', mapping: 'type' },
                     { name: 'ct', mapping: 'ct', type: 'date', dateFormat: 'Y-n-j H:i:s' },
                     { name: 'state', mapping: 'state' }
                    ]
                )
            });

var pagingBar = new Ext.PagingToolbar({
                pageSize: 30,
                store: ds,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
            });

var gv = new Ext.grid.GridPanel({
                title: '问题列表',
                el: 'divGvList',
                height: 500,
                loadMask: { msg: '正在加载数据,请稍侯……' },
                autoWidth: true,
                store: ds,
                viewConfig:{forceFit:true},
                columns: [
                    new Ext.grid.RowNumberer(),
                    { header: '标题', dataIndex: 'title', sortable: true },
                    { header: '分类', dataIndex: 'type', sortable: true },
                    { header: '时间', width: 100, dataIndex: 'ct', sortable: true, renderer: Ext.util.Format.dateRenderer('Y.m.d') },
                    { header: '回复状态', width: 80, dataIndex: 'state', sortable: true }
                ],
                bbar: pagingBar
            });
            gv.render();
            ds.load({
                params: { start: 0, limit: 30 },
                callback: function(r, options, success) {
                    if (!success) {
                        alert("加载数据失败,无对应数据或者系统出现异常!");
                    }
                }
            });

});
    </script>
</head>
<body style="padding-top:10px;">
    <form id="form1" runat="server">
        <div id="divGvList" style="margin:0 auto; width:99%;"></div>       
    </form>
</body>
</html>

这个是服务器端读取数据的GetQuestionList.aspx页面

private WebOrder.Server.Service sObj = WebOrder.Server.InterfaceFactory.CreatorServiceObj(); //这个是我自己写的接口类
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder jsonStr = new StringBuilder();
        jsonStr.Append("{'datalist':[");

//这里补充下,有朋友问我第一次加载页面数据显示出来了,然后点下一页的时候没数据,不能翻页

//这里的start不是页码,而是表示从第多少条数据开始取,limit是取多少条(也就是说如果是第二页,每页显示6;start=6,limit=6;第三页的时候start=12,limit=6)
        int start = Convert.ToInt32(Request.Params["start"].Trim());
        int limit = Convert.ToInt32(Request.Params["limit"].Trim());
        int rowCount = 0;
        WebOrder.Server.QuestionInfo[] qList = sObj.ReadQuestionList(start, limit, out rowCount); //这个是实体类数组,如果测试的话可以自己写数据源,然后格式化成json数据类型返回就可以了

foreach (WebOrder.Server.QuestionInfo item in qList)
            {
                jsonStr.Append("{");
                jsonStr.Append("'title':'" + item.标题 + "',");
                jsonStr.Append("'type':'" + item.分类 + "',");
                jsonStr.Append("'ct':'" + item.时间 + "',");
                jsonStr.Append("'state':'" + (item.是否回复 ? "已回复" : "") + "'");
                jsonStr.Append("},");
            }
       
        jsonStr.Remove(jsonStr.Length - 1, 1);
        jsonStr.Append("],'totalCount':" + rowCount.ToString() + "}");
        Response.Write(jsonStr);

//这两行代码不写的话客户端接收不到数据,我弄了好久才发现这个问题,我在博客园其他的博文中也看到有人说就是显示不了数据,不知道和我这个是不是一样的问题,在网上看的例子都是只有Response.Write,然后自己拿来测试又显示不了数据,

//郁闷了一上午,不过总算搞定了,希望对碰到和我一样问题的人能节省点时间
        Response.Flush(); 
        Response.Close(); 
    }

此文是我从博客园转过来的,终于解决了自己的分页问题(让我纠结了很久),我是采用的WebService,与上文稍有不同,其实原理是一样的:

int start = Convert.ToInt32(Context.Request.Params["start"].Trim());
int limit = Convert.ToInt32(Context.Request.Params["limit"].Trim());

string sql = "select e.*,d.dep_name from employee e,department d where e.emp_dep=d.dep_id Limit "+limit.ToString()+" offset "+start.ToString()+";select count(*) as countNum from employee;";

start、limit是ds.load({ params: { start: 0, limit: 2} });传过来的参数

至于在WebService中的Response和Request,将前面加上上下文就可以了:

Context.Response.Write(jsonStr.ToString());
Context.Response.Flush();
Context.Response.Close();

Ext.grid.GridPanel + asp.net 数据分页相关推荐

  1. ExtJs之Ext.grid.GridPanel(部分未完)

    今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. ? 1 2 3 4 5 6 ...

  2. ASP.NET 数据分页第三篇 - 结合 Custom Control 处理 GridView 的 UI 呈现

     延续本系列前两篇帖子「ASP.NET 数据分页第一篇 - 探讨分页原理及 SQL Server 2005 的 ROW_NUMBER 函数」.「ASP.NET 数据分页第二篇 - 范例下载」,本系列的 ...

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

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

  4. Asp.Net 数据分页

    .Net 所使用的 ADO.Net较前身ADO在性能上有较大的提升,但是操作起来也较为繁琐,在 Asp 时代,对数据进行分页使用 RecordSet 的 PageSize 和 AbsolutePage ...

  5. Ext.grid.GridPanel,CheckboxSelectionModel的全选的问题

    Ext.grid.CheckboxSelectionModel的小问题: 解决方法: //监视Store数据是否变化, 进行一些其它处理; pl_store.on('datachanged', fun ...

  6. Ext.grid.GridPanel数据转json

    var count = docAdGrid.getStore().getCount(); var jsonArray = []; for (var i = 0; i < count; i++) ...

  7. Ext Grid Json分页(asp.net)

    首先感叹extjs的强大,无以言表! 今天瞎弄了很久的grid,看了很多网上的例子和教程,终于搞定了分页和返回的json数据中存在换行符的问题 . 刚开始参照网上的例子怎么弄都不能分页,经过调试发现d ...

  8. [转载]ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难...

    代码 1 本示例主要使用到了静态数据分页 Ext.data.PagingMemoryProxy组件.Ext.PagingToolbar分页条.viewConfig的getRowClass 方法.列co ...

  9. Ext.grid.Panel表格分页

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

最新文章

  1. java都市男人心痒痒_说的男人心痒痒的情话 让男人心痒痒的话,谁能帮我弄几句呀?...
  2. hihocoder1260,1261 (HASH经典题)
  3. webpack --- [读书笔记] webpack中常用的一些配置项
  4. JavaFX技巧23:节省内存! 属性的阴影场
  5. python .py文件变为.so文件进行加密
  6. Inside Class Loaders
  7. iPhone 14 Pro将采用开孔全面屏:明年iPhone 15全系标配
  8. 旺旺上显示已上传服务器,在服务器上排除问题的头五分钟 | 旺旺知识库
  9. C#分析URL参数获取参数和值得对应列表(一)
  10. VBScript Sample:遍历文件夹并获取XML文件中指定内容
  11. 数字图像处理第三版(冈萨雷斯)笔记,2020
  12. APP开发的七大阶段,你了解多少?
  13. 量子计算机采用超导技术吗,华人学者一作论文发现不寻常超导体,或可作为量子计算机的“硅”...
  14. 【安全通告】创宇安全智脑:GitLab ExifTool远程命令执行漏洞在野利用(CVE-2021-22205)...
  15. 我的程序人生——初识代码,从学好C语言开始
  16. JavaScript 各种参数 详解(十二)
  17. 那些服务器平台支持nvme,最新网吧无盘服务器能用NVME的M.2  SSD吗?
  18. project2010如何插入子任务?
  19. XManager使用说明
  20. MaxCompute SQL的SELECT语法

热门文章

  1. 一张图看完成都云栖大会的精彩,请用心感受!
  2. 统计一个数组中正数和负数的个数
  3. oninput,onpropertychange,onchange的使用方法和差别
  4. How Setting Show Transaction Code on SAP Tree Menu Side.
  5. APICACHE : Express/Node的API响应缓存中间件
  6. 你解决的问题比你编写的代码更重要! 1
  7. Docker的今生前世,关于Docker的一些见解
  8. 图片服务 - thumbor启用AutoJPG
  9. Java面试 - List和Set比较,各自的子类比较
  10. 【python】Macbook M1/M1pro/M1max 安装anaconda记录