Fancytree 基于 jQuery 动态树形结构插件 - 文章教程

Fancytree 基于 jQuery 动态树形结构插件

发布于 2020-10-11 字数 17519 浏览 1181 评论 0

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资料来源,例如: jsDelivrcdnjsUNPKG

下载文件

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支持三种模式:

  1. selectMode: 1*单一选择
    在任何时候只选择一个节点。
  2. selectMode: 2*多重选择(默认)
    每个节点可以独立选择。
  3. selectMode: 3*等级选择
    (De)选择节点将传播到所有后代。混合状态将显示为部分选定使用三状态复选框。

选编节点的状态与复选框图标无关,我们通常使用checkbox: true选择。(特殊价值"radio")将支票转换为单选按钮。)

在选择模式3中的传播可以通过unselectable, unselectableStatus,和unselectableIgnore各种选择。
节点选项radiogroup为其子节点启用单选择。

在线演示细节

树状网格

Fancytree的一个主要功能是将树呈现为表(也称为树网格),并支持带有嵌入式输入控件的网格中的键盘导航。

主题化

有些皮肤是发行版的一部分,例如:Win-XP, Windows 7, Windows 8, OS X Lion。

扩展

Fancytree 是可扩展的扩展。标准发行版已经以这种方式包含了一些额外的功能,例如表支持、内联编辑、过滤等等。

阅读更多关于

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0