Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

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.

Read More – jQuery Dynamic Hierarchy Treeview Plugin | jsTree

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

Read More – Vue Treeview Structure Implementation In Javascript Dynamically

Node Properties

text

String Mandatory

The text value is displayed for a given tree node.

icon

String Optional

The icon is displayed on a given node.

href

String Optional

A custom href attribute value for a given node.

class

String Optional

A class name or space-separated list of class names to add to a given node.

id

String Optional

ID attribute value to assign to a given node.

expanded

Boolean Optional

Set to true to expand this node’s children initially

Options

data

String Mandatory

Json or string array of nodes.

expandIcon

String Optional

Expand icon class name, default is fa fa-angle-down fa-fw.

collapseIcon

String Optional

Collapse icon class name, default is fa fa-angle-right fa-fw.

indent

number with decimals Optional

Custom indent between node levels (rem), default is 1.25.

parentsMarginLeft

String Optional

margin-left value of parent nodes, default is 1.25rem.

openNodeLinkOnNewTab

Boolean Optional

Dynamic Collapsible Tree View For Bootstrap 5, Bootstrap 5 Tree View Plugin/Github, bootstrap treeview not working, dynamic tree structure using jquery

Read More – 

Hierarchical jQuery Folder Tree Structure Plugin In HTML CSS | zTree
Bootstrap 5 To Create Vertical And Nested Collapsible Tree Menu Plugin


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.

Share