jquery.fancytree

Fancytree

Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.

Status

See the change log for details.

Get Started

• Try the live demo.
• Read the documentation.
• Check the Q&A forum or Stackoverflow if you have questions.
• Play with jsFiddle, CodePen, or Plunker.
• Contribute

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.

See module loader support and API docs.

Credits

Thanks to all contributors.

Browser Status Matrix

Changelog

2.31.0 / 2019-05-30

• New extension ext-grid (experimental)<br> This is a variant of ext-table that introduces viewport support, which allows to maintain huge data models while only rendering as many DOM elements as necessary.<br> Main changes:
  • A viewport is defined by the number of visible rows (tree.viewport.count) and the index of the first visible row (.start)
  • When scrolling, rows are not hidden, but removed and replaced. (This implies that the contents of embedded input fields should be written into the model immediately.)
• Refactored ext-dnd5<br> Some breaking changes were made, mainly to improve handling of the dropEffect (note that ext-dnd5 was and still is experimental and in progress).
  • Remove dnd5.dropEffect callback option (set data.dropEffect instead)
  • Remove dnd5.dragImage callback option (call data.dataTransfer.setDragImage()
  • and set data.useDefaultImage = false instead)
  • Rename dnd5.preventRecursiveMoves to dnd5.preventRecursion
  • dnd5.preventVoidMoves now only aplies to 'move' operations, so we can copy before self
  • [Added] dnd5.preventSameParent option
• [Added] hook treeStructureChanged
• [Added] methods tree.findRelatedNode(), node.findRelatedNode()
• [Added] method node.getPath()
• [Added] methods $.ui.fancytree.getDragNode(), $.ui.fancytree.getDragNodeList()
• [Added] event updateViewport
• [Added] tree option .checkboxAutoHide to hide checkboxes unless selected or hovered.
• [Added] tree option .treeId to prevent generation of a new sequence if the tree is re-initialized on a page.
• [Changed] .getTree() now also accepts the tree id string
• [Changed] #939: Keep a partsel flag that was explicitly set on a lazy node
• [Changed] ext-clones: make default key generation more robust against collisions
• [DEPRECATED] loaderror and lazyload options now throw an error instead of falling back to the correct loadError and lazyLoad
• [DEPRECATED] tree.applyFilter was removed
• [Fixed] #918 SVG font awesome 5 glyphs remove badge counter when parent node is collapsed
• [Fixed] #921 ext-edit respectively focus handling: Internet Explorer scrolls briefly to the top/left of the tree container element after editing a node title if the tree container is partially outside the viewport
• [Fixed] #931 Selecting grandparent selects all nodes of radiogroup in selectMode=3
• [Fixed] #946 dnd5 - Counter badge shows up, although the drag was cancelled from dragStart callback
• [Fixed] #947 dnd5 - dragEnd is fired only when re-ordering nodes within the same parent
• [Fixed] missing tree.error() and broken node.error()
• [Fixed] a bug in ext-logger
• Optimized performance of expandAll() and ext-filter
• Replace jshint/jscs with eslint
• Now testing on Puppeteer/Chromium instead of PhantonJS
• Use LF on Windows when checking out from git (added .gitattributes)
• Update to jQuery 3.4