nhmvienna/bs5treeview

Bootstrap 5 Treeview

Bootstrap 5 Tree View

this is a fork of https://github.com/chniter/bstreeview. For use with bootstrap 5 the attributes have been changed from data-target and data-toggle to the new data-bs-target and data-bs-toogle syntax.

A very simple plugin to build a basic and elegant Treeview with boostrap 5.

Dependencies

Where provided these are the actual versions bootstrap-treeview has been tested against.

• Bootstrap v5)
• jQuery v3.4.1 (>= 1.9.0)

Usage

Add the following resources for the bootstrap-treeview to function correctly.

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

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

The component will bind to any existing DOM element.

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

Basic usage may look something like this.

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

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

Data Structure

In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.

Example

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"
  }
];

This property text is required to display nodes.

{
  text: "Node 1"
}

Node Properties

text

String Mandatory

The text value displayed for a given tree node.

icon

String Optional

The icon 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

Open node link on new browser Tab, default is true.

// Example: initializing the bstreeview
$('#tree').bstreeview({
  data: data,
  expandIcon: 'fa fa-angle-down fa-fw',
  collapseIcon: 'fa fa-angle-right fa-fw',
  indent: 1.25,
  parentsMarginLeft: '1.25rem',
  openNodeLinkOnNewTab: true
});

Methods

Events

Copyright and Licensing

Copyright 2020 Sami CHNITER

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

bs5treeview's Issues

How to reinitialize the bs5treeview?

Hi,

On my page, I have more than one button. When I click on each button, I need to load the data in the tree view. When I click on any button the very first time then it works fine but after that, if I click on any other button then the data is not loading in a tree.

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

// Assume I am calling the below function whenever any button is clicked
function showTreeView() {
     
     $('#tree').empty();
     $('#tree').bstreeview({ 
           data: getTreeData()
     });
}

Can you please let me know how can I reinitialize the tree?

Remove jQuery dependency

As Bootstrap 5+ has shifted away from jQuery it would be better to not use jQuery in this plugin.

Disable default expanded icons if other icons are present

Line 134

 if (node.nodes) {
                   if (!node.icon){
                      var treeItemStateIcon = $(templates.treeviewItemStateIcon)
                          .addClass((node.expanded)?_this.settings.expandIcon:_this.settings.collapseIcon);
                      treeItem.append(treeItemStateIcon);
                  }
              }

Can an onClick method work here please?

Apart from an HREF element can I get onClick functionality so that I can run a JS function when a node is clicked please?
What I'm aiming for here is to have a treeview in a column to the left and a data area to the right, the contents of which changes as nodes are clicked.
Thanks in advance
Arthur

Sub nodes do not open upon click

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to index.html page in the src folder
2. Click on Inbox

Expected behavior
I expect the inbox node to be open but it stays close. The chevron is changed, however.

Desktop (please complete the following information):

• OS: Windows
• Browser Edge
• Version: 99

Additional context
The toggle functionality does not seem to work when the HTML is generated. jQuery could help you out here by adding the following code to the if statement on line 75 of the bstreeview.js file:

$($(this).attr("data-bs-target")).collapse('toggle');