jquery:bootstrap-treeview 的简单使用

版权声明:菜鸟的个人见解,请指导 https://blog.csdn.net/HUSHILIN001/article/details/81628865

顾名思义,是基于jquery以及bootstrap的一个树状结构图来着的,所以我们需要向下载三个文件

1.jquery,个人使用的是1.x的

2.bootstrap的css文件,个人使用的是3.X的

3.bootstrap-treeview的js文件,自己百度

代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/bootstrap.min.css" />

	<body>
		<div id="tree">

		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-treeview.min.js"></script>
	<script>
		let tree_data = [{
				text: "node_1",
				nodes: [{
					text: "node_1_2"
				}, {
					text: "text_node_1_3"
				}]
			},
			{
				text: "node_2",
				nodes: [{
					text: "node_2_3"
				}]
			}
		]
		$("#tree").treeview({
			data: tree_data,
			levels: 6,
			border: "none"
		});
		$("#tree").on("click", "li", function() {
			console.log(this);
		});
	</script>

</html>

难度也不大,这个只是个demo,就不多解释了,然后的话具体参数的话可以看看别的一些网站,比如:

https://www.npmjs.com/package/bootstrap-treeview

或者百度搜索下,一些人已经把中文版的翻译了出来,而且似乎得到了广泛的宣传?

猜你喜欢

转载自blog.csdn.net/HUSHILIN001/article/details/81628865
今日推荐