A jQuery / Bootstrap Treeview plug-in with 2 Demos

The easy Treeview plug-in for your website

The easy-tree plug-in which is based on jQuery with Bootstrap framework support can be used for creating the treeview structure in your web pages easily.

All you need to do is to include the plug-in JS and CSS files (change as per needs), use the easy-tree CSS class in a  <div>, and initiate the plug-in in jQuery code.

The markup contains the <ul> and <li> tags with required text/information that may be static or database-driven for nodes in Treeview.

A demo of Bootstrap tree

See the demo of a simple tree view using Bootstrap 3. The plug-in allows you to add a few options like:

  • Add a new node in the tree
  • Edit a node
  • Delete a node

You may add these options by using the jQuery code. See the demonstration online with the code:

bootstrap treeview

Complete code including jQuery:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/easyTree/easyTree.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/easyTree/easyTree.js"></script>
    <style>
        body {
            background: #eee;
        }
    </style>
</head>
<body>
<div class="col-md-3">
    <h3 class="text-success">A demo of Easy Tree</h3>
    <div class="easy-tree">
        <ul>
            <li>Parent 1</li>
            <li>Parent 2</li>
            <li>Parent 3
                <ul>
                    <li>Child 1</li>
                    <li>Child 2
                        <ul>
                            <li>Grand-child 1</li>
                            <li>Grand-child 2</li>
                            <li>Grand-child 3</li>
                            <li>Grand-child 4</li>
                        </ul>
                    </li>
                    <li>Child 3</li>
                    <li>Child 4</li>
                </ul>
            </li>
            <li>Parent 4
                <ul>
                    <li>Parent 4 Child 1</li>
                    <li>Parent 4 Child 2</li>
                    <li>Parent 4 Child 3</li>
                    <li>Parent 4 Child 4
                        <ul>
                            <li>Grand-child 1</li>
                            <li>Grand-child 2</li>
                            <li>Grand-child 3</li>
                            <li>Grand-child 4</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<script>
    (function ($) {
        function init() {
            $('.easy-tree').EasyTree({
                addable: true,
                editable: true,
                deletable: true
            });
        }

        window.onload = init();
    })(jQuery)
</script>
</body>
</html>

In the head section, the dependency files are included:

  • Bootstrap CSS file
  • jQuery file
  • easyTree JS file that you may download from the Github website here.
  • easyTree CSS file

You may customize the CSS file as per the needs of your website theme.

A demo with custom CSS for Bootstrap / jQuery Treeview

As mentioned earlier, you may modify the CSS properties to match the theme of the treeview with other sections of your website. For that, simply change/add or remove the properties in the easyTree.css file or you may use and refer to the classes in the style section or your single external CSS file as well.

Have a look at this example output where I have changed the background of the treeview. Besides, on mouse hover, the active tree/nodes will change.

bootstrap treeview

Only a few CSS classes are changed in the demo while the rest remains the same:

For overall background:

.easy-tree {

    min-height: 20px;

    margin-bottom: 20px;

    background-color: #804040;

    color: #fff;

    border: none;

    border-top: none;

    padding-bottom: 15px;

}

For mouseover effect on any node:

.easy-tree li > span > a {

    color: #fff;

    text-decoration: none;

}

.easy-tree li > span > a:hover {

    color: #8A4500;

    text-decoration: none;

    background: #FFCB97;

}

For parents with the child on hover:

.easy-tree li.parent_li > span:hover, .easy-tree li.parent_li > span:hover + ul li span {

    background: #004040;

    color: #8A4500;

}

Similarly, you may play with other classes to change the style of the easy tree view plug-in.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️