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