The treeview plug-in based on jQuery and Bootstrap

The treeview plug-in based on jQuery and Bootstrap

The bootstrap-treeview is an awesome plug-in for displaying the hierarchical data in the form of tree view in your web pages. The plug-in is developed using the jQuery and implemented on Bootstrap framework (3+) version.

In this tutorial, I am going to show you a few demos of presenting data in tree view form while you may also see how to set up this plug-in for your website.

A demo of treeview with default settings

First of all, let me start with the simple treeview which is followed by more examples and finally you can see how data for treeview can be set by using the JavaScript object.

In this example, the top parent is created with a child and that child with two children. Have a look by clicking the link or image below:

jQuery treeview default

See online demo and code

A little markup in this demo:

The script for initiating this treeview:

You can see the complete markup and treeview data in the script part of the demo page.

A demo of collapsed treeview as web page loads

In the default treeview, the first node is opened and shows the child of the parent. If you want to show collapsed treeview as the web page loads, this is shown in the example below:

jQuery treeview collapsed

See online demo and code

The script:


You can see, the levels option is used that enables opening a specific node.

Following is a little markup used:

See the complete code on the demo page.

An example of expanded treeview

On the other hand, you may also display the fully expanded tree view on start up. For that, provide a greater number than the number of nodes. For the example, I used 10 for the levels option:

jQuery treeview expand

See online demo and code

Changing the theme of treeview

The default color of the parent and child elements in nodes is black as shown in above demos. You may set the color by using the color option of the plug-in. Any color code can be given there. See this demo where I used red color code:

See online demo and code

The following script is used for setting the color:

Using the icons in treeview

One of the cool features of this treeview Bootstrap plug-in is you may set the desired icons quite easily for the parent and child nodes. For that, use the expandIcon, collapseIcon and nodeIcon options in the jQuery code.

That means you may set different icons for expanded and collapsed states. Have a look on a demo:

bootstrap treeview

See online demo and code

The script:

A demo of colorful treeview

The treeview plug-in has a plenty of options to play with that includes look and feel of the tree view as well. In this example, the color, backColor, onhoverColor, borderColor, selectedColor and selectedBackColor options are used with different color codes.

Have a look:

bootstrap treeview colors

See online demo and code

The script:

A demo of checkable tree

The parent or child of the tree view can be checkable as using this plug-in. One such demo is shown below:

bootstrap treeview check

See online demo and code

For more demos, options, and events supported by this plug-in, follow the link to the developer’s page in the section below.

Setting up treeview plug-in in your website

Follow these steps for setting up this great plug-in on your website.

Step 1:

Download the plug-in from the GitHub website (Credit: jonmiles). Alternatively, grab the files from the demo pages by view source the code.

Step 2:

Include the reference of the Bootstrap CSS file in the <head> section as used in all demos.

Step 3:

Use the markup as required for creating the treeview. Again, you may follow the above demos or many other demos in the plug-in’s developer page.

Step 4:

After that markup, include the reference of jQuery and plug-in JS files:

<script src=”” type=”text/javascript”></script>

<script src=”js/bootstrap-treeview/bootstrap-treeview.min.js”></script>

Adjust the path as per your physical directories.

Step 5:

Use the jQuery code for options like colors, data source for the treeview along with initiating the treeview.

You may see more demos and further detail including data sources on the developer’s page here.