jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's
Home or
Github Repo.
Basic Example
Here's a basic jsTree example. 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 (bootstrap)
- Clickable link node
Note! Opened and selected nodes will be saved in the user's browser, so when returning to the same tree the previous state will be restored.
$('#kt_docs_jstree_basic').jstree({
"core" : {
"themes" : {
"responsive": false
}
},
"types" : {
"default" : {
"icon" : "ki-outline ki-folder"
},
"file" : {
"icon" : "ki-outline ki-file"
}
},
"plugins": ["types"]
});<div id="kt_docs_jstree_basic">
<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-geolocation 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-message-text-2 text-danger fs-7" }'>
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>
2024©
Keenthemes
