变脸式应用 / 分页列表框架（四）

分页列表的接口适配

上面学习了易用强大的分页列表，支持分页的后端接口使用的是筋斗云的规范，返回列表像这样：

{    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支持一个纯数组，它将被当成列表的最后一页处理，无法上拉加载，但仍支持下拉刷新。