基于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 相关文章推荐
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
vuejs如何配置less
Apr 25 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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绘图技术
2013/07/03 PHP
yii操作cookie实例简介
2014/07/09 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
jquery uaMatch源代码
2011/02/14 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
工地门卫岗位职责
2013/12/30 职场文书
幼儿园小班评语
2014/04/18 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
养牛场项目建议书
2014/05/13 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书