您现在的位置: 365建站网 > 365文章 > Ext.grid.GridPanel + asp.net 数据分页

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

文章来源:365jz.com     点击数:881    更新时间:2009-09-17 10:15   参与评论

今天第一次在博客园写东西,以前都是问问题,主要是为了怕自己以后忘记可以看看,写的不好不许骂人 呵呵

现在做一个项目,老板要求用Ext开发,没办法,边学边做,今天碰到分页的问题,搞了一个上午终于搞定了,在网上也搜了好久都没找到答案

后来自己逐个检查调试,终于搞定了。

客户端显示数据页面,当然也可以用静态的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(); 
    }

Tag标签: Ext

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (881人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 建站公司
· 杰创官网
· 建站工具

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2022 版权所有 鄂ICP备17013400号