基于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中直接引用Microsoft的COM生成Word
Jan 20 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
javaScript产生随机数的用法小结
Apr 21 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
详解关于Vue单元测试的几个坑
Apr 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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
ajax php 实现写入数据库
2009/09/02 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
老生常谈angularjs中的$state.go
2017/04/24 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
python如何实现DES加密
2020/09/21 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
暑期实践思想汇报
2014/01/06 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python