jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree

jQuery and jQuery UI Dynamic Tree View Plugin - Fancytree
File Size: 2.81 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Fancy Tree is a jQuery tree view plugin that allows developers to dynamically render powerful, user-friendly tree view interfaces from HTML lists, JavaScript arrays/objects, and/or JSON data.

jQuery Fancy Tree is the designated successor of DynaTree plugin.

More features:

  • Drag and drop.
  • Node/item selection with checkboxes.
  • Data lazy loading.
  • Keyboard interactions.
  • Fully accessible.
  • Inline editing.
  • Data filtering.
  • 10+ built-in themes.

See also:

Installation:

# NPM
$ npm install jquery.fancytree

# Bower
$ bower install jquery.fancytree

Basic Usage:

1. Include jQuery javascript library and jQuery UI (for drag'n'drop) in your document

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2. Include the jQuery Fancy Tree plugin's JavaScript after jQuery library.

<!-- All in one JS -->
<script src="dist/jquery.fancytree-all.min.js"></script>
<!-- With dependencies -->
<script src="dist/jquery.fancytree-all-deps.min.js"></script>

3. Choose and include a theme css file in your document

<link href="skin-awesome/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-bootstrap-n/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-bootstrap/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-custom-1/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-lion/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-material/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-vista/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-win8-n/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-win8-xxl/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
<link href="skin-xp/ui.fancytree.css" rel="stylesheet" type="text/css">

4. Generate a basic tree view from an HTML unordered list.

<div id="tree">
  <ul id="treeData" style="display: none;">
    <li id="id1" title="Look, a tool tip!">item1 with key and tooltip
    <li id="id2">item2
    <li id="id3" class="folder">Folder <em>with some</em> children
      <ul>
        <li id="id3.1">Sub-item 3.1
          <ul>
            <li id="id3.1.1">Sub-item 3.1.1
            <li id="id3.1.2">Sub-item 3.1.2
            <li id="id3.1.3">Sub-item 3.1.3
          </ul>
        <li id="id3.2">Sub-item 3.2
          <ul>
            <li id="id3.2.1">Sub-item 3.2.1
            <li id="id3.2.2">Sub-item 3.2.2
          </ul>
      </ul>
    <li id="id4" class="expanded">Document with some children (expanded on init)
      <ul>
        <li id="id4.1"  class="active focused">Sub-item 4.1 (active and focus on init)
          <ul>
            <li id="id4.1.1">Sub-item 4.1.1
            <li id="id4.1.2">Sub-item 4.1.2
          </ul>
        <li id="id4.2">Sub-item 4.2
          <ul>
            <li id="id4.2.1">Sub-item 4.2.1
            <li id="id4.2.2">Sub-item 4.2.2
          </ul>
      </ul>
  </ul>
</div>
$(function(){
  $("#tree").fancytree();
});

5. Generate a basic tree view from an array of JavaScript objects.

<div id="tree"></div>
$("#tree").fancytree({
  source: [
    {title: "Node 1"},
    {title: "Node 2", key: "id2"},
    {title: "Folder 3", folder: true, children: [
      {title: "Node 3.1"},
      {title: "Node 3.2"}
    ]},
    {title: "Folder 2", folder: true}
  ]
  }
});

6. All the plugin options to customize the tree view as per your needs.

