基于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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
node.js 动态执行脚本
Jun 02 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python selenium操作cookie的实现
2020/03/18 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
error和exception有什么区别
2012/10/02 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
教师远程培训感言
2014/03/06 职场文书
剪彩仪式主持词
2014/03/19 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
优秀班主任材料
2014/12/16 职场文书