ExtJS入门教程06,grid分页的实现


前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页。

数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就看看如何异步的加载分页数据。

在extjs grid的请求中,包含几个参数,如图:

image

page:当前页

start:起始行的行号

limit:每页数据行数,默认为25

在请求处理的时候,我们只要获得这些参数,就可以方便的将想要的分页后的数据返回给客户端。

接下来我们新建一个handler,用来处理分页请求,返回数据:

public class gridPaging : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/json";
        Common.HandleResult result = new Common.HandleResult();

        int limit = int.Parse(context.Request["limit"]);
        int page = int.Parse(context.Request["page"]);
        var list = Entity.UserEntity.UserList.Skip(limit * (page - 1)).Take(limit);
        result.Set(true, new { total = Entity.UserEntity.UserList.Count, record = list });
        string jsonString = JsonConvert.SerializeObject(result);
        context.Response.Write(jsonString);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

然后,修改我们的store,将默认的每页数据行数改为2(我们的列表中只有6行数据):

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 2,
    proxy: {
        type: "ajax",
        url: "/handlers/gridPaging.ashx",
        reader: {
            type: 'json',
            root: "data.record",
            totalProperty: "data.total",
            idProperty: 'ID'
        }
    }
});

由于采用了分页,我们返回的json数据的结构也发生了变化,所以reader也进行了相应的改变。

然后刷新看我们的grid,截图如下:

image

确实是有两行数据,但是却少了我们的分页工具栏。

接下来我们为grid添加分页工具栏,通常情况下,我们将工具栏显示在grid底部,代码如下:

var win = Ext.create("Ext.Window", {
    title: "gird demo",
    width: 300,
    height: 200,
    layout: "fit",
    items: {
        xtype: "grid",
        store: myStore,
        columns: [
            { xtype: "rownumberer" },
            { text: "姓名", dataIndex: "Name" },
            { text: "年龄", dataIndex: "Age" }
        ],
        bbar: [
            { xtype: "pagingtoolbar", store: myStore }
        ]
    }
});

pagingtoolbar的store配置一定要和grid的store相同。

截个图,看看效果:

image

大概就是这个样子,我们的grid已经可以进行分页了,并且是异步的哦

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM