Extras - Dynamic Trees
Initialization options Data type and data source options
To embed JSON data in the markup, specify data type via data-type attribute and hide is using .hidden class.
[
{"title": "Expanded folder with children", "expanded": true, "folder": true, "children": [
{"key": "1_2", "title": "Expanded sub-item", "expanded": true, "children": [
{"key": "1_2_1", "title": "Active sub-item (active and focus on init)", "active": true, "focused": true},
{"key": "1_2_2", "title": "Basic <i>menu item</i> with <strong class='text-semibold'>HTML support</strong>"}
]},
{"key": "1_3", "title": "Expanded sub-item", "children": [
{"key": "1_3_1", "title": "Sub-item 2.2.1"},
{"key": "1_3_2", "title": "Sub-item 2.2.2"}
]}
]},
{"key": "2", "title": "Menu item with key and tooltip", "extraClasses": "has-tooltip", "tooltip": "Look, a tool tip!"},
{"key": "3", "title": "Collapsed folder", "folder": true, "children": [
{"key": "3_1", "title": "Sub-item 1.1"},
{"key": "3_1", "title": "Sub-item 1.2"}
]},
{"key": "4", "title": "This is a selected item", "selected": true},
{"key": "5", "title": "Document with some children (expanded on init)", "expanded": true, "children": [
{"key": "5_1", "title": "Document sub-item"},
{"key": "5_2", "title": "Another document sub-item", "children": [
{"key": "5_2_1", "title": "Sub-item 2.1.1"},
{"key": "5_2_2", "title": "Sub-item 2.1.2"}
]}
]}
]
Selectable nodes Single an multiple selections
Tree persistence
Store and restore tree status using cookies or local storage: click, expand or select nodes and reload the page.
Toggle checkboxes state
Change checkboxes state programmatically using setSelected() parameter with true or false properties.
Various examples Fancytree examples with options
Toggle state
This example demonstrates the usage of some Fancytree API functions, such as disabling and enabling file tree.
Tree sorting
This example demonstrates a sorting feature of child list by title in 2 ways: full tree and in active nodes only.
- This is a selected item
- Collapsed folder
- Sub-item 1.1
- Sub-item 1.2
The following example demonstrates rendered tree as a table (aka tree grid) and support keyboard navigation in a grid with embedded input controls. Table functionality is based on Fancytree's
table.js extension. The tree table extension takes care of rendering the node into one of the columns. Other columns have to be rendered in the renderColumns event.
| # | Items | Key | Like | |
|---|---|---|---|---|