基于layui table返回的值的多级嵌套的解决方法


Posted in Javascript onSeptember 19, 2019

我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.js源码中 它渲染数据是用了

data = res[options.response.dataName] || []

这个意味着它源码不支持嵌套数据

举个例子把 比如服务器端返回的数据中data>dataList>list

把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的数据

function searchData(response,res,name){
var data = new Object();
var arr = response[name].split("/"),
pre = arr[0];
data[pre] = res[pre];
for(var i = 1;i<arr.length;i++){
if(arr[i]){
var next = arr[i];
data[pre] = data[pre][next];
}
}

然后再table.js中找到ajax下的success中 第一行写

try{
countNameInfo = response.countName;
dataNameInfo = response.dataName;
//console.log(options.response)
res.newcountName = searchData(response,res,“countName”);
res.newdataName = searchData(response,res,“dataName”);
}catch(err){
console.log(err.message);
}

newcountName,newdataName在pullData中自己定义 之后让

response.countName = countNameInfo;
response.dataName = dataNameInfo;

最后在你table.render中的response中写

countName: ‘你多级嵌套的节点值' //数据总数的字段名称,默认:count
,dataName: ‘你多级嵌套的节点值' //数据列表的字段名称,默认:data

以上面我写的例子为例:‘data/dataList/list'

OK 至此你就可以处理多级嵌套的返回值了,如有不对的地方,还望多多包含!!!

这篇基于layui table返回的值的多级嵌套的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jQuery功能函数详解
Feb 01 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 #Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 #Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 #Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 #Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 #Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 #Javascript
You might like
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
短信提示使用 特效
2007/01/19 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python实现飞机大战游戏
2020/10/26 Python
python实现一个猜拳游戏
2020/04/05 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
黄金搭档广告词
2014/03/21 职场文书