html js树状图插件,jsTree 基于 jQuery 免费开源的树结构交互插件 - 文章教程

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

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

特点

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

拖放支持

键盘导航

内联编辑，创建和删除

三态复选框

模糊搜索

可定制的节点类型

入门

下载 jsTree 或使用CDNJS

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

包括一个 jsTree 主题

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

如果自己托管文件：

如果使用CDNJS：

设置一个容器

这是您希望树出现的元素，一个

就足够了。

• 由于没有配置其他数据源(例如JSON)，因此此示例具有嵌套。

包含jQuery

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

包含jsTree

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

如果使用CDNJS：

创建一个实例

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');

});

相关链接