本文主要是介绍jstree使用教程，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
阿发原创，博客地址：http://blog.csdn.net/u012954072
本文介绍JQuery插件–JStree的使用，JStree用于生成树形目录。先贴一张简单的效果图并输出当前节点的名称
所需资源下载：http://download.csdn.net/detail/u012954072/9670907
JStree官网：https://www.jstree.com
官网的文档讲比较详细，如果能打开建议直接看官网的文档。 如果不能打开，可以参考下面的使用教程：
1.需要包含的资源
a. 需要jstress定义的样式
样式文件在dist/themes/default/style.min.css 中，所以html页面中需要添加代码
<link rel="stylesheet" href="../dist/themes/default/style.min.css" />
需要包含CDNJS的css文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
b. 需要使用jQuery1.9.0以上：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
c. 包含JStree的js文件：
<script src="dist/jstree.min.js"></script>
使用CDNJS的代码为：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
2.实现最简易的JStree例子
JStree需要使用一个div当做其容器并需要id属性用于生成JStree ：
<div id="jstree_div"> </div>
JStree的节点信息存储在<ul> <li> </li> </ul>中，需要多层的时嵌套多层`<ul><li> </li></ul>即可。
<ul><li>Root node 1<ul><li id="child_node_1">Child node 1</li><li>Child node 2</li></ul></li><li>Root node 2</li></ul> 在$(document).ready(function(){ }) 中使用JStree生成命令： $('#jstree').jst
这篇关于jstree使用教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
