jsTree是什么?

jsTree是什么?

jsTree 3.0.9 :jQuery tree plugin

jsTree是jQuery插件，提供交互的树控件。它是完全免费的，开源的在MIT许可下分发。jstree很容易扩展，可定制主题和可配置的，它支持HTML、JSON数据源和Ajax加载。

jsTree功能属性也是盒模型（内容框或边界框），可以作为AMD模块加载，并内置移动主题具备响应设计，可以很容易地定制。它使用jQuery的事件系统，因此在树中的各种事件绑定回调函数是简单的和容易的。

几个值得注意的特点：

• 拖放支持
• 键盘导航
• 在线编辑，创建和删除
• 三态复选框
• 模糊搜索
• 可定制的节点类型

所有现代浏览器都支持,以及IE8

概述

入门-一目了然的一切

1. 下载 jsTree

   所有你需要的文件在dist/ 文件夹下.

2. 包含一个jsTree主题

   主题也能被自动载入，但是为获得最好的性能，包括CSS文件.

   <link rel="stylesheet" href="dist/themes/default/style.min.css" />

3. 设置一个容器

   这就是你想要树展现的地方，一个<div>元素足够了。这个例子有一个嵌套的<ul>，没有其他的数据源配置（如JSON）.

     <div id="jstree_demo_div"></div>

4. 包含jQuery

   jsTree 要求1.9.0 或更高版本.

   <script src="dist/libs/jquery.js"></script>

5. 包含jsTree

   生产版包含简化版: dist/jstree.min.js, 有开发版: dist/jstree.js

   <script src="dist/jstree.min.js"></script>

6. 创建一个实例

   当DOM准备好你可以开始创建jstree实例了.

   $(function () { $('#jstree_demo_div').jstree(); });

7. 事件监听

   当用户（或你）与树的交互的时候，jsTree使用事件通知你一些变化。所以绑定jstree事件就像绑定单击事件一样简单。有一个事件的列表和信息，他们在API文档提供.

   $('#jstree_demo_div').on("changed.jstree", function (e, data) {
     console.log(data.selected);
   });

8. 与你的实例交互

   一旦一个实例准备就绪，你能调用这个实例的方法。API文档中有一个可用的方法的列表。下面的三个例子做同样的事情

   $('button').on('click', function () {
     $('#jstree').jstree(true).select_node('child_node_1');
     $('#jstree').jstree('select_node', 'child_node_1');
     $.jstree.reference('#jstree').select_node('child_node_1');
   });

原文：http://www.jstree.com/

未完待续 ......