用html+css+js实现一个无限级树形控件

2 years ago

source link: http://abcdxyzk.github.io/blog/2022/11/20/lang-html-tree/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

2022-11-20 19:16:00

http://t.zoukankan.com/rxbook-p-10975673.html

gg.html

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>树形菜单示例</title>

	<style type="text/css">
	ul>li {
		list-style: none;
	}

	/* 可展开*/
	.switch-open {
		margin-left:-12px;
		border:6px solid transparent;
		display:inline-block;
		height:0px;
		border-top-color: black;
	}

	/* 展开完毕*/
	.switch-close {
		margin-left:-12px;
		border:6px solid transparent;
		display:inline-block;
		height:0px;
		border-left-color: black;
		margin-bottom: 2px;

	}
	/* 改变CheckBox样式*/
	input[type='checkbox'] {
		height: 20px;

		-webkit-appearance:none;
		-moz-appearance: none;
		border: 1px solid #c9c9c9;
		border-radius: 3px;
		outline: none;
		color:white;
		text-align: center;
	}
	input[type='checkbox']:before {
		content: '√ ';
		color:transparent;
	}
	input[type=checkbox]:checked {
		background-color: #30add6;
	}
	input[type=checkbox]:checked:before {
		content: '√';
		color:white;
		font-weight: bold;
	}

	</style>
</head>

<body>

<div class="warp">
	<ul id="container">
	</ul>
</div>

<script type="text/javascript">

	//结构
	var json = {
		'0-0': {
			'0-0-0': {},
			'0-0-1': {
				'0-0-1-0': {},
				'0-0-1-1': {},
				'0-0-1-2': {}
			},
			'0-0-2': {}
		},
		'0-1': {
			'0-1-0': {},
			'0-1-1': {}
		},
		'0-2': {}
	};

	//这里生成DOM
	function generate(json, par)
	{
		for (var attr in json) {
			var ele = document.createElement('li');
			if (json[attr].length > 0) {
				ele.innerHTML = ' <input type="checkbox"></input>'+attr;
			} else {
				ele.innerHTML = '<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
				var nextpar = document.createElement('ul');
				ele.appendChild(nextpar);
				generate(json[attr], nextpar);
			}
			par.appendChild(ele);
		}
	}

	generate(json, document.getElementById('container'));


	//处理展开和收起
	function toggle(eve)
	{
		var par = eve.parentNode.nextElementSibling;
		if (par.style.display == 'none') {
			par.style.display = 'block';
			eve.className = 'switch-open';
		} else {
			par.style.display = 'none';
			eve.className = 'switch-close';
		}
	}

	//处理全部勾选和全部不选
	function checkChange(eve)
	{
		var oul = eve.parentNode.nextElementSibling;
		if (eve.checked) {
			for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
				oul.querySelectorAll('input')[i].checked = true;
			}
		} else {
			for (var i = 0; i < oul.querySelectorAll('input').length; i++) {
				oul.querySelectorAll('input')[i].checked = false;
			}
		}
	}

</script>

</body>
</html>

Recommend