jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's
Home or
Github Repo.
Custom Icons & Clickable Nodes
Here's a jsTree example with custom icons and clickable nodes. For more info, please visit the official website.
-
Root node 1
- Initially selected
- custom icon URL
-
initially open
- Disabled Node
- Another node
- Custom icon class (keenicons)
- Clickable link node
$('#kt_docs_jstree_customicons').jstree({
"core" : {
"themes" : {
"responsive": false
}
},
"types" : {
"default" : {
"icon" : "ki-outline ki-older text-warning"
},
"file" : {
"icon" : "ki-outline ki-file text-warning"
}
},
"plugins": ["types"]
});
// handle link clicks in tree nodes(support target="_blank" as well)
$('#kt_docs_jstree_customicons').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_docs_jstree_customicons">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected </a>
</li>
<li data-jstree='{ "icon" : "ki-outline ki-user text-success fs-4" }'>
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" : "ki-outline ki-notification-status text-danger fs-7" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "file" }'>
<a href="https://keenthemes.com/">
Clickable link node </a>
</li>
</ul>
</div>
2024©
Keenthemes
