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