基于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的最佳方法分享
Oct 21 Javascript
Javascript玩转继承(二)
May 08 Javascript
JS清除选择内容的方法
Jan 29 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
javascript实现简单页面倒计时
Mar 02 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原创论坛
2006/10/09 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
jQuery 全选效果实现代码
2009/03/23 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
javascript实现连续赋值
2015/08/10 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Python实现二叉堆
2016/02/03 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python实现定时发送qq消息
2019/01/18 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python加载自定义词典实例
2019/12/06 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
如何利用Python 进行边缘检测
2020/10/14 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
如何安装ruby on rails
2014/02/09 面试题
医院护士见习期自我鉴定
2014/09/15 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
入党自荐书范文
2015/03/05 职场文书
SpringBoot Http远程调用的方法
2022/08/14 Java/Android