Layuilayui tree数据格式转换
Posted 厦门德仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layuilayui tree数据格式转换相关的知识，希望对你有一定的参考价值。
这里写自定义目录标题
在获取数据构建tree中，数据一般为两种形式：
1、json格式，以id pid表征父子节点关系
var data1=[
id:'aa',pId:'0',text:'root1',
id:'bb',pId:'aa',text:'left1',
id:'cc',pId:'aa',text:'left2',
id:'dd',pId:'0',text:'root2',
id:'ee',pId:'dd',text:'left3',
];
2、树状格式，以children表征子节点关系
var data2= [
title: '早餐'
,id: 1
,children: [title: '油条' ,id: 5 ,
title: '包子',id: 6,
title: '豆浆',id: 7
],
];
layui支持第二种数据格式，故需要将json格式（id pId表示）转换为具有children的树状层次数据格式
主要思想：循环遍历json数据格式，根据pId找寻子节点，递归拼凑出数据结构。
根据data1生成tree效果如下：
源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1" class='demo-tree'></div>
</body>
</html>
<script>
var data=[ //原始数据
id:'aa',pId:'0',text:'root1',
id:'bb',pId:'aa',text:'left1',
id:'cc',pId:'aa',text:'left2',
id:'dd',pId:'0',text:'root2',
id:'ee',pId:'dd',text:'left3',
];
console.log(data);
var formatdata=[];
for(var i in data) // pId为0时表示为根节点
if(data[i].pId=='0')
var tempObject=;
tempObject.title=data[i].text;
tempObject.id=data[i].id;
tempObject.children=getChildren(tempObject.id);
formatdata.push(tempObject);
function getChildren(id) //递归体 即对每条data逐条递归找children
var tempArray=[];
for(var i in data)
if(data[i].pId==id)
var tempChild=;
tempChild.title=data[i].text;
tempChild.id=data[i].id;
if(selectChildren(data[i].id)) //若存在子节点，继续递归；否则为叶节点，停止递归
tempChild.children=getChildren(data[i].id);
tempArray.push(tempChild);
return tempArray;
function selectChildren(id) // 是否存在子节点
for(var i in data)
if(data[i].pId==id)
return true;
return false;
console.log(formatdata);
layui.use('tree', function() //layui tree写法
var tree = layui.tree;
//渲染
var inst1 = tree.render(
elem: '#test1' //绑定元素
,data:formatdata
,edit: ['add', 'update', 'del'] //操作节点的图标
,click: function(obj)
layer.msg(JSON.stringify(obj.data));
);
);
</script>
————————————————
版权声明：本文为CSDN博主「厌世鼓手」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36300333/article/details/103153121
以上是关于Layuilayui tree数据格式转换的主要内容，如果未能解决你的问题，请参考以下文章