需要引入的文件
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" href="../../css/jqTree.min.css">
<link rel="stylesheet" href="../../css/style.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_295121_0n2yaiwwywwjnhfr.css">//这里自己引入的阿里图标库文件
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jstree.min.js"></script>
//使用HTML填充树
<div class="tree1">
<ul>
<li data-jstree='{"opened":true,"selected":true}'>Root
<ul>
<li data-jstree='{"disabled":true}'>Child1</li>
//引入阿里图标库的字体图标
<li data-jstree = '{"icon":"iconfont icon-shangpin"}'>
Child2
</li>
//引入网络图片
<li data-jstree='{"icon":"//jstree.com/tree.png"}'>
Child3
</li>
//引入bootstrap中的字体图标
<li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
Child4
</li>
/*
内部jstree将文本转换为链接,因此如果jstree中的标记中已经存在链接,则不介意。像Child5。
然而,单击链接不会将用户引导到新页面,要做到这一点 - 截取changed.jstree事件并相应地执行。
*/
<li ><a href="#">Child5</a></li>
//引入项目文件中的图片
<li data-jstree='{"icon":"../../imgs/Koala.jpg"}'>Child6</li>
</ul>
</li>
</ul>
</div>