jQuery treeview with checkboxes: 2 examples with Bootstrap

The jQuery Treeview plug-in

The treeview plug-in is used to create a tree of data that can be presented to the users along with checkboxes. The plug-in name is treeview that you may download from the Github website here.

The Treeview plug-in Video

See the following section for live examples of using the treeview jQuery plug-in.

The example will also show how to use the checkbox and get the selected checkbox values inside the tree’s data.

A demo of using tree view plug-in with checkboxes

Basically, you need to use the <ul> and <li>tags for creating the nodes and branches of the tree. For creating the main node, just open the <ul> tag and create the required nodes for that level. If you want to create branches, start another <ul> and <li> tags combinations before closing the first <ul> tag. See the following demo and code:

jQuery treeview

See online demo and code

You need to include the jQuery library along with plug-in JS file that you may get from the downloaded package or view source the demo page and download it in your system.

Apart from that, the arrows are based on font-awesome CSS file, so also include its reference in the <head> section along with Bootstrap’s CSS (optional):

 <link type=”text/css” rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css” />

<link type=”text/css” rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css” />

Include the JS files above the body closing tag:

 <script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>

<script src=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js”></script>

<script src=”js/jquery-treeview/logger.js”></script>

<script src=”js/jquery-treeview/treeview.js”></script>

The markup:

 

How to set the value of each branch?

By using the data attribute, data-value you may set the value of each node or branch of the tree. For example:

<li data-value=”jQuery append”>jQuery append</li>

How to access the selected values?

By using the selectedValues option of the treeview plugin in jQuery code, this is how you may access the selected value:

 

How to set the initial selected checkboxes in tree

Us the data option in jQuery code for values being checked in the tree structure:

 

Get the complete code from the demo page.

How to create multi-level tree?

As mentioned earlier, you need to use the <ul> and <li> tags for creating parents and child in the tree. For creating multi-level tree as using this plug-in, just start another tag of <ul> <li> inside the parent <ul> tag.  For example:

 

In above example, three levels are created i.e. Inside the PHP comes the PHP loops. While inside PHP loops, specify the types of loops in PHP i.e. for loop, while and do while etc.