分页列表的接口适配

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

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