使用layui table组件时,我们会遇到自己后台返回的数据格式和layui table要求的数据结构不同的问题。比如默认的格式是
{
"code":"200",
"msg":"success",
"count":10
"data":{
}
}
而我们实际上后台返回的数据结构是这样的
{
"code": "200",
"message": "成功",
"data": {
"page": {
"index": 1,
"size": 10,
"totalItems": 2,
"items": [{
"creationDatetime": "2019-08-23T16:19:37",
"completeDatetime": "2019-08-23T16:19:37"
}, {
"creationDatetime": "2019-08-23T16:15:12",
"completeDatetime": "2019-08-23T16:15:09"
}
]
}
},
}
没法用,网上有资料说改源码, ,但这样有点麻烦,相信layui的作者也不希望咱们这么干,所以我觉得一定有接口可以修改json格式的,于是再看源码的时候发现parseData
//如果有数据解析的回调,则获得其返回的数据 if(typeof options.parseData === 'function'){ res = options.parseData(res) || res; }
可以看出作者确实留有格式结构转化入口,只要自己自定义回调函数即可;具体配置如下:
table.render({
elem: '#dataTable'
,toolbar: '#toolbarDemo'
,page:true
,parseData :parseDataFun //注意这行
,id: 'listReload'
,url:'http://xxxx.com/info'
,where:{phase_name:'canceled'}
,cellMinWidth: 80
,cols: [ [ ]]
});
//定义处理数据结构转化的适配器
var parseDataFun = function (res){
console.log("返回数据 : "+JSON.stringify(res));
return {
"code": res.code
, "message": res.message
, "data": res.data.page.items
, "count": res.data.page.total_items
};
};
这样就完美的解决了数据结构转化问题。