Dynamic Tree List Plugin For Bootstrap - BSTreeView

Dynamic Tree List Plugin For Bootstrap - BSTreeView
File Size: 12.9 KB
Views Total: 2903
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.

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
});

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.