Skip to content
Bootstrap Treeview, A very simple plugin to build a basic and elegant Treeview with bootstrap 4. See the demo:
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

chniter Merge pull request #8 from Flyer53/master
add options for href attribute and class names in tree nodes
Latest commit 07c374a Mar 16, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Feb 20, 2020
dist add href and class options Mar 15, 2020
screeshots Version v1.0.0 Feb 18, 2020
src add href and class options Mar 15, 2020
LICENSE Initial commit Jan 28, 2020
README.md Update README.md Mar 15, 2020
package.json Version v1.0.0 Feb 18, 2020

README.md

Bootstrap 4 Tree View


npm version

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

Bootstrap Tree View Default

Dependencies

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

Getting Started

Install

You can install using npm (recommended):

$ npm install bstreeview

or download manually.

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",
    nodes: [
      {
        text: "Sub Node 1",
        icon: "fa fa-folder",
        nodes: [
          {
            text:  "Sub Child Node 1",
            icon:  "fa fa-folder",
            class: "nav-level-3",
            href:  "#option/1.1.1"
          },
          {
            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"
}

Yes, we can make some options for bstreeview, i will explain them later :p

{
  

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.

Options

// Example: initializing the bstreeview
$('#tree').treeview({
  data: data         // data is required
});

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.

You can’t perform that action at this time.