Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS3

Treeview in HTML using CSS and JQuery

5.00/5 (7 votes)
21 Jan 2016CPOL 32.7K   1K  
This tip will show how to design Treeview in HTML using CSS and JQuery in a simple way.

Introduction

I have written this tip to show the simple treeview design in html using CSS 3.0 and JQuery 1.10.2. I heard about the designing the treeview with infinite parent-child relation is somehow difficult. This is a very simple way to design the treeview in HTML.

Using the Code

In this tip, I have written a small JavaScript function with two user defined functions.

  1. LoadChildren(ctrl)  
  2. NodeSelection(ctrl)
JavaScript
<script type="text/javascript">
    function LoadChildren(ctrl) {
        if ($(ctrl).next('a').next('ul').is(':visible')) {
            $(ctrl).next('a').next('ul').hide('slow');
            $(ctrl).attr('src', '/Images/ChildNode.png');
        }
        else {
            $(ctrl).next('a').next('ul').show('slow');
            $(ctrl).attr('src', 'Images/ChildNode.png');
        }
    }        

    function NodeSelection(ctrl) {
        $('ul.tree li').find('a').each(function () { $(this).removeClass(); })
        $(ctrl).addClass("selected");
    }

    $(document).ready(function () {
        $('ul.tree li').each(function () {
            $(this).children('img').click(function () {
                LoadChildren(this);
            });
        });

        $('ul.tree li a').click(function (e) {
            $('ul.tree li').find('a').each(function () { $(this).removeClass(); })

            $(this).addClass("selected");
        });
    });
</script>

Function 1 - LoadChildren(ctrl)  is used to load the children nodes dynamically by using Ajax to call the server side function/Action and add the nodes into the corresponding Node. I have written this code for .NET MVC, razor view engine and C# language.

For example:

JavaScript
function LoadChildren(ctrl) {
    if ($(ctrl).next('a').next().is('ul') == false) {
        var customerID = $(ctrl).attr('id').replace('img_', '');
        var nodeStr = '';
        var parentNode = $(ctrl).parent('li');
        $.ajax({
            type: 'post',
            url: '@Url.Action("[ActionName]", "[ControllerName]")',
            data: { 'CustomerID': parseInt(customerID) },
            success: function (childrenObject) {
                nodeStr = '<ul>';
                $.each(childrenObject.RelationTreeInfo, function (index, data) {
                    nodeStr += '<li>';
                    if (data.NoOfChildren != 0) {
                        nodeStr += '<span>' + data.NoOfChildren + '</span>';
                        nodeStr += '<img style="margin-left:3px;" 
                        id="img_' + data.CustomerID + '" 
                        src="/Content/Images/ChildNode.png" 
                        onclick="LoadChildren(this)" />';
                    }
                    nodeStr += '<a style="margin-left:3px;" 
                    onclick="NodeSelection(this);">' + 
                    data.Firstname + '</a>' + '</li>';
                });
                nodeStr += '</ul>';
                $(parentNode).append(nodeStr);
            }
        });

        //$(this).parent('li').append(nodeStr);

    }
    else {
        if ($(ctrl).next('a').next('ul').is(':visible')) {
            $(ctrl).next('a').next('ul').hide('slow');
            $(ctrl).attr('src', '/Content/Images/ChildNode.png');
        }
        else {
            $(ctrl).next('a').next('ul').show('slow');
            $(ctrl).attr('src', '/Content/Images/ChildNode.png');
        }
    }
}

Points of Interest

Click on icon to collapse and expand the node. Click on node to select the node.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)