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.29.0 / 2018-06-16

• [Changed] toggleEffect now also accepts "toggle" or "slideToggle" to use jQuery effects instead of jQueryUI.<br> toggleEffect: { effect: "slideToggle", duration: 200 } is now the default.<br> 'effects' component was removed from the bundled jquery.fancytree.ui-deps.js
• [Fixed] #746 Animation bug when expanding/collapsing nodes
• [Fixed] #848 Drag End Error with dnd5 extension
• [Fixed] #850 ext-childcounter doesn't work with custom icons
• [Fixed] #859 Fix log level configuration problem
• [Fixed] #865 toggleEffect animation (effect: blind) sometimes got stuck.
• Stop testing jQuery UI 1.9
• Update to jQuery 3.3.1