jquery 生撸树形树状结构Tree 树形控件

最新推荐文章于 2023-12-28 10:10:47 发布

小栀﹋»

最新推荐文章于 2023-12-28 10:10:47 发布

阅读量333

点赞数

分类专栏：插件树形文章标签： jquery js html

本文链接：https://blog.csdn.net/weixin_43398352/article/details/118092709

版权

插件同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

树形

1 篇文章 0 订阅

订阅专栏

jquery 生撸树形树状结构Tree 树形控件

jquery 生撸树形树状结构Tree 树形控件

jquery 生撸树形树状结构Tree 树形控件

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tree {
				border: solid red 1px;
				width: 100px;
				margin-left: 20px;
				cursor: pointer;
				position: relative;
			    padding-left: 20px;
			}

			.treeSon {
                 border: solid blue 1px;
				display: none;
			}
			.triangle{
				position: absolute;
				top: 7px;
				left: 5px;
				width: 5px;
				height: 5px;
				border: solid red 1px;
				border-top: transparent;
				border-left: transparent;
				transform: rotate(-45deg);
				transition: .5s;
			}
			.triangleActive{
				transform: rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div id="main">

		</div>

		<script type="text/javascript" src="new_file.js"></script>
		<script type="text/javascript">
			var data = [{
					name: "一级",
					id: "tree1",
					son: []
				},
				{
					name: "二级",
					id: "tree2",
					son: [{
						name: "二级-1",
						id: "tree2-1",
						son: [{
							name: "二级-1-1",
							id: "tree2-1-1",
							son: []
						}, {
							name: "二级-1-2",
							id: "tree2-1-2",
							son: []
						}]
					}, {
						name: "二级-2",
						id: "tree2-2",
						son: []
					}]
				}, {
					name: "三级",
					id: "tree3",
					son: [{
						name: "二级-2",
						id: "tree2-2",
						son: []
					}]
				},
			]
			function tree(id, data) {
				var dom = ''
				if (data.length > 0) {
					for (var i = 0; i < data.length; i++) {
						dom += '<div class="tree" >'
						dom += data[i].name
						if (data[i].son.length > 0) {
							dom += '<div class="treeSon" id="' + data[i].id + '"> </div>'
							dom+='<div class="triangle"></div>'
						}
						dom += '</div>'
					}
					$('#' + id).html(dom)
				}
			}
			tree('main', data)
			function digui(data) {
				for (var i = 0; i < data.length; i++) {
					tree(data[i].id, data[i].son)
					if (data[i].son.length > 0) {
						digui(data[i].son)
					}
				}
			}
			digui(data)
			$(".tree").click(function() { 
				if ($(this).children('.treeSon').css("display") == "none") {
					$(this).children('.treeSon').show()
					$(this).children('.triangle').addClass("triangleActive")
				} else {
					$(this).children('.treeSon').hide()
					$(this).children('.triangle').removeClass("triangleActive")
				}
			})
			$(".treeSon").click(function(event) {
				event.stopPropagation(); 
			})
		</script>
	</body>
</html>

好用的批爆

小栀﹋»

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 生撸树形树状结构Tree 树形控件

jquery 生撸树形树状结构Tree 树形控件jquery 生撸树形树状结构Tree 树形控件jquery 生撸树形树状结构Tree 树形控件直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .tree { border: solid re
复制链接

扫一扫