js 渲染树形结构

最新推荐文章于 2022-10-10 17:12:20 发布

Dreamy smile

最新推荐文章于 2022-10-10 17:12:20 发布

阅读量1.8k

点赞数 1

分类专栏：项目开发记录文章标签： javascript

本文链接：https://blog.csdn.net/qq_45735728/article/details/107279733

版权

项目开发记录专栏收录该内容

24 篇文章 2 订阅

订阅专栏

js渲染树形结构

1.数据格式,例：

[
	{
		"title":"第一章人人都想用",
		"child":[
			{
				"title":"1、云开发简介",
				"child":[
					{
						"title":"1.1.1 详情",
						"child":[
							{
								"title":"1.1.1.1 详情-1"
							}
						]
					}
				]
			},
			{"title":"2、云开发简介"}
		]
	},
	{
		"title":"第二章人人都会用",
		"child":[
			{"title":"1、申请与授权","child":[{"title":"1.1.1 功能："}]},
			{"title":"2、快速入门","child":[{"title":"1.1.1 功能："}]}
		]
	}
]

<div class="silder-nav">
	<ul class="nav-con"></ul>
</div>

//数据结构一样，利用递归去渲染
var strhtml = '';
function render1(res){
	for(var i=0,len=res.length;i<len;i++){
		var str = "";
		str = '<li><a href="javascript:;">'+res[i]['title']+'</a><ul class="app-sub-sidebar">';
		strhtml += str;
		if(res[i]['child']){
			render1(res[i]['child'])
		}
		strhtml += '</ul></li>'
	};
	$('.nav-con').html(strhtml);
};

完整demo

//html
<!DOCTYPE html>
<html lang="zh">
<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></title>
	<link rel="stylesheet" type="text/css" href="./css/tree.css"/>
</head>
<body>
	<div class="main">
		<div class="leftcontainer">
			<div class="search">
				<div class="input-box">
					<input type="text" name="" id="search" value=""  placeholder="请输入搜索关键字"/>
					<div class="clearcon" id="clear">
						<svg width="26" height="24">
							<circle cx="12" cy="12" r="11" fill="#ccc"></circle>
							<path stroke="white" stroke-width="2" d="M8.25,8.25,15.75,15.75"></path>
							<path stroke="white" stroke-width="2" d="M8.25,15.75,15.75,8.25"></path>
						</svg>
					</div>
				</div>
			</div>
			<h1 class="title-name">
				<a class="title-name-link" href="javascript:;">J2paas</a>
			</h1>
			<div class="silder-nav">
				<ul class="nav-con"></ul>
			</div>
		</div>
		<div class="left-btn" id="silder-button">
			<div class="btn-item">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
	$(function(){
		render();
		
		var left_show = true;
		$('#silder-button').on('click',function(){
			left_show = !left_show;
			if(left_show){
				$('.leftcontainer').show(200,"linear");
			}else{
				$('.leftcontainer').hide(200,"linear");
			}
		});
		
		$('#search').on('input onpropertychange',function(){
			if($('#search').val()){
				$('#clear').addClass('show')
			}
		});
		
		$('#clear').on('click',function(){
			$('#search').val('');
			$('#clear').removeClass('show')
		});
		
		var strhtml = '';
		function render1(res){
			for(var i=0,len=res.length;i<len;i++){
				var str = "";
				str = '<li><a href="javascript:;">'+res[i]['title']+'</a><ul class="app-sub-sidebar">';
				strhtml += str;
				console.log(strhtml)
				if(res[i]['child']){
					render1(res[i]['child'])
				}
				strhtml += '</ul></li>'
			};
			$('.nav-con').html(strhtml);
			$('.nav-con li').first().addClass('active');
			$('.nav-con li ul').hide();
		};
		$(document).on('click','li',function(e){
			var evt = e || window.event;
			evt.stopPropagation();
			$($(this).find('ul').get(0)).slideToggle(100,'linear');
			$('.nav-con li').removeClass('active');
			$(this).addClass('active');
		})
		
		function render(){
			$.ajax({
				url:'data.json',
				type:'GET',
				dataType: "json",
				jsonp: "callback",
				jsonpCallback:"showData",
				success:function(res){
					render1(res)
				}
			})
		}
	})
