<div id="kt_tree_1" class="tree-demo">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected </a>
</li>
<li data-jstree='{ "icon" : "flaticon2-gear text-success " }'>
custom icon URL
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
<li data-jstree='{ "icon" : "flaticon2-rectangular text-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
<a href="http://www.keenthemes.com">
Clickable link node </a>
</li>
</ul>
</div>
$("#kt_tree_1").jstree({
"core": {
"themes": {
"responsive": false
}
},
"types": {
"default": {
"icon": "fa fa-folder"
},
"file": {
"icon": "fa fa-file"
}
},
"plugins": ["types"]
});
<div id="kt_tree_2" class="tree-demo">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected </a>
</li>
<li data-jstree='{ "icon" : "flaticon2-analytics text-success " }'>
custom icon URL
</li>
<li data-jstree='{ "opened" : true }'>
initially open
<ul>
<li data-jstree='{ "disabled" : true }'>
Disabled Node
</li>
<li data-jstree='{ "type" : "file" }'>
Another node
</li>
</ul>
</li>
<li data-jstree='{ "icon" : "flaticon2-user text-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
<a href="https://keenthemes.com/">
Clickable link node </a>
</li>
</ul>
</div>
$('#kt_tree_2').jstree({
"core": {
"themes": {
"responsive": false
}
},
"types": {
"default": {
"icon": "fa fa-folder text-warning"
},
"file": {
"icon": "fa fa-file text-warning"
}
},
"plugins": ["types"]
});
// handle link clicks in tree nodes(support target="_blank" as well)
$('#kt_tree_2').on('select_node.jstree', function(e, data) {
var link = $('#' + data.selected).find('a');
if (link.attr("href") != "#" && link.attr("href") != "javascript:;" && link.attr("href") != "") {
if (link.attr("target") == "_blank") {
link.attr("href").target = "_blank";
}
document.location.href = link.attr("href");
return false;
}
});
<div id="kt_tree_3" class="tree-demo">
</div>
$('#kt_tree_3').jstree({
"plugins": ["wholerow", "checkbox", "types"],
"core": {
"themes": {
"responsive": false
},
"data": [{
"text": "Same but with checkboxes",
"children": [{
"text": "initially selected",
"state": {
"selected": true
}
}, {
"text": "custom icon",
"icon": "fa fa-warning text-danger"
}, {
"text": "initially open",
"icon": "fa fa-folder text-default",
"state": {
"opened": true
},
"children": ["Another node"]
}, {
"text": "custom icon",
"icon": "fa fa-warning text-waring"
}, {
"text": "disabled node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}]
},
"And wholerow selection"
]
},
"types": {
"default": {
"icon": "fa fa-folder text-warning"
},
"file": {
"icon": "fa fa-file text-warning"
}
},
});
<div id="kt_tree_4" class="tree-demo">
</div>
$("#kt_tree_4").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
"data": [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "flaticon2-hourglass-1 text-danger"
}, {
"text": "Initially open",
"icon": "fa fa-folder text-success",
"state": {
"opened": true
},
"children": [{
"text": "Another node",
"icon": "fa fa-file text-waring"
}]
}, {
"text": "Another Custom Icon",
"icon": "flaticon2-drop text-waring"
}, {
"text": "Disabled Node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [{
"text": "Item 1",
"icon": "fa fa-file text-waring"
},
{
"text": "Item 2",
"icon": "fa fa-file text-success"
},
{
"text": "Item 3",
"icon": "fa fa-file text-default"
},
{
"text": "Item 4",
"icon": "fa fa-file text-danger"
},
{
"text": "Item 5",
"icon": "fa fa-file text-info"
}
]
}]
},
"Another Node"
]
},
"types": {
"default": {
"icon": "fa fa-folder text-primary"
},
"file": {
"icon": "fa fa-file text-primary"
}
},
"state": {
"key": "demo2"
},
"plugins": ["contextmenu", "state", "types"]
});
<div id="kt_tree_5" class="tree-demo">
</div>
$("#kt_tree_5").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
"data": [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "flaticon2-warning text-danger"
}, {
"text": "Initially open",
"icon": "fa fa-folder text-success",
"state": {
"opened": true
},
"children": [{
"text": "Another node",
"icon": "fa fa-file text-waring"
}]
}, {
"text": "Another Custom Icon",
"icon": "flaticon2-bell-5 text-waring"
}, {
"text": "Disabled Node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [{
"text": "Item 1",
"icon": "fa fa-file text-waring"
},
{
"text": "Item 2",
"icon": "fa fa-file text-success"
},
{
"text": "Item 3",
"icon": "fa fa-file text-default"
},
{
"text": "Item 4",
"icon": "fa fa-file text-danger"
},
{
"text": "Item 5",
"icon": "fa fa-file text-info"
}
]
}]
},
"Another Node"
]
},
"types": {
"default": {
"icon": "fa fa-folder text-success"
},
"file": {
"icon": "fa fa-file text-success"
}
},
"state": {
"key": "demo2"
},
"plugins": ["dnd", "state", "types"]
});
<div id="kt_tree_6" class="tree-demo">
</div>
$("#kt_tree_6").jstree({
"core": {
"themes": {
"responsive": false
},
// so that create works
"check_callback": true,
"data": {
"url": function(node) {
return HOST_URL + "api/jstree/ajax_data.php";
},
"data": function(node) {
return {
"parent": node.id
};
}
}
},
"types": {
"default": {
"icon": "fa fa-folder text-primary"
},
"file": {
"icon": "fa fa-file text-primary"
}
},
"state": {
"key": "demo3"
},
"plugins": ["dnd", "state", "types"]
});
[{
"id": "node_158179869559930",
"icon": "fa fa-folder icon-lg kt-font-warning",
"text": "Node 1581798695",
"children": false
}, {
"id": "node_15817986951142",
"icon": "fa fa-folder icon-lg kt-font-success",
"text": "Node 1581798695",
"children": false
}, {
"id": "node_158179869568539",
"icon": "fa fa-file icon-lg kt-font-warning",
"text": "Node 1581798695",
"children": true
}]
