How to Create Treeview with Bootstrap and jQuery

Hi! Today let's see about creating treeview using bootstrap and jquery. A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap.

And I found out a good library called 'Bootstrap Treeview'. It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons, checkboxes and filters etc.

Building Treeview with Bootstrap:

Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries,

Bootstrap CSS
jQuery
Bootstrap Treeview

These libraries are available in the cdn, so you can load them directly on your projects without downloading. Here is the procedure.

Step-1) Load Stylesheets

First load the required style sheets into your html file. You need to link both 'bootstrap' and 'bootstrap treeview' css files.


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" />

Step-2) Load JavaScript Libraries

Next you have to load the java script files. Be sure to load jquery before tree view to avoid dependency issues.


<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"></script>

Step-3) Create Placeholder for Tree View

Next add an html container to work as a placeholder for the tree view. Just a div block would do.


<div id="myTree"></div>

Step-4) Define JSON Data Structure

Now define the JSON structure required to hold the hierarchical data that will be displayed on the tree view menu.


var treeData = [
    {
        text: "Parent-Item-1",
        nodes: [
            {
                text: "Child-Item-1",
                nodes: [
                    {
                        text: "Grandchild-Item-1"
                    },
                    {
                        text: "Grandchild-Item-2"
                    }
                ]
            },
            {
                text: "Child-Item-2"
            }
        ]
    },
    {
        text: "Parent-Item-2"
    },
    {
        text: "Parent-Item-3"
    },
    {
        text: "Parent-Item-4"
    },
    {
        text: "Parent-Item-5"
    }
];

Step-5) Render the Treeview

Finally, display the tree structure in the placeholder element we have created in Step-3. For that, bind the treeview() method to the 'div' container and pass the json data to it.


$('#myTree').treeview({
    data: treeData
});

Above script will produce a tree view similar to this,

Read: Create Dynamic Treeview using PHP, MySQL and AJAX

Complete Script: index.html


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Treeview Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="col-sm-4">
        <div id="myTree"></div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var treeData = [
            {
                text: "Parent-Item-1",
                nodes: [
                    {
                        text: "Child-Item-1",
                        nodes: [
                            {
                                text: "Grandchild-Item-1"
                            },
                            {
                                text: "Grandchild-Item-2"
                            }
                        ]
                    },
                    {
                        text: "Child-Item-2"
                    }
                ]
            },
            {
                text: "Parent-Item-2"
            },
            {
                text: "Parent-Item-3"
            },
            {
                text: "Parent-Item-4"
            },
            {
                text: "Parent-Item-5"
            }
        ];
        $('#myTree').treeview({
            data: treeData
        });
    });
    </script>
</body>
</html>

In our example we have built a basic tree. But the plug-in offers several options to customize the appearance and behavior of the menu. Like changing colors, adding icons, badges and hyperlinks to the node items. Check here to know more about customizing options.

Read Also:

It's a hassle-free way to build a hierarchical tree-view using the bootstrap treeview plug-in. It works well with Apps that use bootstrap. I hope this post is useful for you. Please don't forget to share it on social networks if you like it.

بحث هذه المدونة الإلكترونية

gora