jstree的使用

所需资源下载：jstree资源下载

JStree官网：jstree官网

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配置项

core.data

构建一个jstree

节点事件监听

监听事件的使用方法： 

上面的示例中已经使用JStree监听的事件–节点变化事件：changed.jstree。 

JStree可以监听的事件：jstree监听事件链接

监听事件的使用

获取到现有的实例

在页面任何地方获取选中的节点的jquery代码如下：

jstree点击节点事件

事件名称 

activate_node.jstree

使用方法

jstree根据id获取节点

方法名称

get_node

使用方法

jstree取消所有节点的选中

deselect_all

jstree选中指定节点

select_node