帶分頁的grid

魏正欽的圖書館 2015-01-14

展開全文

很多時(shí)候，我們需要顯示在grid中的數(shù)據(jù)不是短短的幾條或者幾十條，而是成千上萬條。如果讓大量的數(shù)據(jù)一股腦全都顯示在一個(gè)頁面中，可以想象會造成什么樣的用戶體驗(yàn)。因此，現(xiàn)在幾乎所有的grid控件都會支持分頁功能。extjs也不例外，它對分頁也提供了強(qiáng)大而方便的支持，使得我們在分頁處理上可以得心應(yīng)手。
    在extjs中，類Ext.PagingToolbar封裝了關(guān)于分頁的操作，該類從Toolbar繼承而來，單從名字上看，我們也猜得出這是一個(gè)能夠處理分頁的工具欄。好吧，那我們就來看看如何構(gòu)造這樣一個(gè)工具欄吧。PagingToolbar類的構(gòu)造函數(shù)需要一個(gè)json對象來進(jìn)行配置，在js中，使用json對象來提供所需參數(shù)非常方便，這樣使得我們可以只填寫感興趣的參數(shù)，并且不必關(guān)心參數(shù)的順序。我們的分頁工具欄常用的配置參數(shù)包括：
    pageSize：每頁顯示的記錄數(shù)，默認(rèn)是20。
    store：這個(gè)和grid里邊的store參數(shù)是一樣的，因?yàn)榉猪撘残枰蛿?shù)據(jù)打交道，所以需要這個(gè)參數(shù)。
    displayMsg：顯示的分頁狀態(tài)信息，例如“第{0}-第{1}條，一共{2}條"，注意一定要有大括號括起來的0，1，2，分別代表當(dāng)前頁的開始，結(jié)束，還有全部的記錄數(shù)，其它的字自己隨便寫吧，只要讀起來通順就可以了，該信息會顯示在分頁工具欄的右側(cè)。
    displayInfo：是否顯示displayMsg，默認(rèn)是不顯示。
    emptyMsg：沒有記錄時(shí)顯示的文本。
    items：要在工具欄上顯示的項(xiàng)，我們在構(gòu)造之后再來看一下都可以有哪些項(xiàng)。
    好了，現(xiàn)在可以構(gòu)造我們的分頁工具欄了，不過因?yàn)槲覀兊膮?shù)里邊需要一個(gè)Store類的對象，所以我們先來構(gòu)造它：

 1var store = new Ext.data.JsonStore({
 2        root: 'topics',
 3        totalProperty: 'totalCount',
 4        idProperty: 'threadid',
 5        remoteSort: true,
 6
 7        fields: [
 8            'title', 'forumtitle', 'forumid', 'author',
 9            { name: 'replycount', type: 'int' },
10            { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
11            'lastposter', 'excerpt'
12        ],
13
14        // 因?yàn)榭缬颍允褂肧criptTagProxy，在同一個(gè)域里邊用HttpProxy
15        proxy: new Ext.data.ScriptTagProxy({
16            url: 'http:///forum/topics-browse-remote.php'
17        })
18    });

    這一次，我們使用了JsonStore類來構(gòu)造所需要的Store對象，顧名思義，這是用來轉(zhuǎn)化son格式的數(shù)據(jù)的。另外我們是從外部服務(wù)器來獲取數(shù)據(jù)，所以代碼相對于原來從數(shù)組里邊獲得數(shù)據(jù)要復(fù)雜一些，我們來看看用到的那些參數(shù)的意義：
    root：包含數(shù)據(jù)行集合的屬性名字。
    totalProperty：表示數(shù)據(jù)集中全部記錄數(shù)的屬性名字，只有在分頁的時(shí)候才需要。
    idProperty：數(shù)據(jù)行中用來作為標(biāo)識的屬性的名字。
    remoteSort：排序的時(shí)候是否通過proxy獲得新的數(shù)據(jù)，默認(rèn)是false。
    fields：上一個(gè)系列里邊提到過。這里多了一個(gè)mapping，它是將數(shù)據(jù)里邊的名字映射成封裝后的Record字段的名字，名字相同的時(shí)候，可以忽略。
    proxy：數(shù)據(jù)的來源。在這里，我們只需要知道我們的數(shù)據(jù)是從url指明的地址獲得的，因?yàn)檫@個(gè)地址是跨域的，所以使用ScriptTagProxy。
    需要注意的是，從服務(wù)器返回的數(shù)據(jù)必須具有如下的格式：

{
    "totalCount":10000, //對應(yīng)totalProperty屬性的值
    "topics":[                 //對應(yīng)root戶型的值
            //這里是json對象的集合，每一個(gè)對象的屬性
            //需要和fields里邊name屬性的值對應(yīng)
            //觀察url返回給我們的數(shù)據(jù)可以更清楚的看明白這一點(diǎn)
      ]
}