$("#tree").fancytree({

  // makes the active node always be visible
  activeVisible: true,

  // ajax data fetching
  ajax: {
    type: "GET",
    cache: false, // false: Append random '_' argument to the request url to prevent caching.
    // timeout: 0, // >0: Make sure we get an ajax error if server is unreachable
    dataType: "json", // Expect json format and pass json object to callbacks.
  },

  // enable ARIA
  aria: true,

  // activate a node when focused with the keyboard
  autoActivate: true,

  // collapse all siblings when a node is expanded
  autoCollapse: false,

  // auto scroll to the current node
  autoScroll: false,

  // enable checkboxes
  // true: display a checkbox in front of the node
  // "radio": display a radio button in front of the node. This does not modify the selection behavior.
  // function(event, data): callback returning true, false, or a string.
  checkbox: false,

  // 1:activate, 2:expand, 3:activate and expand, 4:activate/dblclick expands
  clickFolderMode: 4,

  // 0..4 (null: use global setting $.ui.fancytree.debugLevel)
  debugLevel: null, 

  // accept passing ajax data in a property named d
  enableAspx: true,

  // escape HTML tags
  escapeTitles: false,

  // enabled extensions
  extensions: [],

  // fx: { height: "toggle", duration: 200 },
  // toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 200 },
  // toggleEffect: { effect: "slide", options: {direction: "up"}, duration: 200 },
  //toggleEffect: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 },
  toggleEffect: { effect: "slideToggle", duration: 200 }, //< "toggle" or "slideToggle" to use jQuery instead of jQueryUI for toggleEffect animation

  // add unique IDs to nodes
  generateIds: false,

  // shows icons
  // true: use default icons, depending on node.folder and node.expanded
  // function(event, data): callback returning true, false, object, or a string.
  icon: true,

  // prefix
  idPrefix: "ft_",

  // set focus when node is checked by a mouse click
  focusOnSelect: false,

  // enable keyboard interactions
  keyboard: true,

  // key path separator
  keyPathSeparator: "/",

  // min expand level
  minExpandLevel: 1,

  // (bool, string, or callback) display message, when no data available
  nodata: true, 

  // enable quick search
  quicksearch: false,

  // enable RTL mode
  rtl: false,

  // scroll offsets
  scrollOfs: { top: 0, bottom: 0 },

  // scroll parent
  scrollParent: null,

  // 1:single, 2:multi, 3:multi-hier
  selectMode: 2,

  // custom strings
  strings: {
    loading: "Loading...", // &#8230; would be escaped when escapeTitles is true
    loadError: "Load error!",
    moreData: "More...",
    noData: "No data.",
  },

  // tab index
  tabindex: "0",

  // add tabindex='0' to node title span
  titlesTabbable: false,

  // enable tooltip
  tooltip: false,

  // optional fixed tree id and namespace
  treeId: null,

  // default classnames
  _classNames: {
    node: "fancytree-node",
    folder: "fancytree-folder",
    animating: "fancytree-animating",
    combinedExpanderPrefix: "fancytree-exp-",
    combinedIconPrefix: "fancytree-ico-",
    hasChildren: "fancytree-has-children",
    active: "fancytree-active",
    selected: "fancytree-selected",
    expanded: "fancytree-expanded",
    lazy: "fancytree-lazy",
    focused: "fancytree-focused",
    partload: "fancytree-partload",
    partsel: "fancytree-partsel",
    radio: "fancytree-radio",
    // radiogroup: "fancytree-radiogroup",
    unselectable: "fancytree-unselectable",
    lastsib: "fancytree-lastsib",
    loading: "fancytree-loading",
    error: "fancytree-error",
    statusNodePrefix: "fancytree-statusnode-",
  },

  // data.node is a lazy node that is expanded for the first time. The new child data must be returned in the data.result property (see source option for available formats).
  lazyLoad: null,

  // allow to modify the ajax response
  postProcess: null
  
});

7. Event handlers.

$("#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 folders:
    if( data.node.isFolder() ){
      return false;
    }
  }
});

Changelog:

v2.31.0 (2019-05-31)

  • New extension ext-grid (experimental). 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.
  • Refactored ext-dnd5
  • [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] 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] SVG font awesome 5 glyphs remove badge counter when parent node is collapsed
  • [Fixed] 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] Selecting grandparent selects all nodes of radiogroup in selectMode=3
  • [Fixed] dnd5 - Counter badge shows up, although the drag was cancelled from dragStart callback
  • [Fixed] 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

v2.30.3 (2019-01-19)

  • Stop testing on IE 8 (no longer available on Saucelabs)

v2.30.2 (2019-01-13)

  • Stop testing on IE 8 (no longer available on Saucelabs)
  • [Fixed] ext-dnd5 throws error for draggable column headers
  • [Fixed] overrideMethod()'s calling context
  • [Fixed] ext-dnd5 + ext-glyph awesome5 does not show the icons when dragging an item
  • [Fixed] ext-multi: JavaScript error (event is not defined) in nodeKeydown
  • [Fixed] scrollIntoView for plain trees that don't have a scrollbar
  • [Fixed] ext-edit: Fix caret position for mouse-click in input
  • [Fixed] ext-dnd5: Fix preventNonNodes option
  • [Fixed] Fix .getTree() for jQuery 3
  • [Fixed] ext-dnd5: If drag does not start, no drag data should be stored

v2.30.1 (2018-11-14)

  • [Changed] Apply and enforce 'prettier' codestyle
  • [Changed] Set font for table extension
  • [Fixed] Font Awesome 4 animation spinner stays visible
  • [Fixed] Fancytree assertion failed: scrollParent should be a simple element or window, not document or body.
  • [Fixed] _requireExtension: order managment
  • [Fixed] Creating duplicate icon when removing node using extension columnview
  • [Fixed] ColumnView Extension - Toggle between parent and children not working
  • [Fixed] With quicksearch enabled, does not search for non-Latin character

