Dynamic Tree List Plugin For Bootstrap - BSTreeView
File Size: | 12.9 KB |
---|---|
Views Total: | 13921 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny (less than 2kb minified) tree view plugin that dynamically renders a collapsible/expandable tree list using Bootstrap 4 list group component.
Useful for generating an SEO-friendly, HTML list based tree view component for representing your hierarchical data defined in JS objects.
The Bootstrap 5 Version is now available here.
How to use it:
1. Download and insert the BSTreeView plugin's files in your project. Make sure you have loaded both jQuery library and Bootstrap framework in the document.
<!-- Stylesheet --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <link href="/path/to/dist/css/bstreeview.min.css" rel="stylesheet" /> <!-- JavaScript --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <script src="/path/to/dist/js/bstreeview.min.js">
2. Load an iconic font for necessary icons. By default the plugin uses Font Awesome for collapse/expand icons.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
3. Define an array of nodes to be rendered in the tree view. Each node has the following properties:
- text: node text
- icon: icon class
- nodes: child nodes
- class: custom CSS class
- href: custom URL
var myData = [ { text: "Node 1", icon: "fa fa-folder", nodes: [ { text: "Node 1-1", icon: "fa fa-folder", nodes: [ { text: "Node 1-1-1", icon: "fa fa-folder", class: "custom-class", href: "#" }, { text: "Node 1-1-2", icon: "fa fa-folder" } ] }, { text: "Node 1-2", icon: "fa fa-folder" } ] }, { text: "Node 2", icon: "fa fa-folder" }, { text: "Node 3", icon: "fa fa-folder" } ];
4. Create an empty container to place the tree.
<div id="tree"></div>
5. Initialize the plugin and populate the tree with your own data.
$('#tree').bstreeview({ data: data: JSON.stringify(myData) });
6. Override the default icon classes.
$('#tree').bstreeview({ expandIcon: 'fa fa-angle-down', collapseIcon: 'fa fa-angle-right' });
7. Specify the indentation of child nodes. Default: 1.25
$('#tree').bstreeview({ indent: 2 });
8. Set the margin area on the left side of parent nodes. Default: '1.25rem'.
$('#tree').bstreeview({ parentsMarginLeft: '1.25rem' });
9. Determine whether to open the link in a new tab. Default: true.
$('#tree').bstreeview({ openNodeLinkOnNewTab: false });
Changelog:
2020-05-18
- v2.0.0
This awesome jQuery plugin is developed by chniter. For more Advanced Usages, please check the demo page or visit the official website.