變臉式應用 / 分頁列表框架（四）

分頁列表的接口適配

上面學習了易用強大的分頁列表，支持分頁的後端接口使用的是筋斗雲的規範，返回列表像這樣：

{
    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支持一個純數組，它將被當成列表的最後一頁處理，無法上拉加載，但仍支持下拉刷新。