layui框架,前台table接收和layui规定不同的json数据并解析展示
1,table组件默认规定的数据格式

2,完整的写法

parseData和response两个参数一定要同时使用,不然不起效果。其实如果完全按照layui规定的格式来接收json数据完全可以避免这种问题,但是因为是接口嘛,毕竟别人不一定会用这个框架。在这里顺便贴出来layui直接可以接收的数据格式,再贴出来自定义的数据格式。

3,附上源码,方便老铁们复制粘贴用
//获取userList数据列表
table.render({
elem: '#userList'
,url: ${ctx}+'/user/query?token='+token //数据接口
,page: true //开启分页
,parseData: function(res){
return{
"code": res.result_code,//状态码,200或500等等
"msg": res.msg, //解析提示文本,这个后台就定义了一个'result_msg',既可以当消息提示用,也可以当数据集合用,
//表格是要接收数据用的,所以我就放在了data:后了,但是这里必须要写出来,不然还接收不到数据,就按文档上的写'res.msg'
"count": res.total, //总条数
"data": res.result_msg //数据列表
}
}
,response: {
statusName: 'result_code' //规定数据状态的字段名称,默认:code,返回我们自定义的数据状态key值,我这里后台定的是result_code
,statusCode: 200 //规定成功的状态码,layui默认:0,返回我们自定义的成功的数据状态value值,我这里后台定的是200
//,msgName: 'msg' //规定状态信息的字段名称,默认:msg,返回我们自定义的消息key值,我这里后台没定义
,countName: 'total' //规定数据总数的字段名称,默认:count,返回我们自定义的数据总条数key值,我这里后台定义的是total
,dataName: 'result_msg' //规定数据列表的字段名称,默认:data,返回我们自定义的json数据集,我这里后台定义的是result_msg
}
,cols: [[ //表头
{type : 'checkbox',fixed: 'left'}
,{type: 'numbers',title: '序号',width:100}
,{field: 'userName', title: '用户名称', sort: true}
,{field: 'age', title: '年龄', sort: true}
,{field: 'birth', title: '生日', sort: true}
,{field: 'phone', title: '手机', sort: true}
,{field: '', title: '操作', toolbar:'#barDemo'}
]]
});
版权声明:本文为IShallTasteGraceLife原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。