2018/2/2 20:00:13当前位置推荐好文程序员浏览文章

GridManager在处理数据时,需要使用规定的数据格式。而在实际场景中,或多或少存在一些格式差异,在这里将对这些差异的处理方式进行说明。

1. 仅返回字段名不符

如: 一级数据中的 data 与 totals, 可以使用 dataKey 和 totalsKey 进行调整。

后端返回数据为:

{    "list":[  // GridManager 期望返回的是 data, 而这里返回了 list        {            "name": "baukh",            "age": "28",            "createDate": "2015-03-12",            "info": "野生前端程序",            "operation": "修改"        },        {            "name": "baukh",            "age": "28",            "createDate": "2015-03-12",            "info": "野生前端程序",            "operation": "修改"        }    ],    "number": 8  // GridManager 期望返回的是 totals, 而这里返回了 number}

解决方式:

document.querySelector(table).GM(init, {    supportAjaxPage: true, // 启用分页    dataKey: list, // 指定数组 key 为 list    totalsKey: number, // 指定总数 key 为 number    requestHandler: function(request){        request.newParams = 这个参数是通过 requestHandler 函数新增的;    },    // 其它配置项...});
2. 后端返回数据与 前端期望返回的数据出入较大

如数组中的 createDate, 期望返回的是时间戳, 而返回的为字符串。 这时可以通过初始化配置 responseHandler 对数据进行重组。

后端返回数据为:

{    "list":[  // GridManager 期望返回的是 data, 而这里返回了 list        {            "name": "baukh",            "age": "28",            "createDate": "2015-03-12", // 返回的是字符串            "info": "野生前端程序",            "operation": "修改"        },        {            "name": "baukh",            "age": "28",            "createDate": "2015-03-12", // 返回的是字符串            "info": "野生前端程序",            "operation": "修改"        }    ],    "number": 8  // GridManager 期望返回的是 totals, 而这里返回了 number}

前端期望返回的是:

{    "data":[        {            "name": "baukh",            "age": "28",            "createDate": 1426118400000,  // 期望返回时间戳            "info": "野生前端程序",            "operation": "修改"        },        {            "name": "baukh",            "age": "28",            "createDate": 1426118400000, // 期望返回时间戳            "info": "野生前端程序",            "operation": "修改"        }    ],    "totals": 8}

解决方式:

document.querySelector(table).GM(init, {    supportAjaxPage: true, // 启用分页    dataKey: list, // 指定数组 key 为 list    totalsKey: number, // 指定总数 key 为 number    responseHandler: function(response){        // 将返回数据中的 createDate 修改为 时间戳        response.list = response.data.map(function(item){            item.createDate = new Date(item.createDate).getTime();            return item;        });    },    // 其它配置项...});
作者:@拭目以待(表格管理开源项目GridManager)

Want to know How To Make Love?I know HTML!

网友评论