解决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 相关文章推荐
jQuery基础框架浅入剖析
Dec 27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
js实现两点之间画线的方法
May 12 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
JavaScript中return用法示例
Nov 29 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
如何删除多级目录
2006/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python assert的用处示例详解
2019/04/01 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
会展中心部门工作职责
2013/11/27 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
继承权公证书
2014/04/09 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
开展读书活动总结
2014/06/30 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python