关于设备树运用递归的方式

最新推荐文章于 2023-05-21 22:13:47 发布

前进的探索者

最新推荐文章于 2023-05-21 22:13:47 发布

阅读量147

点赞数

分类专栏： JavaScript es6 文章标签： javascript elementui

本文链接：https://blog.csdn.net/b0303/article/details/124959950

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

es6

7 篇文章 0 订阅

订阅专栏

设备树在不知道多少子节点的时候运用递归是最好的办法，有时不知道怎么写设备树。

使用代码例子：

html代码部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>递归</title>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <div class='lists'></div>

  </body>
</html>

js部分

function deviceTree(data){
    var str = "<ul>"
    for(var i = 0; i < data.length; i++){
        str += "<li>" + data[i].name + "</li>
        if(data[i].child){
            str += deviceTree(data[i].child)
        }
    }
    str += "</ul>"
}

document.querySelector(".list")t.innerHTML = deviceTree(data)

dom部分：

var data = [
	{
	  name:'IT互联网',
	  child:[
		{name:'编辑语言',child:[{name:'java'},{name:'c#/.net'},{name:'python'},
		{name:'前端开发',child:[{name:'jq'},{name:'vue'},{name:'react'}]}]},
		{name:'移动开发',child:[{name:'android开发'},{name:'IOS开发'}]},
		{name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'3D游戏'},{name:'2D游戏'}]}]}
	  ]
	},
	{
	  name:'设计创作',
	  child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
			{name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
			{name:'软件设计'}]
	},
	{
	  name:'升学考研',
	  child:[{name:'考研'},{name:'大学'},{name:'高中'},{name:'初中'}]
	},
	{
	  name:'职企考证',
	  child:[{name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
	}];

结果部分：