Dynamic Tree List Plugin For Bootstrap - BSTreeView

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.