最佳树形视图：jQuery和Javascript插件

本文概述

• 5. jQuery file tree
• 4. Bootstrap Treeview
• 3. jqTree
• 2. jsTree
• 1. FancyTree
• jQuery bonsai
• Treed

你可能需要放弃创建自己的树形视图以显示文件列表或其他类型的树形视图的任务, 因为有许多插件可以帮你解决这个问题。

这些treeview插件是你可以找到的针对javascript和jQuery的最佳开源TreeView插件。

5. jQuery file tree

Github |演示版

jQueryFileTree是jQuery的可配置AJAX文件浏览器插件。

• 产生有效的语义XHTML。
• 通过CSS完全可定制。
• 能够根据文件扩展名设置图标样式。
• 使用AJAX即时获取文件信息。
• 易于配置和实施。
• 包括用于PHP和ASP.NET(C＃)的连接器脚本。
• 支持用于扩展功能的自定义连接器脚本。
• 可自定义的展开/折叠事件。
• 可自定义的展开/折叠速度。
• 支持缓动功能。
• 单文件夹视图和多文件夹视图。
• 可配置的加载消息。
• 多选复选框。
• 支持事件监听的独特动作。

4. Bootstrap Treeview

Github |演示版

Bootstrap树视图是一种简单而优雅的解决方案, 用于显示分层树结构(树视图), 同时利用Twitter Bootstrap提供的最佳功能。允许事件回调为nodeSelected, nodeChecked, nodeExpanded等。图标自定义(超赞字体或字形)。

3. jqTree

Github |演示版

简介JqTree是一个jQuery小部件, 用于显示html中的树结构。它支持通过ajax加载数据。

• 根据JSON数据创建树。
• 拖放。
• 适用于ie7 +, firefox 3.6 +, chrome和safari。
• 写在Coffeescript。

2. jsTree

Github |演示版

jsTree是jquery插件, 提供交互式树。它是完全免费的, 开源的, 并根据MIT许可进行分发。 jsTree易于扩展, 可定义和配置, 它支持HTML和JSON数据源, AJAX和异步回调加载。 jsTree可以在盒模型(内容框或边框)中正常运行, 可以作为AMD模块加载, 并具有用于响应式设计的内置移动主题, 可以轻松自定义。它使用jQuery的事件系统, 因此对树中各种事件的绑定回调是熟悉且容易的。

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

jsTree允许你使用HTML, Javascript或JSON数据填充树视图。

1. FancyTree

Github |演示版

Fancytree是jQuery的JavaScript动态树视图插件, 支持持久性, 键盘, 复选框, 表, 拖放和延迟加载。这个插件提供了很多内置的可选插件, 例如：

• 内联编辑(允许你使用内联编辑更改节点标题)。
• 拖放n拖放(树节点的拖放(在同一棵树内或在不同树之间)的行为类似于标准jQuery UI的可拖放行为, 即允许将节点拖放到标准可拖放对象上。行为类似于标准的jQuery UI的可拖放行为, 即允许丢弃标准可拖动对象)。
• 与FontAwesome搭配使用效果很好。
• 许多回调可以自定义几乎所有内容。
• 多个主题, 但可根据需要进行定制。
• 友好的API, 可让你将节点动态添加到所选节点。

jQuery bonsai

Github

jquery-bonsai是一个轻量级的jQuery插件, 它使用一个大的嵌套列表并将其修剪为一个小的可扩展树控件。还包括对复选框(包括”不确定”状态), 单选按钮以及使用JSON数据源填充树的支持。如果你希望极简主义使用并自己定制, 则非常有用。

Treed

Github

Treed是一个很好奇的Treeview插件, 它允许你在Treeview中显示, 编辑动态数据, 它支持撤消管理器。 Treed是使用MVC模式构造的, 因此很容易为树创建完全不同的视图。

如果你想做的不仅仅是输入单个文本, 还可以创建自己的” Node”类。你可以随意添加按钮, 更多字段。 (请注意, 右侧图形是使用d3.js构建的, 而不是库本身构建的)

如果你知道另一个很棒的TreeView插件, 请在评论框中与我们分享。玩得开心