解决layui的table插件无法多层级获取json数据的问题


Posted in Javascript onSeptember 19, 2019

对于layui的table插件无法多层级获取json数据的解决方法,版本:2.2.6

根据官方文档 你接口返回的数据格式,遵循 response 对应的字段名称。

默认的格式为如下:

{ 
code: 0,//数据状态的字段名称,默认:code 
msg: “”, //状态信息的字段名称,默认:msg 
count: 1000,//数据总数的字段名称,默认:count 
data: []//数据列表的字段名称,默认:data 
}

那么当后台返回的数据为如下格式时:就无法直接获取到“list”和“total”了

{“status”:0, 
“msg”:”超级管理员查询成功”, 
“data”:{ 
“pageNum”:1, 
“pageSize”:10, 
“size”:2, 
“total”:2, 
“list”:[ 
{“phone”:”13713596448”,”username”:”旺”,”passwd”:”1”,”usegrant”:”0”,”leader”:”“,”chancecount”:”1000”,”createtime”:1528369281000,”updatetime”:1528369285000,”usecount”:”0”}, 
{“phone”:”18038060732”,”username”:”彬”,”passwd”:”1”,”usegrant”:”0”,”leader”:”“,”chancecount”:”100”,”createtime”:1528422270000,”updatetime”:1528422270000,”usecount”:”0”} 
]

解决方案:

1. 最直接的方法是叫后台人员直接改为官方文档的方式

2. 先通过ajax获取到数据,然后通过data属性进行赋值,当涉及到分页时,代码会比较冗余;

3.通过url属性赋值,则在table源文件中 M.prototype.page方法下添加以下代码:

var multilevel=function (data,list) {
  var d = data;
  for (var i in list){
    d =d[list[i]];
  }
  return d
};
var renderResponse=function (data) {
 var statusNameLsit=r.statusName.split("."),
   msgNameLsit=r.msgName.split("."),
   countNameLsit=r.countName.split("."),
   dataNameLsit=r.dataName.split(".");
 var dataTemp={};
 dataTemp[r.statusName]=multilevel(data,statusNameLsit);
 dataTemp[r.msgName]=multilevel(data,msgNameLsit);
 dataTemp[r.countName]=multilevel(data,countNameLsit);
 dataTemp[r.dataName]=multilevel(data,dataNameLsit);

 return dataTemp;
};

在M.prototype.page中ajax请求成功函数success里添加以下代码:

typeof renderResponse === 'function' && (t = renderResponse(t));

使用时:在response属性中用.来分割层级,代码如下:

response: {
  statusName: 'status' //数据状态的字段名称,默认:code
  ,statusCode: 0 //成功的状态码,默认:0
  ,msgName: 'msg' //状态信息的字段名称,默认:msg
  ,countName: 'data.total' //数据总数的字段名称,默认:count
  ,dataName: 'data.list' //数据列表的字段名称,默认:data
}

以上这篇解决layui的table插件无法多层级获取json数据的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
JS实现滚动条触底加载更多
Sep 19 #Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
layui对工具条进行选择性的显示方法
Sep 19 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
PHP面向对象程序设计之接口用法
2014/08/20 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
对python中的argv和argc使用详解
2018/12/15 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
中介业务员岗位职责
2014/04/09 职场文书
如何用python插入独创性声明
2021/03/31 Python
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js