Fancytree 基于 jQuery 动态树形结构插件
Fancytree是一个 JavaScript 动态树形 jQuery 插件，支持持久化，键盘操作，复选框，表格，拖放，以及延迟加载。
主要特点
- 富面向对象 API
- 支持 AMD 的可扩展模块化设计
- 延迟加载和高效高效地处理大数据集
- 支持视图，即在维护时只呈现所需的DOM元素 海量数据模型
- 全功能表视图支持(也称为树网格)
- 键盘导航
- 符合WI-ARIA标准
- (分层)选择和复选框
- 拖放(基于HTML 5或基于jQueryUI的)
- 内联编辑
- 搜索与过滤
- 扩展、选择和活动状态的持久性
- Themable(随WinXP、Win 7、Win 8、OSX Lion和Glyph示例一起提供)
- 树的行为类似于单个窗体控件，即它是 tabbable。
ES6 Quickstart
import $ from "jquery";
import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less'; // CSS or LESS
import {createTree} from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
const tree = createTree('#tree', {
extensions: ['edit', 'filter'],
source: {...},
...
});
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.开始使用
有几种方法可以获得最新的稳定Fancytree版本：
包管理器
使用您最喜欢的包管理器，例如：
NPM：$ npm install --save jquery.fancytree,
yarn：$ yarn add jquery.fancytree，或
bower：$ bower install fancytree
将下载最新的稳定版本到您的项目文件夹。
CDN 加速
直接从云中包含特定版本，使用CDN资料来源，例如： jsDelivr、cdnjs 和 UNPKG。
下载文件
从 release list 并通过单击以下方法下载完整的源代码树和文档、测试文件等。
项目结构
目前，我们提供这个目录结构，只显示最重要的文件：
jquery.fancytree/
├─ demo/ Example browser
├─ src/ Current development code ('nightly build')
├─ test/ Unit tests and triage
└─ dist/ Latest released version:
├─ modules/ All single modules with AMD support
| ├─ jquery.fancytree.js The core module. This is also what you get with
| | `require('jquery.fancytree')`
| ├─ jquery.fancytree.EXT.js, ... Extension modules
| └─ jquery.fancytree.ui-deps.js Implicitly loaded dependencies
├─ skin-NAME/ LESS and CSS styles and images for the NAME theme
| ├─ icons.gif, ... Icon sprite
| ├─ ui.fancytree.css Compiled CSS
| ├─ ui.fancytree.min.css Minified CSS
| └─ ui.fancytree.less LESS definition (includes ../skin-common)
├─ skin-custom-1/ Starting point for a custom theme
├─ jquery.fancytree.min.js Core library (no extensions), minified
├─ jquery.fancytree-all[.min].js Bundle with core and most extensions.
│ The AMD wrapper references ui-widgets.
│ Use this in production ONLY IF you plan
│ to include jQuery UI separately.
├─ jquery.fancytree-all-deps[.min].js Bundle with core, most extensions, and
│ required jQuery UI widgets.
│ This is the recommended source file for
| production (unless you use a module loader).
└─ skin-common.less Shared styles, used by stock themes需求和依赖
- Fancytree需要 jQuery 1.9+，推荐3.x正常构建，作为外部依赖项。
注：如果使用包管理器或模块加载器，jQuery 将自动包含在 Fancytree 核心模块中。
注：这并不意味着你真的需要使用 JQuery 在您的项目中。 - Fancytree 内部也使用了一些 jQueryUI 小部件。
但是，这些内容显然是分发的一部分jquery.fancytree-all-deps.min.js，或者如果使用了模块加载程序。
注：JQueryUI 主题是不需要。 - 或者，如果您的项目已经包含 jQueryUI 1.12+推荐，请使用
jquery.fancytree-all.min.js而不是jquery.fancytree-all-deps.min.js。
如果自定义下载至少应选择下列组件：
'UI Core',
'Effects': 'Effects Core', 'Blind Effect'
这个ext-dnd扩展还需要 'Interactions': 'Draggable', 'Droppable', however，但是ext-dnd5扩展没有此依赖项。
在网页上嵌入 Fancytree
一个简单的例子：
<head>
[...]
<!-- Include jQuery -->
<script src="assets/jquery/dist/jquery.min.js"></script>
<!-- Include Fancytree skin and library -->
<link href="assets/jquery.fancytree/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="assets/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<!-- Initialize the tree when page is loaded -->
<script type="text/javascript">
$(function(){ // on page load
// Create the tree inside the <div id="tree"> element.
$("#tree").fancytree({
extensions: ["edit", "filter"],
source: {...},
...
});
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.
});
</script>
</head>
<body>
[...]
<!-- Define the targel element for the tree -->
<div id="tree"></div>
[...]
</body>
</html>
或直接从CDN来源：
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script>使用模块加载器
注：可用v2.25+。
当使用模块绑定器时，如Webpack，我们可以添加Fancytree
$ npm install --save jquery.fancytree然后使用require()或import。例子：
// Import LESS or CSS:
import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less'
const $ = require('jquery');
const fancytree = require('jquery.fancytree');
require('jquery.fancytree/dist/modules/jquery.fancytree.edit');
require('jquery.fancytree/dist/modules/jquery.fancytree.filter');
console.log(fancytree.version);
$(function(){
$('#tree').fancytree({
extensions: ['edit', 'filter'],
source: {...},
...
});
const tree = fancytree.getTree('#tree');
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.
})这个 require() 调用返回 $.ui.fancytree 对象，这将带来一些有用的静态属性和方法，如 .version, .createTree(), .eventToString(),.getNode(), .getTree() 等 有关详细信息，请查看api文档。
如果我们想避免 $，我们也可以不用：
import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less'; // CSS or LESS
import {createTree} from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
const tree = createTree('#tree', {
extensions: ['edit', 'filter'],
source: {...},
...
});
// Note: Loading and initialization may be asynchronous, so the nodes may not be accessible yet.另见 整合指引 有关 Angular、webpack、require.js 等的详细信息和配置提示。
定义树数据
有几种方法可以定义实际的节点结构：
1、使用 source 传递数据结构（即嵌套对象数组）的选项：
$("#tree").fancytree({
source: [
{title: "Node 1", key: "1"},
{title: "Folder 2", key: "2", folder: true, children: [
{title: "Node 2.1", key: "3"},
{title: "Node 2.2", key: "4"}
]}
],
...另见数据属性的完整列表.
2、使用 source 选项通过Ajax加载数据。
$("#tree").fancytree({
source: {
url: "/getTreeData",
cache: false
},
...AJAX服务将返回。有效JSON数据：
[{"title": "Node 1", "key": "1"},
{"title": "Folder 2", "key": "2", "folder": true, "children": [
{"title": "Node 2.1", "key": "3"},
{"title": "Node 2.2", "key": "4"}
]}
]3、定义 <ul>/<li> 树内部的标记结构 <div> 标签。(注意方法1和2是首选的)
$("#tree").fancytree();HTML：
<div id="tree">
<ul id="treeData" style="display: none;">
<li id="1">Node 1
<li id="2" class="folder">Folder 2
<ul>
<li id="3">Node 2.1
<li id="4">Node 2.2
</ul>
</ul>
</div>
...有关更多信息，请参见 TutorialLoadData 而 在线演示。
懒惰加载
Fancytree 支持加载节点按需，即仅在第一次展开节点时加载数据。
为了启用该功能，我们可以将节点标记为 lazy.
$("#tree").fancytree({
// Initial node data that sets 'lazy' flag on some leaf nodes
source: [
{title: "Child 1", key: "1", lazy: true},
{title: "Folder 2", key: "2", folder: true, lazy: true}
],
lazyLoad: function(event, data) {
var node = data.node;
// Issue an Ajax request to load child nodes
data.result = {
url: "/getBranchData",
data: {key: node.key}
}
}
});有关更多信息，请参见 TutorialLoadData.
配置选项
在初始化过程中，其他选项将传递给 Fancytree：
$("#tree").fancytree({
source: {
url: "ajax-tree-plain.json"
},
checkbox: true,
[...]
});也可以设置选项。后使用此语法进行初始化：
var tree = $.ui.fancytree.getTree("#tree");
tree.setOption("checkbox", true);
// Alternative jQuery style:
// $("#tree").fancytree("option", "checkbox", true);动态选择
一些节点选项可以使用动态模式以灵活的方式定义。
例如考虑 checkbox 选项，这可能是 true, false, or "radio"。如果省略，它将默认为 false。可以将所有节点的全局启用复选框配置如下：
$("#tree").fancytree({
checkbox: true,
source: {url: "/mySource"},
...如果存在同名的属性，则具体源数据可以覆盖每个节点的全局设置：
[{"title": "Node 1"},
{"title": "Node 2", "checkbox": false},
{"title": "Node 3", "checkbox": "radio"}
]如果全局设置是回调，则将为每个节点调用该设置，从而允许动态定义选项值：
$("#tree").fancytree({
checkbox: function(event, data) {
// Hide checkboxes for folders
return data.node.isFolder() ? false : true;
},
tooltip: function(event, data) {
// Create dynamic tooltips
return data.node.title + " (" + data.node.key + ")";
},
icon: function(event, data) {
var node = data.node;
// Create custom icons
if( node.data.refType === "foo" ) {
return "foo-icon-class";
}
// Exit without returning a value: continue with default processing.
},
...目前，以下选项被评估为动态选项：checkbox, icon, iconTooltip, tooltip, unselectable, unselectableIgnore,unselectableStatus。
事件处理
可以通过定义事件处理程序(即回调函数)来添加(和修改)功能。
每个事件处理程序都会传递一个 data 参数，该参数包含有关事件目标的信息。
$("#tree").fancytree({
...
activate: function(event, data){
// A node was activated: display its title:
var node = data.node;
$("#echoActive").text(node.title)
},
beforeSelect: function(event, data){
// A node is about to be selected: prevent this, for folder-nodes:
if( data.node.isFolder() ){
return false;
}
}
});定义事件处理程序的另一种方法是稍后将它们绑定到初始化的树。请注意，事件名称必须转换为小写，并以 fancytree 作为前缀：
$("#tree").on("fancytreebeforeselect", function(event, data){
if( data.node.isFolder() ){
return false;
}
});有关更多信息，请参见 图托里亚事件，在线演示，完整的 可用事件列表，以及 数据对象的描述。
API 访问
Fancytree 公开了一个广泛的面向对象的接口来查询和操作数据模型：
var tree = $.ui.fancytree.getTree("#tree"),
activeNode = tree.getActiveNode();
// Sort children of active node:
activeNode.sortChildren();
// Expand all tree nodes
tree.visit(function(node){
node.setExpanded(true);
});
// Append a new child node
activeNode.addChildren({
title: "Document using a custom icon",
icon: "customdoc1.gif"
});有关更多信息，请参见 图托里亚阿皮.
选择和复选框
Fancytree支持三种模式：
selectMode: 1*单一选择
在任何时候只选择一个节点。selectMode: 2*多重选择(默认)
每个节点可以独立选择。selectMode: 3*等级选择
(De)选择节点将传播到所有后代。混合状态将显示为部分选定使用三状态复选框。
而选编节点的状态与复选框图标无关，我们通常使用checkbox: true选择。(特殊价值"radio")将支票转换为单选按钮。)
在选择模式3中的传播可以通过unselectable, unselectableStatus，和unselectableIgnore各种选择。
节点选项radiogroup为其子节点启用单选择。
树状网格
Fancytree的一个主要功能是将树呈现为表(也称为树网格)，并支持带有嵌入式输入控件的网格中的键盘导航。
主题化
有些皮肤是发行版的一部分，例如：Win-XP, Windows 7, Windows 8, OS X Lion。
扩展
Fancytree 是可扩展的扩展。标准发行版已经以这种方式包含了一些额外的功能，例如表支持、内联编辑、过滤等等。
阅读更多关于
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论