jQuery Treeview with Checkboxes

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 which you may download from the Github website here.

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 to your system.

Note: (Get the required JS file from the demo page by view source the code and download required JS files. The plug-in is no more available on GitHub website.)

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:

<div class="container">

<div class="row">

    <div class="col-md-6">

      <div id="treeview-checkbox-demo">

            <ul>

                <li>HTML

                <ul>

                        <li data-value="table">HTML table</li>

                        <li data-value="links">HTML links</li>

                 </ul>

                </li>

                <li>PHP

                    <ul>

                        <li data-value="PHP if..else">PHP if..else</li>

                        <li>PHP Loops

                            <ul>

                                <li data-value="For loop">For loop</li>

                                <li data-value="While loop">While loop</li>

                                <li data-value="Do WHile loop">Do WHile loop</li>

                            </ul>

                        </li>

                        <li>PHP arrays</li>

                    </ul>

                </li>

                <li>jQuery

                    <ul>

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

                        <li data-value="jQuery prepend">jQuery prepend</li>

                    </ul>

                </li>

            </ul>

        </div>

        <button type="button" class="btn btn-success" id="show-values">Get Values</button>

        <pre id="values"></pre>

   </div>

  </div>

 </div>

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:

            $('#show-values').on('click', function(){

                $('#values').text(

                    $('#treeview-checkbox-demo').treeview('selectedValues')

                );

            });

How to set the initially selected checkboxes in tree

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

$('#treeview-checkbox-demo').treeview({

                debug : true,

                data : ['links', 'Do WHile loop']

            });

Get the complete code from the demo page.

How to create a 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 a multi-level tree using this plug-in, just start another tag of <ul> <li> inside the parent <ul> tag.  For example:

<ul>

               <li>PHP

                    <ul>

                        <li data-value="PHP if..else">PHP if..else</li>

                        <li>PHP Loops

                            <ul>

                                <li data-value="For loop">For loop</li>

                                <li data-value="While loop">While loop</li>

                                <li data-value="Do WHile loop">Do WHile loop</li>

                            </ul>

                        </li>

                        <li>PHP arrays</li>

                    </ul>

                </li>

</ul>

 

In the 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.