Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with bootstrap 5, the attributes have been changed from data-target and data-toggle to data-bs-target and data-bs-toggle syntax.
bootstrap 5 treeview, bootstrap treeview bootstrap, dynamic tree view with checkboxes, bootstrap treeview add dynamically, bootstrap treeview json data example, bootstrap tree menu collapse example
How to make use of it:
1. Load each jQuery library and Bootstrap 5 framework within the doc.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Load the minified version of the bstreeview plugin.
<link href="dist/css/bstreeview.min.css" rel="stylesheet" /> <script src="dist/js/bstreeview.min.js"></script>
3. Create an empty DIV container to carry the tree view.
<div id="tree"> </div>
4. Prepare your information in an array of JS objects as follows.
var treeData = [ { text: "Node 1", icon: "fa fa-folder", // requires font awesome nodes: [ { text: "Sub Node 1", icon: "fa fa-folder", nodes: [ { id: "sub-node-1", text: "Sub Child Node 1", icon: "fa fa-folder", class: "nav-level-3", href: " " }, { text: "Sub Child Node 2", icon: "fa fa-folder" } ] }, { text: "Sub Node 2", icon: "fa fa-folder" } ] }, { text: "Node 2", icon: "fa fa-folder" }, { text: "Node 3", icon: "fa fa-folder" }, { text: "Node 4", icon: "fa fa-folder" }, { text: "Node 5", icon: "fa fa-folder" } ];
5. Generate a primary tree view from the info you provide.
$('#tree').bstreeview({ data: treeData });
6. Override the default expand/collapse icon classes.
$('#tree').bstreeview({ expandIcon: 'fa fa-angle-down', collapseIcon: 'fa fa-angle-right' });
7. Specify the indentation of child nodes.
$('#tree').bstreeview({ indent: 2 });
8. Set the margin area on the left side of parent nodes.
$('#tree').bstreeview({ parentsMarginLeft: '1.25rem' });
9. Determine whether or not to open the link in a brand new tab.
$('#tree').bstreeview({ openNodeLinkOnNewTab: false });
Dynamic Collapsible Tree View For Bootstrap 5, Bootstrap 5 Tree View Plugin/Github, bootstrap treeview not working, dynamic tree structure using jquery
See Demo And Download
Official Website(nhmvienna): Click Here
This superior jQuery/javascript plugin is developed by nhmvienna. For extra advanced usage, please go to the official website.
Be First to Comment