接下來就是構(gòu)造我們的分頁工具欄了：

 1var pagingToolbar = new Ext.PagingToolbar({
 2        pageSize: 25,
 3        store: store,
 4        displayInfo: true,
 5        displayMsg: 'Displaying topics {0} - {1} of {2}',
 6        emptyMsg: "一篇文章也沒有",
 7        items: [
 8                '-', {
 9                    pressed: true,
10                    enableToggle: true,
11                    text: 'Show Preview',
12                    cls: 'x-btn-text-icon details',
13                    toggleHandler: function(btn, pressed) {
14                        var view = grid.getView();
15                        view.showPreview = pressed;
16                        view.refresh();
17                    }
18}]
19    });

    (不知道vs2008的格式化功能為什么把第18行的括號給放在最靠左邊的位置，望哪位朋友知道解決的方法告知一下。)
    items是工具欄上項(xiàng)的集合，默認(rèn)的類型是按鈕。我們這里只用到了兩項(xiàng)，“-”代表分隔符，第二項(xiàng)就是一個(gè)button，我們來看看其中每個(gè)屬性都表示什么：
    pressed：表示按鈕在開始的時(shí)候是否被按下，只有enableToggle為真的時(shí)候才有用。
    enableToggle：指示button是否能處于被按下的狀態(tài)。
    text：按鈕上顯示的文本。
    cls：按鈕的css類。
    toggleHander：設(shè)置enableToggle為true時(shí)點(diǎn)擊按鈕時(shí)的事件處理函數(shù)。
    是時(shí)候把分頁工具欄和grid組合在一起了，這次我們的grid沒有使用ColumnModel而是使用columns屬性，同時(shí)我們使用了viewConfig來對用戶界面進(jìn)行配置，看下完整的代碼吧：

  1///<reference path="vswd-ext_2.0.2.js" />
  2/*
  3*作者：大笨
  4*日期：2009-10-13
  5*版本：1.0
  6*博客地址：http://yage.cnblogs.com
  7*/
  8Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
  9Ext.onReady(function() {
 10    //構(gòu)造store
 11    var store = new Ext.data.JsonStore({
 12        root: 'topics',
 13        totalProperty: 'totalCount',
 14        idProperty: 'threadid',
 15        remoteSort: true,
 16
 17        fields: [
 18            'title', 'forumtitle', 'forumid', 'author',
 19            { name: 'replycount', type: 'int' },
 20            { name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp' },
 21            'lastposter', 'excerpt'
 22        ],
 23
 24        // 因?yàn)榭缬颍允褂肧criptTagProxy，在同一個(gè)域里邊用HttpProxy
 25        proxy: new Ext.data.ScriptTagProxy({
 26            url: 'http:///forum/topics-browse-remote.php'
 27        })
 28    });
 29
 30    store.setDefaultSort("lastpost", "DESC");  //設(shè)置默認(rèn)的排序列和方向
 31
 32    //構(gòu)造帶分頁功能的工具欄
 33    var pagingToolbar = new Ext.PagingToolbar({
 34        pageSize: 25,
 35        store: store,
 36        displayInfo: true,
 37        displayMsg: '第{0}-第{1}條，一共{2}條',
 38        emptyMsg: "No topics to display",
 39        items: [
 40                '-', {
 41                    pressed: true,
 42                    enableToggle: true,
 43                    text: '預(yù)覽',
 44                    cls: 'x-btn-text-icon details',
 45                    toggleHandler: function(btn, pressed) {
 46                        var view = grid.getView();
 47                        view.showPreview = pressed;
 48                        view.refresh();
 49                    }
 50}]
 51    });
 52
 53    //構(gòu)造帶有分頁工具欄的grid
 54    var grid = new Ext.grid.GridPanel({
 55        renderTo:"grid",
 56        width: 700,
 57        height: 500,
 58        title: '帶分頁功能的grid',
 59        store: store,
 60        trackMouseOver: false,
 61        disableSelection: true,
 62        loadMask: true,
 63
 64        // grid的列
 65        columns: [{
 66            id: 'topic', 
 67            header: "主題",
 68            dataIndex: 'title',
 69            width: 420,
 70            renderer: renderTopic,
 71            sortable: true
 72        }, {
 73            header: "作者",
 74            dataIndex: 'author',
 75            width: 100,
 76            hidden: true,
 77            sortable: true
 78        }, {
 79            header: "回復(fù)數(shù)",
 80            dataIndex: 'replycount',
 81            width: 70,
 82            align: 'right',
 83            sortable: true
 84        }, {
 85            id: 'last',
 86            header: "最后回復(fù)",
 87            dataIndex: 'lastpost',
 88            width: 150,
 89            renderer: renderLast,
 90            sortable: true
 91}],
 92
 93            // 定制用戶界面
 94            viewConfig: {
 95                forceFit: true,
 96                enableRowBody: true,
 97                showPreview: true,
 98                getRowClass: function(record, rowIndex, p, store) {
 99                    if (this.showPreview) {
100                        p.body = '<p>' + record.data.excerpt + '</p>';
101                        return 'x-grid3-row-expanded';
102                    }
103                    return 'x-grid3-row-collapsed';
104                }
105            },
106            
107            //在頂部的分頁工具欄
108            //tbar: pagingToolbar,
109            
110            // 在底部的分頁工具欄
111            bbar: pagingToolbar
112        });
113
114        // 加載數(shù)據(jù)
115        store.load({ params: { start: 0, limit: 25} });
116
117        // 主題列的renderer函數(shù)
118        function renderTopic(value, p, record) {
119            return String.format(
120                '<b><a href="http:///forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http:///forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
121                value, record.data.forumtitle, record.id, record.data.forumid);
122        }
123        //最后回復(fù)列的renderer函數(shù)
124        function renderLast(value, p, r) {
125            return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
126        }
127    })

運(yùn)行下看看效果，我們可以看到在獲取數(shù)據(jù)的時(shí)候，頁面被動畫遮蓋住，如圖：

當(dāng)數(shù)據(jù)加載完成，我們看到數(shù)據(jù)在grid中分頁顯示，并且按照最后發(fā)表列降序排列，其中作者列被隱藏：

    當(dāng)點(diǎn)擊列名進(jìn)行排序時(shí)，會從服務(wù)器上重新加載新的數(shù)據(jù)，點(diǎn)擊向右的箭頭，可以翻頁，還可以點(diǎn)點(diǎn)“預(yù)覽”按鈕看看效果。雖然這次的代碼相對最簡單的grid多了不少，但效果也cool了不少。我們從頭開始把代碼理一下吧：
    第8行使用了圖片占位符，它指向的圖片是一張空圖片。在extjs的庫文件中，根據(jù)需要會把這個(gè)圖片占位符替換成另一張圖片，在我們的例子中，如果去掉這一行，影響不會太大，只是標(biāo)題欄中“最后回復(fù)”旁邊向下的小箭頭會不見了。我們還是養(yǎng)成把這一行寫上的習(xí)慣吧。
    11-28行構(gòu)造了一個(gè)Store類的對象，這個(gè)沒什么好說的了。
    第30行設(shè)置lastpost列為默認(rèn)排序的列，并且是按降序排列，注意“DESC"必須是大寫，升序是“ASC”。
    33-51行構(gòu)造帶分頁的工具欄，前邊都已經(jīng)說過了。
    54-112行構(gòu)造帶有分頁功能的grid。
        其中第60行指示鼠標(biāo)在行上懸浮時(shí)行不會高亮顯示。
        61行指示用戶不能對grid進(jìn)行選擇。
        62行指示在加載數(shù)據(jù)的時(shí)候遮蓋住頁面，我們可以在截圖上看到效果，不過還是推薦自己運(yùn)行看下效果，畢竟這里顯示的是動畫。當(dāng)數(shù)據(jù)加載完畢之后遮蓋效果消失。
        94-105行設(shè)置用戶界面，我們看看每個(gè)參數(shù)的意義：
            forceFit：是否強(qiáng)制列調(diào)整寬度使得不出現(xiàn)水平滾動條，默認(rèn)是false。
            enableRowBody：為true的時(shí)候允許每行增加一個(gè)tr元素用來擴(kuò)展數(shù)據(jù)行。
            showPreview：自定義的bool類型的屬性，用來在代碼中控制是否顯示預(yù)覽。
            getRowClass：這是一個(gè)方法，用來改寫行的css樣式，它有四個(gè)參數(shù)，第一個(gè)是代表該行數(shù)據(jù)的Record對象，第二個(gè)是行的索引，第三個(gè)就是enableRowBody設(shè)置true時(shí)傳遞進(jìn)來的
參數(shù)，可以通過該參數(shù)的body屬性擴(kuò)展行數(shù)據(jù)。該方法應(yīng)當(dāng)返回一個(gè)css類名。我們的例子中，根據(jù)showPreview的值來動態(tài)顯示文章的摘要信息。
        111行將分頁工具欄顯示在grid底部，如果想顯示在頂部可以用tbar來代替bbar。
        115行向服務(wù)器發(fā)出請求獲取數(shù)據(jù)，extjs會以post方式將params中的參數(shù)發(fā)送給服務(wù)器，其中start指明從地幾條數(shù)據(jù)開始，limit則表示每頁顯示多少數(shù)據(jù)。
    118到126是兩個(gè)renderer函數(shù)，在上一個(gè)系列中已經(jīng)解釋過用法了。
    最后要指出的是，分頁的功能其實(shí)還是在服務(wù)器端完成的。當(dāng)在客戶端進(jìn)行翻頁的時(shí)候，會和115行一樣提交參數(shù)，我們需要在服務(wù)器端根據(jù)傳遞過來的star和limit的值來計(jì)算出應(yīng)當(dāng)返回的數(shù)據(jù)并且按照正確的格式來發(fā)送給客戶端。至于服務(wù)器端如何獲得客戶端傳遞過來的參數(shù)和如何發(fā)送數(shù)據(jù)給客戶端，可參閱本系列的第一節(jié)。

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：魏正欽的圖書館 > 《EXT》

舉報(bào)/認(rèn)領(lǐng)