基于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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
jquery validation验证表单插件
Jan 07 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
微信小程序实现图片压缩功能
Jan 26 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
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript中 try catch用法
2015/08/16 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
python赋值操作方法分享
2013/03/23 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python可视化text()函数使用详解
2020/02/11 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
大学生未来职业生涯规划书
2014/02/15 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
中层干部考核评语
2015/01/04 职场文书
手机销售员岗位职责
2015/04/11 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
小学运动会通讯稿
2015/07/18 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers