关于layui table返回的值的多级嵌套问题

最新推荐文章于 2023-03-03 09:03:01 发布

原创

最新推荐文章于 2023-03-03 09:03:01 发布 · 5.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #layui table #多级嵌套

在使用layui的table组件时，遇到服务器返回的多级嵌套数据无法直接解析的问题。通过分析table.js源码，发现其仅支持扁平化的数据结构。为了解决这个问题，可以编写一个searchData函数，将多级嵌套数据转换为可被table渲染的格式。在layui的ajax success回调中应用此函数，并修改response的countName和dataName属性，以匹配多级嵌套的字段路径，如'data/dataList/list'。这样就能成功处理并显示多级嵌套的数据了。

我在学习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”);