js原生渲染递归组件

最新推荐文章于 2024-01-09 09:56:02 发布

yakunyang（2016）

最新推荐文章于 2024-01-09 09:56:02 发布

阅读量608

点赞数

本文链接：https://blog.csdn.net/qq_40774743/article/details/89713932

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var tree=[
{
id:1,
label:"1级目录1",
children:[
{
id:"1-1",
label:"1.1目录"
},
{
id:"1-2",
label:"1.2目录"
},
{
id:"1-3",
label:"1.3目录"
},
]
},
{
id:2,
label:"1级目录2",
},
{
id:3,
label:"1级目录3",
children:[
{
id:"3-1",
label:"3.1目录"
},
{
id:"3-2",
label:"3.2目录",
children:[
{
id:"3-2-1",
label:"3.2.1目录"
},
{
id:"3-2-2",
label:"3.2.2目录"
},
{
id:"3-2-3",
label:"3.2.3目录"
}
]
}
]
},
{
id:4,
label:"1级目录4",
children:[
{
id:"4-1",
label:"4.1目录"
},
{
id:"4-2",
label:"4.2目录",
children:[
{
id:"4-2-1",
label:"4.2.1目录"
}
]
}
]
},
{
id:5,
label:"1级目录5",
children:[
{
id:"5-1",
label:"5.1目录",
children:[
{
id:"5-1-1",
label:"5.1.1目录"
},
{
id:"5-1-2",
label:"5.1.2目录",

children:[
{
id:"5-1-2-1",
label:"5.1.2.1目录"
},
]
}
]
},
{
id:"5-2",
label:"5.2目录"
}
]
},
];
var render = function(tree) {
if (!tree) return null
var ul = document.createElement('ul');
for(var i = 0; i < tree.length;i++){
var li = document.createElement('li')
// 创建span标签
var span = document.createElement('span'); span.innerText = tree[i].label;
li.appendChild(span);
if(tree[i].children){
var sub = render(tree[i].children);
li.appendChild(sub);
}
ul.appendChild(li);
}
return ul
};
document.body.innerHTML = '';
document.body.appendChild(render(tree));

// 问题 2，递归查找改变数据结构渲染视图

// function changeID(idNumber,json){

// for(var i = 0 ;i<json.length;i++){

// let temp = json[i];

// temp.id == idNumber ?temp.name="yyk": changeID(idNumber,temp.child);

// }

// return json;

// }

// // 递归算法操作渲染侧边栏

// function menu(data){

// 　　var ul = "<ul>";

// 　　for(var i = 0; i < data.length; i++){

// let temp = JSON.stringify(data[i])

// 　　　　ul+="<li class='clickClass' my-data="+temp+"><a>"+data[i].name+"</a>";

// 　　　　if(data[i].child){ul+=menu(data[i].child);}

// 　　　　ul+="</li>";

// 　　};

// 　　ul+="</ul>";

// 　　return ul;

// }

// var menu1111 = menu(json);

// $("#menuTree").append(menu1111);

</script>

yakunyang（2016）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原生渲染递归组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