Treeview
Basic Treeview
-
Root node 1
- Initially selected
- custom icon URL
-
initially open
- Disabled Node
- Another node
- Custom icon class (bootstrap)
- Clickable link node
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<div id="jstree-1">
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected </a>
</li>
<li data-jstree='{ "icon" : "ri-home-4-line 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" : "ri-vip-diamond-line text-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "link" }'>
<a href="http://www.coderthemes.com">
Clickable link node </a>
</li>
</ul>
</div>
Custom Icons & Clickable Nodes
-
Root node 1
- Initially selected
- custom icon URL
-
initially open
- Disabled Node
- Another node
- Custom icon class (bootstrap)
- Clickable link node
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<div id="jstree-2"
<ul>
<li>
Root node 1
<ul>
<li data-jstree='{ "selected" : true }'>
<a href="javascript:;">
Initially selected </a>
</li>
<li data-jstree='{ "icon" : "ri-article-line 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" : "ri-user-line text-danger" }'>
Custom icon class (bootstrap)
</li>
</ul>
</li>
<li data-jstree='{ "type" : "link" }'>
<a href="https://coderthemes.com/">
Clickable link node </a>
</li>
</ul>
</div>
Checkable Tree
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<div id="jstree-3"></div>
Contextual Menu
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<div id="jstree-4"></div>
Drag & Drop
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<div id="jstree-5"></div>
Ajax Data
<!-- jstree css -->
<link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<!-- jstree js -->
<script src="assets/vendor/jstree/jstree.min.js"></script>
<script src="assets/js/pages/demo.jstree.js"></script>
<!-- jstree json -->
[{
"id": "node_1",
"icon": "ri-folder-line icon-lg text-success",
"text": "Node - 1",
"children": false
}, {
"id": "node_2",
"icon": "ri-folder-line icon-lg text-success",
"text": "Node - 2",
"children": false
}, {
"id": "node_3",
"icon": "ri-folder-line icon-lg text-success",
"text": "Node - 3",
"children": false
}]
<div id="jstree-6"></div>