解决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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
详解jQuery中的事件
Dec 14 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 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
无线电广播的开始
2002/01/30 无线电
浅析php数据类型转换
2014/01/09 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
分享3个php获取日历的函数
2015/09/25 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现2048小游戏
2015/03/30 Python
详解Django中Request对象的相关用法
2015/07/17 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python3多线程操作简单示例
2018/05/22 Python
python实现俄罗斯方块
2018/06/26 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python进行特征提取的示例代码
2020/10/15 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
学习方法演讲稿
2014/05/10 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015年安全生产责任书
2015/01/30 职场文书
暑假安全保证书
2015/02/28 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers