jquery.fancytree

js Styles
JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
Version 2.38.5 License MIT
Keywords
ajaxecosystem:jqueryjquery-pluginlazytabletabletreetreetreegrid
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.38.5
- 2.38.4
- 2.38.3
- 2.38.2
- 2.38.1
- 2.38.0
- 2.37.0
- 2.36.1
- 2.36.0
- 2.35.0
- 2.34.0
- 2.33.0
- 2.32.0
- 2.31.0
- 2.30.2
- 2.30.1
- 2.30.0
- 2.29.1
- 2.29.0
- 2.28.1
- 2.28.0
- 2.27.0
- 2.26.0
- 2.25.0
- 2.24.0
- 2.23.0
- 2.22.5
- 2.22.4
- 2.22.3
- 2.22.2
- 2.22.1
- 2.22.0
- 2.21.0
- 2.20.0
- 2.19.0
- 2.18.0
- 2.17.0
- 2.16.1
- 2.16.0
- 2.15.0
- 2.14.0
- 2.13.0
- 2.12.0
- 2.11.0
- 2.10.2
- 2.10.1
- 2.10.0
- 2.9.0
- 2.8.1
- 2.8.0
- 2.7.0
- 2.6.0
- 2.5.1-0
<script src=" https://cdn.jsdelivr.net/npm/jquery.fancytree@2.38.5/dist/jquery.fancytree-all.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/jquery.fancytree@2.38.5/dist/skin-win8/ui.fancytree.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
Fancytree
Fancytree is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading.
NOTE
Fancytree is considered feature-complete.
The code is still maintained and bugfixes will be commited.
However do not expect new major features.
For a modernized and more capable alternative, consider upgrading to Wunderbaum.
Demo
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.