v2.29.1 (2018-06-28)

  • [Fixed] ES6 import dependency on jquery for jquery.fancytree.ui-deps.js
  • [Fixed] Drag End Error with dnd5 extension (again): fancytree-drag-remove class not removed on drop/dragend
  • [Fixed] ext-dnd5: Unwanted expanding of folder node when a node is dragged before/after it
  • [Fixed] triggerStart: [] does not override the default settings.
  • NOTE: Options of type Array will now override the default option. Before, arrays were merged with the default.
  • [Fixed] ext-ariagrid default actions

v2.29.0 (2018-01-29)

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

v2.28.0 (2018-01-29)

  • [Added] support for Font Awesome 5 (ext-glyph preset)
  • [Changed] Re-rename clearData() to clearPersistData()
  • [Changed] Re-scale debugLevel from 0:quiet to 4:verbose, allowing to suppress warnings and even errors.
  • [Fixed] ext-filter: Handle nodes without title

v2.27.1 (2017-12-16)

  • Update

v2.27.0 (2017-12-13)

  • node.type is now a first-class property of FancytreeNode. Node data {..., type: "foo"} is now available as node.type (before: node.data.type).
  • The properties tree.types and tree.columns have been added to Fancytree. If passed with source data, they are now available directly instead of tree.data.types or tree.data.columns.
  • The properties node.type and tree.types are recommended to implement node-type specific configuration (details).
  • Event data argument contains typeInfo == tree.types[node.type].
  • [Added] support for ligature icons (e.g. material icons).
  • [Added] icon option can now return a dict to create a ligature icon.
  • [Added] support for a custom path segment matcher. This allows to have key paths with segments other than node.key.
  • [Improved] the returned deferred promise now triggers progress() events which can be used instead of the callback.
  • The property tree.columns was added to Fancytree. Currently only reserved as recommended pattern to pass global meta-data for ext-table.
  • [Added] ext-edit: new trigger mode clickActive for option triggerStart: [...].
  • [Added] Tooltip support for icons (dynamic option iconTooltip).
  • [Improved] ext-table no longer needs empty tbody/tr if thead is present.
  • [Fixed] UMD requirements for node/CommonJS
  • [Fixed] jquery.fancytree.ui-deps.js does not override existing widgets.
  • [Fixed] <mark> element missing in filtered nodes (minified bundle, IE 11).
  • [Fixed] findNextNode() doesn't set default for 'startNode' argument.
  • [Added] Material Design demo
  • [Added] Demo for Fancytree inside a jquery-confirm popup
  • [Changed] String representation is now "[email protected]_4[title='My name']"

v2.26.0 (2017-11-05)

  • [Improved] LESS now compiles with webpack
  • [Added] ext-glyph support for radio buttons
  • [Added] Call postProcess for non-Ajax sources
  • [Added] Color definitions for skin-awesome (taken from skin-lion)
  • [Fixed] $.ui.fancytree.getNode() for ES6 environments
  • [Fixed] Wrong node is activated in IE, when clicking in unfocused container

v2.25.0 (2017-10-30)

  • Improved Module Support and Distribution
  • [Added] Source map files for jquery.fancytree-all-deps.min.js
  • [Added] New extension ext-fixed (work-in-progress, experimental)
  • [Fixed] Input inside table head not working
  • [Fixed] Can't use keyboard to select nodes when checkbox option is false
  • [Fixed] wide extension - padding is off when checkbox option is changed
  • [Fixed] Fix getEventTarget() for custom icons

v2.24.0 (2017-08-27)

  • [Added] ext-glyph option preset (making the map option optional)
  • [Fixed] List AMD dependency on jQuery UI
  • [Fixed] Trying to set root node selected throws an error
  • [Fixed] Drop marker for ext-glyph + ext-dnd5
  • [Fixed] Filtering must not consider escaped html entities
  • [Fixed] Passing an empty string ("") as filter calls clearFilter()
  • [Fixed] dnd5 throws exception when tree is empty
  • [Fixed] Drag start should not activate a node
  • [Fixed] FancyTree filter breaks links

