bootstrap-treeview

1.资料

Bootstrap
bootstrap-treeview
- 官方英文
- 中文API：基于bootstrap的jQuery多级列表树插件
- 说明：需要引用bootstrap.js的版本为v3，不能用v4的
- 参考：Bootstrap自定义图标
- 图标下载：Customize 字形图标（Glyphicons） - 菜鸟教程

2.代码-演示

bootstrap-treeview的演示代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>treeview</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"> </script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
	<link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">

</head>
<body>
	<div id="tree"></div>
	<script type="text/javascript">
		function getTree() {
    	var data = [
		  {
		    text:"Parent 1",
		    nodes: [
		      {
		        text:"Child 1",
		        nodes: [
		          {
		            text:"Grandchild 1"
		          },
		          {
		            text:"Grandchild 2"
		          }
		        ]
		      },
		      {
		        text:"Child 2"
		      }
		    ]
		  },
		  {
		    text:"Parent 2"
		  },
		  {
		    text:"Parent 3"
		  },
		  {
		    text:"Parent 4"
		  },
		  {
		    text:"Parent 5"
		  }
		];
	   		return data;
		}
	$('#tree').treeview({data: getTree()});
	</script>
</body>
</html>

3.代码-自定义图标

在样式表里自定义图标路径
参考：Bootstrap自定义图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tv4</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
    <link href="bstv.css" rel="stylesheet">

</head>

<body>
    <div id="tree"></div>
    <div>
    	<button>
    		<i class="glyphicon glyphicon-menu-right"></i>
    		<span>新增</span>
    	</button>
    	<button id="file">
    		<i class="myicon myicon-accept"></i>
    		<span>文件</span>
    	</button>
    </div>
    <script type="text/javascript">
        var data = [{
            text: "Parent 1",
            icon: "myicon myicon-accept",
            nodes: [{
                text: "Child 1",
                nodes: [{
                    text: "Grandchild 1"
                }, {
                    text: "Grandchild 2"
                }]
            }, {
                text: "Child 2"
            }]
        }, {
            text: "Parent 2"
        }, {
            text: "Parent 3"
        }, {
            text: "Parent 4"
        }, {
            text: "Parent 5"
        }];

        function getTree() {
            return data;
        }
        $('#tree').treeview({
            data: getTree()
        });
    </script>
</body>

</html>

bstv.css的代码

.myicon {
	background-image: url("bstv.ico");
	background-repeat: no-repeat;
	display: inline-block;
}
.myicon-accept {
	width: 12px;
	height: 12px;
	background-position: -5px,-5px;
}

4.代码-不同字体大小

思路：自己写js代码，遍历标签li，根据获得空格数的逻辑判断属于几级，设定相应大小
分析：后来发现HTML中是<span class="indent"></span>代表空格
实现：$("this")拿到节点<li>，判断<li>的字节含有几个class="indent"的<span>，判断属于几级，相应改变字体大小
缺陷：听说$("*")很耗费资源

    <script type="text/javascript">
    	function setFontSize() {
		    $("li").each(function(){
		    	let n = $(this).children("span[class='indent']").length;
		    	if (n == 0) {
		    		$(this).attr('style', 'font-size: 20px');
		    	}else if (n == 1) {
		    		$(this).attr('style', 'font-size: 16px');
		    	}else if (n == 2) {
		    		$(this).attr('style', 'font-size: 12px');
		    	}
			});
		}
		setFontSize();
		$("*").click(function(){
			setFontSize();
		});
    </script>

1.资料

2.代码-演示

3.代码-自定义图标

4.代码-不同字体大小

猜你喜欢