Monday, September 2, 2013

Creating Tree View Using jQuery




Basics - Understanding Tree View

To create a tree view we will use the following two methods.

Click()

It is used for binding to the click event handler of an element. Whenever the user clicks on an element it will be detected using the click handler. The syntax for the click event is:

jQueryObject.click(handler_function);

Toggle()

It is a jQuery UI method for toggling the display property of an element with the animation effect as well. For our purposes we will use a toggle with a fold effect. The syntax for a toggle is:

jQueryObject.toggle("fold","effect_duration");

In HTML we will use the following tags.

UL - Unordered List

It declares an unordered list.

<ul> List items </ul>

LI - List Item

It declares list items.

<li> Item name </li>

Logic behind the JavaScript Tree View

  1. First we need to prepare the HTML.
  2. In the tree view we have Parent Nodes, Child Nodes, Nodes.
  3. To create nodes we will use the LI and UL tags of HTML.
  4. To represent the parent node we will use a LI tag just above the UL.
  5. To represent the child node we use the UL tag just below the LI Tag.
Coding the Tree View

It's time to turn our Dreamed Tree View into reality.

To create tree view items, add the following HTML snippet in your HTML File.
<ul>
    <li id="m1">Main 1</li>
    <div id="l1cover">
        <ul>
            <li>1</li>
            <li id="inLst">2</li>
            <div id="inCt1">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <li>3</li>
        </ul>
    </div>
</
ul>
<
ul>
    <li id="m2">Main 2</li>
    <div id="l2cover">
        <ul>
            <li id="inLst2">1</li>
            <div id="inCt2">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</
ul>

Now to make your tree view work, just add the following jQuery snippet:
$("#m1").click(function () {
    $("#l1cover").toggle("fold", 1000);
    });    $("#m2").click(function () {
        $("#l2cover").toggle("fold", 1000);
    });    $("#inLst").click(function () {
        $("#inCt1").toggle("fold", 1000);
    });    $("#inLst2").click(function () {
        $("#inCt2").toggle("fold", 1000);
});

a1.PNG
Summary

To summarize, we just learned how to create the tree view in jQuery. Here the important point is not about creating the tree view but how to use the power of jQuery intelligently. You can check my other articles about jQuery for more details of how to use it.

Thanks for reading and don't forget to comment and like this article.

Output

Live Demo

Full Tree View

a1.PNG
Minimized 1st sub node
a2.PNG
Minimized 2nd child node
a3.PNG
Minimized child nodes

a4.PNG
Minimized 2nd node

a5.PNG
Minimized 1st node

a6.PNG
All nodes minimized

a7.PNG

No comments:

Post a Comment