v2.23.0 (2017-05-28)

  • The hideCheckbox option was removed. Use checkbox: false instead. Note that the <li class='hideCheckbox'> is still parsed from input HTML and converted accordingly.
  • The optional modifer class <div class='fancytree-radio'> was removed. This class was used on the container to turn all checkbox items into radio buttons. Instead, this class is now added to . Use the tree.checkox: "radio" option to activate this for the whole tree.
  • The callback signature for the tree.tooltip option has changed to tooltip(event, data)
  • Refactoring of selectMode: 3 behavior: Allow control of selection status propagation with new options: unselectable, unselectableIgnore, unselectableStatus See also the specification.
  • Use the new dynamic options pattern for checkbox, icon, tooltip, unselectable, unselectableIgnore, unselectableStatus. See also dynamic options.
  • [Added] option 'radiogroup' enables single-select for child nodes
  • [Added] option 'opts.noEvents' to setSelected(flag, opts)
  • [Added] New method node.visitSiblings()
  • [Improved] Option 'checkbox' can have the string value "radio" (only visual effect)
  • [Added] ext-persist option expandOpts is passed to setExpanded() Allows to suppress animation or event generation.
  • The external dependency on jQuery UI was removed. A new library jquery.fancytree-all-deps.min.js is now added to the distribution. It includes all dependencies on jQuery UI, so the only remaining external dependency is jQuery.

v2.22.5 (2017-05-06)

  • [Added] ext-ariagrid (experimental)
  • [Added] ext-persist option expandOpts is passed to setExpanded() Allows to suppress animation or event generation.

v2.22.1 (2017-04-21)

  • Fix regression with addChild performance improvements

