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

发布于 2020-09-30 19:53:20 字数 2630 浏览 1416 评论 0

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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。