Example: Initialization Methods
Use different methods to initialize the tree (Ajax, embedded <ul>,
embedded JSON).
LoadData Tutorial
for details.
Skin: XP Vista (classic Dynatree) Win7 Win8 Win8-N Win8 xxl Lion
destroy all Source code
$(":ui-fancytree").fancytree("destroy");
init all Source code
$(".sampletree").fancytree();
Reload() #1 Source code
$.ui.fancytree.getTree("#tree1").reload([
{title: "node1"},
{title: "node2"}
]).done(function(){
alert("reloaded");
});
Set 'source' option (all) Source code
$(".sampletree").fancytree("option", "source", [
{title: "node1"}
]);
Load from embedded <UL> markup:
simple node (no explicit id, so a default key is generated)
Define key and tooltip using 'id' and 'title' attributes
item2 with html inside a span tag
this nodes adds class 'nolink', so no <a> tag is generated
using single a-tag to pass href (this would be clickable even if JavaScript is off)
defining custom node.data.foo = 'bar' using a data-foo attribute
defining node.data.foo = 'bar' using a data-json attribute
Folder with some children
Sub-item 3.1
Sub-item 3.1.1
Sub-item 3.1.2
Sub-item 3.2
Sub-item 3.2.1
Sub-item 3.2.2
Document with some children (expanded on init)
Sub-item 4.1 (active and focus on init)
Sub-item 4.1.1
Sub-item 4.1.2
Sub-item 4.2
Sub-item 4.2.1
Sub-item 4.2.2
Lazy loading folder
Lazy loading folder (expand on init)
simple node (no explicit id, so a default key is generated) Define key and tooltip using 'id' and 'title' attributes item2 with html inside a span tag this nodes adds class 'nolink', so no <a> tag is generated using single a-tag to pass href (this would be clickable even if JavaScript is off) defining custom node.data.foo = 'bar' using a data-foo attribute defining node.data.foo = 'bar' using a data-json attribute Folder with some children Document with some children (expanded on init) Sub-item 4.1 (active and focus on init) Sub-item 4.2 Lazy loading folder Lazy loading folder (expand on init)
Load from Ajax data:
Load from embedded JSON data:
jquery.fancytree.js project home
Link to this page
Example Browser
View source code
Fancytree @VERSION, jQuery UI 1.13.2, jQuery 3.6.0