v2.22.0 (2017-04-10)

  • [Added] ext-dnd5 now part of standard distribution
  • [Added] ext-dnd/dnd5: configurable drop marker offset
  • [Added] ext-wide: configurable left padding
  • [Added] New method $.ui.fancytree.evalOption()
  • [Improved] ext-filter: improve performance (don't render hidden nodes)
  • [Improved] ext-contextMenu: disable keyboard while popup is open and restore focus
  • [Improved] ext-hotkeys: Prevent default behavior on hot key combination
  • [Improved] speedup improvement for addChildren
  • [Fixed] ext-dnd5: top level nodes not draggable
  • [Fixed] ext-table: exception when a lazy node has children: []
  • [Fixed] ext-dnd5: Icon remains after dnd is cancelled
  • [Fixed] $.ui.fancytree.getNode(jQuery)' for jQuery v3.x
  • [Fixed] Fix DND where fancytree-title span is not a direct child due to custom layouts
  • [Fixed] When clicking in a scrolled tree for the first time, focus is not set properly
  • [Fixed] ext-wide: animation 'jumps' (jQuery UI 1.12)
  • [Fixed] expand/collapse shows displaced child nodes when scrolled (jQuery UI 1.12)
  • Update demos to jQuery 3.2.1 / jQuery UI 1.12.1

v2.21.0 (2017-01-16)

  • [Added] New extension 'ext-dnd5' for native HTML5 drag'n'drop support
  • [Added] rtl option for right-to-left script support
  • [Added] Add $.ui.fancytree.overrideMethod()
  • [Added] hook treeSetOption allows extensions to update on option changes
  • [Changed] standard CSS no longer defines overflow: auto for the container. If the tree container has a fixed height, overflow: auto or overflow: scroll should be added to make it scrollable. (Otherwise this always would be the scroll parent for ext-dnd5.)
  • [Improved] better support for initializing from embedded JSON using the data-type="json" attribute
  • [Fixed] corner case of #658 when ext-edit is loaded, but inactive
  • [Fixed] Don't load 'loading.gif' for glyph skins
  • [Fixed] ext-table: node.render(false) puts first node at end

v2.20.1 (2016-11-20)

  • [Added] rtl option for right-to-left script support
  • [Added] hook treeSetOption allows extensions to update on option changes.

v2.20.0 (2016-11-14)

  • [Added] modifyChild event. This event is also a good place to implement auto sorting
  • [Added] node.triggerModifyChild() and node.triggerModify()
  • [Added] add custom node filter to generateFormElements()
  • [Added] tree.tooltip option allows automatic or custom tooltips
  • [Added] improved tooltip escaping to allow newlines
  • [DEPRECATED] removeNode event. Listen for modifyChild with operation 'remove' instead (which is fired on the parent).
  • [Improved] ThemeRoller theme
  • [Improved] ext-filter
  • add filter option 'hideExpanders' to remove expanders if all child nodes are hidden by filter
  • Filter options and the opts argument of filterNodes() / filterBranches() have been unified.
  • [Fixed] themeroller theme compatible with ext-filter
  • [Fixed] autoCollapse option blocks filter's autoExpand option
  • [Fixed] Filter: Mark matching nodes even if parent was matched in branch mode
  • [Fixed] Exceptions in ext-filter if expression contains special chars
  • [Fixed] ext-filter does not work with ext-edit editCreateNode()
  • [Improved] WAI-ARIA support
  • Set focus to first node on first tab-in
  • Support [home] and [end] keys
  • Set aria-activedescendant on container to active ID
  • Set aria-multiselectable on container if selectMode != 1
  • Set aria-treeitem, -selected, -expanded, on title span instead <li>
  • [Fixed] loadKeyPath() sometimes gets the root wrong
  • [Fixed] Drag & drop helper icons lose indentation with table extension
  • [Fixed] Tabbing is not working if there is an anchor tag in treeview
  • [Fixed] New nodes created with ext-edit, are hidden in filtered trees
  • [Fixed] ext-table: tree.render(true) does not discard existing markup
  • [Fixed] handling of function keys, when quicksearch is on
  • Use QUnit 2.0

v2.19.0 (2016-08-12)

  • [Added] tree.enableUpdate() to temporarily disable rendering to improve performance on bulk updates
  • [Added] modifier class .fancytree-connectors to be set on container
  • Note: Experimental! Not required for skin-xp and not compatible with ext-table
  • [Added] ext-edit: data.originalEvent is now passed to beforeClose
  • [Fixed] Set source option does not update tree
  • [Fixed] node.load(true); doesn't maintain expanded
  • [Fixed] Cannot focus embedded input controls
  • [Improved] Keyboard navigation honors autoScroll option
  • Extensions inherit main version number

v2.18.0 (2016-05-03)

  • [Added] node.discardMarkup() (useful in the collapsed event)
  • [Added] new option .escapeTitles
  • [Added] new callback .enhanceTitle()
  • [Fixed] Html tags included in filter results
  • [Fixed] ext-dnd revert position fails for tables

v2.17.1 (2016-04-12)

  • [Added] node.addClass(), .removeClass(), and .toggleClass()
  • [Added] ext-filter: matcher-callback for tree.filterNodes() may now return "branch" and "skip"
  • [Added] ext-filter: new optionnodata allows to configure a status node for empty results
  • [Added] digits argument to node.getIndexHier(separator, digits).
  • [Added] tree option .tabindex, default is "0". Pass "" to resolve #577.
  • [DEPRECATED] tree option .tabbable. Use .tabindex instead
  • [Added] New option mode='firstChild' for node.moveTo()
  • [Added] New option digits=<int> for node.getIndexHier()
  • [Fixed] ext-filter: branch mode honors autoExpand: true
  • [Fixed] aria-labelledby ids not unique

v2.16.1 (2016-03-19)

  • Fixed missing loading icon in non-bootstrap themes

v2.16.0 (2016-03-16)

  • [Added] ext-clones: new method node.setRefKey(refKey)
  • [Added] modifier class .fancytree-fade-expander to be set on container
  • [Added] ext-dnd: .dragExpand() callback to prevent auto-expand
  • [Improved] load error reporting
  • [Improved] bootstrap theme icons and style (samples use bootstrap 3.3)
  • [Improved] status nodes don't have icons
  • [Improved] pass data argument to source callback
  • [Improved] Handle exceptions inside postProcess
  • [Improved] #568 ext-dnd: Auto-expanding of collapsed nodes should also work when dropping is not allowed
  • [Improved] #567 ext-dnd: fix revert position
  • [Improved] #565 ext-dnd: fix intermediate display of wrong icon (sending 'over' after 'enter')
  • [Fixed] #569 node.navigate does not return a Promise object
  • [Fixed] #563 tree.reactivate(false) sets fancytree-treefocus and tree.reactivate(true) doesn't set keyboard focus
  • [Fixed] #562 Node span tag leaks outside table cell
  • [Fixed] #526 tree.setFocus() does not set keyboard focus
  • Updated to jQuery 1.12.1
  • Updated grunt devDependencies
  • Add jQuery 3.0 beta to test suite
  • Added LICENSE.txt to dist

v2.15.1 (2016-02-24)

  • [Added] [ext-clones] new method node.setRefKey(refKey)
  • [Improved] load error reporting
  • Updated to jQuery 1.12.0
  • Updated grunt devDependencies

v2.14.0 (2016-01-12)

  • [Changed] Renamed class fancytree-statusnode-wait to fancytree-statusnode-loading
  • [Added] new event renderStatusColumns
  • [Deprecated] ext-table option customStatus. Use renderStatusColumns instead
  • [Added] new event clickPaging
  • [Added] new mode nodata for use with node.setStatus()
  • [Added] new method node.addPagingNode()
  • [Added] new method node.replaceWith()
  • node.statusNodeType
  • [Added] new method node.getSelectedNodes()
  • [Added] Helper class glyphicon-spin to allow rotating loading icon with bootstrap
  • [Improved] serialize load requests
  • [Improved] Be more robust if site css defines custom li:before
  • [Improved] ext-table: Define table row templates in <tbody>
  • [Improved] ext-table: <thead> is now optional if <tbody> contains <td>s

v2.14.0 (2015-12-20)

  • [Added] options.icon option/callback.
  • Valid values are true, false, a string containing a class name or image url, or a callback returning that.
  • [Changed] node.icon option. Valid values are true, false, or a string containing a class name or image url.
  • This option existed before, but was stored in the node.data.icon namespace, and did not accept class names.
  • [Deprecated] options.iconClass callback: use options.icon instead
  • [Deprecated] options.icons: use options.icon instead
  • [Deprecated] node.data.iconclass option: use node.icon instead
  • [Deprecated] node.data.icon option: use node.icon instead
  • [Added] tree.clear() method.
  • [Added] ext-persist: new event beforeRestore
  • [Fixed] table-ext: nodeSetExpanded triggers redundant events

v2.13.1-0 (2015-11-16)

  • [Changed] If a node is initalized as lazy: true, and children: [], treat it as 'loaded leaf node'.
  • This is consistent with a lazy node that has no children property at all (i.e. undefined). This would issue a lazyLoad event and a resopnse of [] would mark the node as leaf node.
  • [Added] new function $.ui.fancytree.getTree()
  • [Added] ext-filter methods node.isMatched() and tree.isFilterActive()
  • [Added] CSS for ext-childcounter badges is now part of the standard themes
  • [Added] ext-childcounter method node.updateCounter()`
  • [Fixed] data-hideCheckbox="true"
  • [Fixed] activeVisible option does not work on init
  • [Fixed] ExtPersist requires cookie.js even when not using cookies

v2.12.0-0 (2015-07-26)

  • [Changed] Documented iconClass callback and changed signature from iconClass(node) to iconClass(event, data)
  • [Added] ext-dnd events initHelper and updateHelper
  • [Added] ext-dnd option smartRevert
  • [Added] sample for multi-node drag'n'drop
  • [Added] Sample for modifier keys to control copy/move behavior while dragging
  • [Added] highlight and fuzzy options to ext-filter
  • [Added] fireActivate option to ext-persist (default: true)
  • [Added] new methods tree.findFirst() / .findAll()
  • [Improved] clearFilter() performance
  • [Improved] dnd registers global handlers to cancel on ESC and mousedown
  • [Fixed] Font color while editing node title with bootstrap skin
  • [Fixed] Glyph plugin: Missing margin-left for span.fancytree-custom-icon
  • [Fixed] node.render(true) moves the node to the end of the list
  • [Fixed] focusOnClick option is ignored for tables, if 'dnd' is listed after 'table' extension
  • [Fixed] Double clicking on expander with lazy-load causes assertion error

v2.11.0-0 (2015-07-26)

  • [Changed] Adding fancytree-plain class to container (if not table), allowing for more efficient css
  • [Changed] Use data-uris to inline loading.gif image
  • [Changed] Use padding-left instead of margin-left for table indent
  • [Changed] Add node argument to the toDict() callback
  • [Improved] Nicer bootstrap theme and added table to the example
  • [Improved] ext-dnd supports ext-glyph
  • [Improved] Add counter badges to ext-filter
  • [Fixed] Win8 theme jumpy hover effects
  • [Fixed] ext-edit fails with ext-table, when edit was cancelled
  • [Fixed] ext-table: render(deep) does not work
  • [Fixed] Wide plugin not present in jquery.fancytree-all.min.js

v2.10.2 (2015-07-02)

  • [Fixed] Add dist/skin-custom-1 sample
  • [Fixed] Don't collapse root folder when last node is removed

v2.10.1 (2015-06-28)

  • Revert dist folder layout to v2.9.0, but add dist/skin-common.less

v2.10.0 (2015-06-27)

  • [Changed] New dist folder layout: moved skin-* folders into src/ folder
  • (Note: this change was reverted in v2.10.1)
  • [Improved] Update to jQuery UI 1.11.4, jQuery 1.11.3
  • [Improved] add dist/skin-common.less to fix theme imports
  • [Improved] Support js-cookie (still compatible with jquery-cookie)
  • [Fixed] selected and unselectable shows unchecked checkbox
  • [Fixed] table + themeroller: apply color to TR
  • [Fixed] filterBranches shall use opts to allow autoExpand
  • [Fixed] enter key not handled correctly
  • [Fixed] After deleting last child, parent node remains expanded
  • [Fixed] destroy not removing nodes with ext-table
  • [Fixed] Autoscroll fails with lazyloading returning empty list
  • [Improved] Update to jQuery UI 1.11.4, jQuery 1.11.3

v2.9.0 (2015-04-19)

  • [Changed] ext-filter: tree.filterNodes(filter, opts) now accept an opts object instead of leavesOnly
  • [Improved] only raise exception about data being a string if dataType is "json"
  • [Added] New option autoExpand for [ext-filter]
  • [Fixed] rare exception in dnd events
  • [Fixed] nodeSetActive not returning promise
  • [Fixed] Keyboard focus not working when using dnd extension

v2.8.0 (2015-02-09)

  • [Changed] Deprecated ext-menu (was never officially supported
  • [Improved] Bluring the widget will now blur the focused node too.
  • [Improved] Persistence will only set node focus if widget had focus (otherwise only activate the node).
  • [Improved] Set default focus on first keypress to active node (first node otherwise)
  • [Improved] Accept ECMAScript 6 Promise as source
  • [Added] _superApply() for hook handlers.
  • [Added] eventToString() supports mouse events
  • [Fixed] persistence for focus (when using non-cookie storage)
  • [Fixed] Exception on autoscrolling filtered trees

v2.7.0 (2014-12-22)

  • [CHANGED] Dropped fx option. Use toggleEffect instead.
  • [CHANGED] 'win8' and 'bootstrap' skins where modified to highlight the title span instead of the node span, in order to be compatible with [ext-wide]. The original skins are available as 'skin-win8-n' and 'skin-bootstrap-n' respectively.
  • [Added] ext-wide extension (experimental)
  • [Added] LESS files to distribution
  • [Added] Publish on cdnjs
  • [Improved] tree.reactivate() returns a promise
  • [Fixed] Gaps when filtering in hide mode
  • [Fixed] wrong image on hovers
  • [Fixed] Standard browser behavior prevented (e.g. zoom with Ctrl+'+'/'-')
  • [Fixed] Suppress warning, when dropping top- on top-node

v2.6.1 (2014-12-22)

  • [CHANGED] Dropped fx option. Use toggleEffect instead.
  • [CHANGED] 'win8' and 'bootstrap' skins where modified to highlight the title span instead of the node span, in order to be compatible with [ext-wide]. The original skins are available as 'skin-win8-n' and 'skin-bootstrap-n' respectively.
  • [Added] ext-wide extension (experimental)
  • [Fixed] Gaps when filtering in hide mode (patch by @lefunque)
  • [Fixed] wrong image on hovers
  • [Fixed] Standard browser behavior prevented (e.g. zoom with Ctrl+'+'/'-')
  • [Fixed] Suppress warning, when dropping top- on top-node  

v2.5.1 (2014-11-29)

  • [Added] Option focusOnSelect to set focus when node is checked by a mouse click (default: false)
  • [Added] restore event, sent after ext-persist has restored the tree state
  • [Improved] Better navigation performance when skipping hidden nodes

v2.5.0 (2014-11-24)

  • [CHANGED] [ext-persist] overrideSource option now defaults to true
  • [Added] [ext-filter] Option autoApply re-applies filter on lazy loading (on by default)
  • [Added] quicksearch: navigate to next node by typing the first letters
  • [Improved] [ext-dnd] Make draggable helper and parent configurable
  • [Improved] Add class fancytree-unselectable to respective nodes and dimm unselectable checkboxes
  • [Improved] Update to jQuery 1.1.11, jQuery UI 1.11.2
  • [Improved] New mode 'firstChild' for node.addNode()
  • [Fixed] Fix problem where minExpandLevel was not expanding root node
  • [Fixed] dnd.focusOnClick for jQuery UI 1.11
  • [Fixed] [ext-persist] with selectMode 3

v2.4.2 (2014-11-15)

  • [Improved] Update to jQuery 1.1.11, jQuery UI 1.11.1
  • [Improved] [ext-dnd] Make draggable helper and parent configurable
  • [Improved] Add class fancytree-unselectable to respective nodes and dimm unselectable checkboxes
  • [Fixed] Fix problem where minExpandLevel was not expanding root node
  • [Fixed] dnd.focusOnClick for jQuery UI 1.11

v2.4.1 (2014-09-24)

  • [Fixed] Regression

v2.4.0 (2014-09-20)

  • [CHANGED] Renamed dist/jquery.fancytree-custom.min.js to jquery.fancytree-all.min.js
  • [CHANGED] ext-edit callbacks no longer pass data.value (use data.input.val() instead).
  • [Added] New option id to override default tree id
  • [Added] New argument stopOnParents for tree.generateFormElements()
  • [Added] CDN support (http://www.jsdelivr.com/#!jquery.fancytree)
  • [Added] New method editCreateNode() (ext-edit)
  • [Added] node.isRootNode() and node.isTopLevel()
  • [Improved] node.load() should resolve 'ok', if node is already loaded
  • [Improved] minExpandLevel does not auto-expand
  • [Improved] Allow HTML in tooltips
  • [Fixed] crash in scrollIntoView() when parent is window
  • [Fixed] Checkbox doesn't show with Glyph + Table
  • [Deprecated] node.isRoot(). Use node.isRootNode() instead
  • [Fixed] Fix hasChildren() when children = []
  • [Fixed] ajax LoadError not updated in StatusNode with Table ext

v2.3.1 (2014-08-25)

  • node.load() should resolve 'ok', if node is already loaded
  • minExpandLevel does not auto-expand
  • Fixed: Checkbox doesn't show with Glyph + Table.

v2.3.0 (2014-08-15)

  • [CHANGED] renamed (undocumented) event 'loaderror' to 'loadError'
  • [Added] postProcess now allows to signal error conditions (so it becomes easy to handle custom ajax response formats)
  • [Added] node.setStatus()
  • [Improved] loadError allows to return false to prevent default handling
  • [Fixed] Fix moveTo when moving a node to same parent
  • [Fixed] Glyph expander sometimes disappears

v2.2.1 (2014-06-30)

  • Fix moveTo when moving a node to same parent

v2.0.0-10 (2014-04-13)

  • [Added] New method node.appendSibling()
  • [Improved] setExpanded resolves promise after scrollIntoView
  • [Improved] Allow to return false in lazyLoad for manual loading.
  • [Improved] [ext-table] trigger expand event after animations
  • [Improved] [ext-gridnav] skips empty and merged cells
  • [Improved] grunt build no longer depends on tabfix.py
  • [Fixed] selectMode: 1 + "selected": true looks buggy

v2.0.0-9 (2014-04-03)

  • [Added] New helper method $.ui.fancytree.escapeHtml().
  • [Added] [ext-clones] new method node,reRegister(key, refKey)
  • [Added] Support for bower.
  • [Added] dist/ folder to repository
  • [Improved] [ext-edit] handles <, >, ...
  • [Improved] [ext-table] node.render(force) trigger renderColumns event
  • [Fixed] [ext-table] #178 children are not displayed when filtering

v2.0.0-8 (2014-03-10)

  • [BREAKING CHANGE] node.isStatusNode() is now a function (was a property before). Added new property node.statusNodeType.
  • [BREAKING CHANGE] Renamed ext-awesome to ext-glyph
  • [DEPRECATION] Deprecated event lazyload, use lazyLoad (upper case L) instead.
  • [DEPRECATION] Deprecated methods node.lazyLoad() and node.discard(). use load() and resetLazy() instead.
  • [FEATURE] Added node.isUndefined(), isLoaded(), resetLazy(), load(), resetLazy()
  • [FEATURE] [ext-persist] Added option expandLazy for recursive loading (still experimental).
  • [FEATURE] [ext-filter] 'mode: hide' now works with ext-table (still experimental).
  • [FEATURE] node.makeVisible() accepts options, scrolls into view, and returns a promise.
  • [FEATURE] Sample xxl and bootstrap themes.
  • [CHANGE] nodeRenderStatus() is now implicitly called by nodeRenderTitle().
  • This also means that now all markup and css classes are finshed, when renderNode is fired.
  • [CHANGE] Calling setExpanded() on a leaf node fires .done() (not .fail())
  • [CHANGE] Removing the last child node collapses the parent; lazy nodes become empty (not undefined).

v2.0.0-6 (2014-02-09)

  • Added new `opts` argument to setExpanded()

This awesome jQuery plugin is developed by mar10. For more Advanced Usages, please check the demo page or visit the official website.