基于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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
JavaScript修改css样式style
Apr 15 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JS Attribute属性操作详解
May 19 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
JS document对象简单用法完整示例
Jan 14 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 上传功能实例代码
2010/04/13 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP attributes()函数讲解
2019/02/03 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python读取实时数据流示例
2019/12/02 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
Python如何安装第三方模块
2020/05/28 Python
通过实例解析python and和or使用方法
2020/11/14 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
数控技术专业推荐信
2013/11/01 职场文书
委托证明的格式
2014/01/10 职场文书
商业活动邀请函
2014/02/04 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
英雄儿女观后感
2015/06/09 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技