解决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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
详解JS预解析原理
Jun 16 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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自动给文章加关键词链接的函数代码
2012/11/29 PHP
php时间戳转换的示例
2014/03/31 PHP
destoon常用的安全设置概述
2014/06/21 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
js验证账户名是否重复
2020/05/26 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python连接数据库的方法
2017/10/19 Python
python 获取图片分辨率的方法
2019/01/08 Python
python3 求约数的实例
2019/12/05 Python
浅析Python __name__ 是什么
2020/07/07 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
自我鉴定200字
2013/10/28 职场文书
财务副总经理工作职责
2013/11/25 职场文书
党校学习思想汇报
2014/01/06 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
以下牛机,你有几个
2022/04/05 无线电