分頁列表框架(四)

天笑發表於2017-02-16

分頁列表的介面適配

上面學習了易用強大的分頁列表,支援分頁的後端介面使用的是筋斗雲的規範,返回列表像這樣:

{
    list: [
        {field1: "val1", field2: "val2"},
        {field1: "val3", field2: "val4"},
    ],
    nextkey: 2
}

上面用list欄位返回列表。另外還支援一種等價的壓縮表格式,使用h(表頭)/d(資料)陣列,如下:

{
    h: [ "field1","field2" ],
    d: [ ["val1","val2"], ["val3","val4"], ... ]
    nextkey: 2
}

返回列表如果沒到最後一頁,需要返回nextkey欄位,用於請求下一頁時的"_pagekey"引數。 請求通過"_pagesz"引數指定頁大小,通過"_pagekey"引數取下一頁。

如果你遇到的後端分頁列表介面設計不符合上述規則,則需要通過介面適配來使用分頁列表框架,即讓返回資料符合上面的規範,一般是設定好list/nextkey欄位,或者是h/d/nextkey欄位。

[任務]

後端分頁機制為(jquery-easyui datagrid分頁機制):

  • 請求時通過引數page, rows分別表示頁碼,頁大小,如 page=1&rows=20
  • 返回資料通過欄位total表示總數, rows表示列表資料,如 { total: 83, rows: [ {...}, ... ] }

要求通過介面適配,不變動前面列表頁面orders2的程式碼,讓該頁面仍能正常工作。

我們先來製作一下模擬資料,在mockdata.js中,修改"Ordr.query"部分:

    "Ordr.query": function (param, postParam) {
        var arr = orders;
        var ret = {total: arr.length, rows: []};
        var pagesz = param.rows || 20;
        var pagekey = param.page || 1;

        for (var n=0, i=(pagekey-1)*pagesz; n<pagesz && i<arr.length; ++n, ++i) {
            ret.rows.push(arr[arr.length-i-1]);
        }
        return [0, ret];
    },

這樣就可以模擬了,試試

callSvrSync("Ordr.query");
callSvrSync("Ordr.query", {page: 2, rows: 10});

注意:上面返回資料的基本格式仍然是筋斗雲框架的格式,即成功返回[0, 資料],失敗返回[錯誤碼,錯誤資訊]。 如果不是這樣的格式,請閱讀前面介紹過的“介面適配”章節去配置MUI.callSvrExt

在app.js中設定為initPageList設定預設選項:

$.extend(initPageList.options, {
    pageszName: "rows",
    pagekeyName: "page",
    // 設定 data.list, data.nextkey (如果是最後一頁則不要設定); 注意pagekey可以為空
    onGetData: function (data, pagesz, pagekey) {
        data.list = data.rows;
        if (pagekey == null)
            pagekey = 1;
        if (data.total >  pagesz * pagekey)
            data.nextkey = pagekey + 1;
    }
});

在onGetData回撥中,設定data.list及data.nextkey屬性(如果是最後一頁則不要設定)。

注意:app.js與index.js的區別是,前者適用於專案下的所有應用,而index.js只是index.html這個H5應用的主程式。

配置後,專案下所有列表都將應用這個適配規則。如果只是個別列表適配需要調整,可以在呼叫initPageList時指定這些選項,如:

    var listItf = initPageList(jpage, {
        ...

        pageszName: 'rows',
        pagekeyName: 'page',
        onGetData: ...
    });

考慮這樣一種情況,後端就返回一個列表如[ {...}, {...} ],不支援分頁,那麼是否可以使用分頁列表?

答案是仍然可用,initPageList支援一個純陣列,它將被當成列表的最後一頁處理,無法上拉載入,但仍支援下拉重新整理。

相關文章