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.

Must Read: Vue Treeview Structure Implementation In Javascript Dynamically

1. Add the following resources for bootstrap-treeview.

<!-- Required Stylesheets -->
<link href="bootstrap.css" rel="stylesheet">

<!-- Required Javascript -->
<script src="jquery.js"></script>
<script src="bstreeview.js"></script>

2. The component will bind to any existing DOM element.

<div id="tree"></div>

3. The basic usage looks like this.

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}

$('#tree').bstreeview({ data: getTree() });

4. In order to define the desired hierarchical structure of the tree, it is necessary to provide a nested array of JavaScript objects.

var tree = [
  {
    text: "Node 1",
    icon: "fa fa-folder",
    expanded: true,
    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:  "https://google.com"
          },
          {
            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. This property text is required to display the contract.

{
  text: "Node 1"
}

Must Read: 

Vuetify Drag And Drop Draggable Tree View Component | v-treeview
jQuery Dynamic Hierarchy Treeview Plugin | jsTree

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

Must Read: A Tiny and Fast jQuery Treeview Plugin | hummingbird-treeview

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

See Also –

Responsive Draggable & Resizable Dashboard (Grid) for Vue
HTML Select Object Extension with Framework | jQuery treeSelection
Bootstrap 5 To Create Vertical And Nested Collapsible Tree Menu Plugin


See Demo And Download

bootstrap-5-treeview

Official Website(nhmvienna): Click Here

This superior jQuery/javascript plugin is developed by nhmvienna. For extra advanced usage, please go to the official website.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

Leave a Reply

Your email address will not be published. Required fields are marked *