Bootstrap Dynamic Tree View With jQuery Plugin – bootstrap-treeview

Other
File Size: 10.59 KB
Views Total: 3855 views
Last Update:September 29, 2022
Publish Date: December 19, 2013
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

A Free jQuery Plugins with treeview plugin web view display with dynamic tree view as checkable, filterable, collapsible, from a JSON schema. Bootstrap tree view Displaying vertical hierarchical tree structures while levering the best that Bootstrap has to offer.

Licensed under the Apache License, Version 2.0.

Pure Bootstrap 3 Tree View with jQuery : Click

How to use :

Add with jQuery library with Bootstrap tree and Twitter Bootstrap’s stylesheet are loaded in Html.

<!-- jQuery and Bootstrap ---->
<link rel="stylesheet" href="bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>

<!--- Bootstrap tree view plugin's files --->

<link rel="stylesheet" href="bootstrap-treeview.css">
<script src="bootstrap-treeview.js"></script>

Create a placeholder element for the tree view.

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

The required JSON structure to hold your hierarchical data.

var myTree = [
    {
      text: "Item 1",
      nodes: [
        {
          text: "Item 1-1",
          nodes: [
            {
              text: "Item 1-1-1"
            },
            {
              text: "Item 1-1-2"
            }
          ]
        },
        {
          text: "Item 1-2"
        }
      ]
    },
    {
      text: "Item 2"
    },
    {
      text: "Item 3"
    }
    ...
];

Render a default tree view inside the DIV container you just created.

$('#default-tree').treeview({
  data: myTree
});

Done

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v1.2.0
  • v1.1.0
  • 1.0.2
  • 1.0.1
  • 1.0.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

You Might Also Like