</script>
</html>

data.json

[
	{
		"title":"第一章人人都想用",
		"child":[
			{
				"title":"1、云开发简介",
				"child":[
					{
						"title":"1.1.1 详情",
						"child":[
							{
								"title":"1.1.1.1 详情-1"
							}
						]
					}
				]
			},
			{"title":"1、云开发简介"}
		]
	},
	{
		"title":"第二章人人都会用EP",
		"child":[
			{"title":"1、EP的申请与授权","child":[{"title":"1.1.1 功能："}]},
			{"title":"2、EP快速入门","child":[{"title":"1.1.1 功能："}]}
		]
	}
]

*{
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}
body,html{
	width: 100%;
	height: 100%;
	background: #fff;
}
.main{
	width: 100%;
	height: 100%;
	position: relative;
}
.main .leftcontainer{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 300px;
	overflow: auto;
	border-right: 1px solid rgba(0,0,0,.07);
}
.main .leftcontainer .search{
	margin-bottom: 20px;
	padding: 6px;
	border-bottom: 1px solid #eee;
}
.main .leftcontainer .search .input-box{
	display: flex;
	align-items: center;
}
.main .leftcontainer .search .input-box input{
	outline: none;
	border: none;
	width: 100%;
	padding: 0 7px;
	line-height: 36px;
	font-size: 14px;
	border: 1px solid transparent;
}
.main .leftcontainer .search .input-box input:focus{
	border: 1px solid #42B983;
	box-shadow: 0px 0px 15px #B0E2CB;
}
.main .leftcontainer .search .input-box .clearcon{
	width: 36px;
	text-align: right;
	display: none;
}
.main .leftcontainer .search .input-box .clearcon svg{
	transform: scale(0.5);
}
.main .leftcontainer .search .input-box .clearcon.show{
	display: block;
}
.main .leftcontainer .title-name{
	margin: 0 auto 1rem;
	font-size:1.35rem;
	font-weight: 300;
	text-align: center;
}
.main .leftcontainer .title-name .title-name-link{
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.main .left-btn{
	position: fixed;
	background-color: transparent;
	background-color: hsla(0,0%,100%,.8);
	border: 0;
	padding: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 284px;
	z-index: 30;
	cursor: pointer;
}
.main .left-btn:hover{
	opacity: 0.5;
	transition: opacity 0.3s; 
}
.main .left-btn span{
	background-color:#42b983;
	display: block;
	margin-bottom: 4px;
	width: 16px;
	height: 2px;
}

.main .leftcontainer .silder-nav{
	width: 100%;
	line-height: 2em;
	padding-bottom: 40px;
}
.main .leftcontainer .silder-nav ul{
	margin: 0 0 0 15px;
}
.main .leftcontainer .silder-nav .nav-con li{
	margin: 6px 0;
}
.main .leftcontainer .silder-nav .nav-con li a{
	width: 100%;
	height: 100%;
	display: block;
	color: #505d6b;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.main .leftcontainer .silder-nav .nav-con li a:hover{
	text-decoration: underline;
}
.main .leftcontainer .silder-nav .nav-con li.active>a{
	border-right: 2px solid;
	color: #42b983;
	font-weight: 600;
}

.main .leftcontainer .silder-nav .nav-con li .app-sub-sidebar li:before{
    content: "-";
    padding-right: 4px;
    float: left;
}

Dreamy smile

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
js 渲染树形结构

js渲染树形结构1.数据格式,例：[ { "title":"第一章人人都想用", "child":[ { "title":"1、云开发简介", "child":[ { "title":"1.1.1 详情", "child":[ { "title":"1.1.1.1 详情-1" } ] } ] }, {"title":"2、云开发简介"} ].
复制链接

扫一扫