Tree View header small text goes here...
-
Root node 1
- Initially Selected
- Folder 1
- Folder 2
- Folder 3
-
Initially open
- Disabled node
- Another node
- custom icon class (fontawesome)
- Clickable link node
- Root node 2
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>
<!-- html -->
<div id="jstree-default">
<ul>
<li data-jstree='{"opened":true}' >
Root node 1
<ul>
<li data-jstree='{"opened":true, "selected":true }'>Initially Selected</li>
<li>Folder 1</li>
</ul>
</li>
</ul>
</div>
<script>
$("#jstree-default").jstree({
"plugins": ["types"],
"core": {
"themes": { "responsive": false }
},
"types": {
"default": { "icon": "fa fa-folder text-warning fa-lg" },
"file": { "icon": "fa fa-file text-dark fa-lg" }
}
});
</script><!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>
<!-- html -->
<div id="jstree-checkable"></div>
<script>
$("#jstree-checkable").jstree({
"plugins": ["wholerow", "checkbox", "types"],
"core": {
"themes": { "responsive": false },
"data": [{
"text": "Same but with checkboxes",
"children": [{
"text": "initially selected",
"state": { "selected": true }
}, {
"text": "Folder 1"
}]
]},
"Root node 2"
]},
"types": {
"default": { "icon": "fa fa-folder text-primary fa-lg" },
"file": { "icon": "fa fa-file text-success fa-lg" }
}
});
</script>
All the opened & selected nodes will be saved in the user's browser.
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>
<!-- html -->
<div id="jstree-drag-and-drop"></div>
<script>
$("#jstree-drag-and-drop").jstree({
"plugins": ["contextmenu", "dnd", "state", "types"],
"core": {
"themes": { "responsive": false },
"check_callback": true,
"data": [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": { "selected": true }
}, {
"text": "Folder 1"
}
},
"Another Node"
]
},
"types": {
"default": { "icon": "fa fa-folder text-warning fa-lg" },
"file": { "icon": "fa fa-file text-warning fa-lg" }
},
"state": { "key": "demo2" }
});
</script>
The tree nodes are loaded from date_root.json via ajax.
<!-- required files -->
<link href="../assets/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="../assets/plugins/jstree/dist/jstree.min.js"></script>
<!-- html -->
<div id="jstree-ajax"></div>
<script>
$("#jstree-ajax").jstree({
"plugins": ["dnd", "state", "types"],
"core": {
"themes": { "responsive": false },
"check_callback": true,
"data": {
"url": function(node) {
return node.id === "#" ? "../assets/js/demo/json/data_root.json" : "../assets/js/demo/json/" + node.original.file;
},
"data": function(node) {
return {
"id": node.id
};
},
"dataType": "json"
}
},
"types": {
"default": { "icon": "fa fa-folder text-warning fa-lg" },
"file": { "icon": "fa fa-file text-warning fa-lg" }
}
});
</script>