jsTree 基于 jQuery 免费开源的树结构交互插件

Question

jsTree 是一个 jQuery 插件, 提供交互式树.它是完全免费的,开源的，并根据 MIT 许可进行分发，jsTree 易于扩展，可定义和配置，它支持 HTML 和 JSON 数据源以及 AJAX 加载。

jsTree 可以在盒子模型（内容框或边框）中正常运行，可以作为 AMD 模块加载，并具有用于响应式设计的内置移动主题，可以轻松自定义。它使用 jQuery 的事件系统，因此对树中各种事件的绑定回调是熟悉且容易的。

特点

仅有的一些功能值得注意：

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

入门

下载 jsTree 或使用CDNJS

如果您选择下载-您需要的所有文件都在dist/下载文件夹中

包括一个 jsTree 主题

主题也可以被自动加载，但最好是包含CSS文件以提高性能。

如果自己托管文件：

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

如果使用CDNJS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

设置一个容器

这是您希望树出现的元素，一个<div>就足够了。<ul>由于没有配置其他数据源（例如JSON），因此此示例具有嵌套。

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

包含jQuery

jsTree 在您的网页中需要1.9.0或更高版本。您可以使用CDN版本或包含本地副本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

包含jsTree

如果您自己托管文件：用于生产的版本包括最小版本：dist/jstree.min.js，则还有一个开发版本：dist/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>

创建一个实例

DOM准备就绪后，您可以开始创建jstree实例。

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

监听事件

当用户（或您）与树交互时发生某些更改时，jsTree使用事件通知您。因此，绑定到jstree事件就像绑定到单击一样容易。有一个事件的名单，他们的API文档中提供的信息和。

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

与您的实例互动

实例准备好后，您可以在其上调用方法。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');
});

相关链接

• 官网：https://www.jstree.com/
• 中文文档：https://www.wenjiangs.com/docs/jstree