JS插件Fancytree使用分享及源码分析

原创

于 2017-05-20 16:57:00 发布 · 7.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #插件 #源码

本文分享了Fancytree这款强大的基于jQuery和jQuery UI的树形插件，介绍了其丰富的功能，如节点过滤、即时编辑、键盘事件等。详细讲解了配置选项如autoCollapse和selectMode，并分享了ES6模块化引入的经验，强调了在使用jQuery UI时需引入'jquery-ui-bundle'。此外，还讨论了如何在数据动态变化时重新渲染Fancytree和获取选中节点数据的方法。最后，对Fancytree源码进行了简要分析，指出其避免重复声明的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fancytree

fancytree是一款基于jq和jq-ui的树形插件，相比普通的jsTree，fancytree扩展的功能非常的多，除了checkbox选中，拖拽排序等基础的功能，还有节点过滤，即时编辑，tabletree(在列表中展示jstree)，各种键盘事件，以及各种皮肤样式。
插件地址：https://github.com/mar10/fancytree
当前分享版本：2.22.5

配置介绍

$("#selector").fancytree({
    activeVisible: true, // Make sure, active nodes are visible (expanded)
    aria: true, // Enable WAI-ARIA support
    autoActivate: true, // Automatically activate a node when it is focused using keyboard
    autoCollapse: false, // Automatically collapse all siblings, when a node is expanded
    autoScroll: false, // Automatically scroll nodes into visible area
    clickFolderMode: 4, // 1:activate, 2:expand, 3:activate and expand, 4:activate (dblclick expands)
    checkbox: false, // Show checkboxes
    debugLevel: 2, // 0:quiet, 1:normal, 2:debug
    disabled: false, // Disable control
    focusOnSelect: false, // Set focus when node is checked by a mouse click
    escapeTitles: false, // Escape `node.title` content for display
    generateIds: false,