解决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效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
Js经典案例的实例代码
May 10 Javascript
Vue常用指令详解分析
Aug 19 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
php使用百度天气接口示例
2014/04/22 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python连接mysql调用存储过程示例
2014/03/05 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python文字转语音的实例代码分析
2019/11/12 Python
Linux如何压缩可执行文件
2014/03/27 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
机关财务管理制度
2014/01/17 职场文书
2014年村官工作总结
2014/11/24 职场文书
学校计划生育责任书
2015/05/09 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis