Code With Logic

Creating Code For Simplicity but Logic For Need

Creating tree view in jQuery


Introduction

In this article we will learn how to create a tree view in jQuery. Tree view is used for representing hierarchy. You can use it for many purposes. So let’s create it.

Basics – Understanding Tree View

For creating tree view we will use following two methods:

Click()

It is used for binding click event handler on an element. Whenever user click on any element it will be detected by using click handler. Syntax for click is

jQueryObject.click(handler_function);

Toggle()

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

jQueryObject.toggle(“fold”,”effect_duration”);

In HTML we will use the following tags

UL – Unordered List

It is used for declaring un order list.

<ul> List items </ul>

LI – List Item

It is used for declaring list items.

<li> Item name </li>

Logic behind the Java Script Tree View

First we need to prepare the HTML.

In tree view we have Parent Nodes, Child Nodes, Nodes.

To create nodes we will use the LI and UL tags of HTML.

To represent the parent node We will use one LI tag just above the UL

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 a 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 working 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);

});
 

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 smartly. You can check my other articles on jQuery for more details on 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

Advertisements

One comment on “Creating tree view in jQuery

  1. Yogesh Mishra
    March 17, 2015

    nice

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on September 1, 2013 by in CodeProject, jQuery.

Navigation

%d bloggers like this: