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

Bootstrap 5 Treeview Dynamic Details

Post NameBootstrap Dynamic Treeview
Author Namenhmvienna
CategoryBootstrap, tree
Official PageClick Here
Official Websitegithub.com
Bootstrap v5getbootstrap.com
jQuery v3.4.1 (>= 1.9.0)jquery.com
Publish DateAugust 20, 2021
Last UpdateSeptember 19, 2023
DownloadLink Below
LicenseMIT

How to make use of it:

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

Google-Translate-Dropdown-Customize-With-Country-Flag

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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