Creating A Dynamic Tree in JavaScript

pradeep's Avatar author of Creating A Dynamic Tree in JavaScript
Contributed by ()
This is an article on Creating A Dynamic Tree in JavaScript in JavaScript and AJAX.
There are hundreds of DHTML trees available online, most of them and written from scratch, some easy to understand and implement, while others are real pain to customize. Some of them need a JavaScript array to be populated or read an XML file to generate the tree.

I've tried to develop one using the Prototype.js library for the interactivity and HTML for the tree structure. This one is with checkboxes, so when you select or deselect a checkbox all it's child checkboxes are automatically selected/deselected. You can make a little modification to have one without checkboxes.

You can get prototype.js from http://prototypejs.org

The JavaScript



We'll be using some very handy library functions from the Prototype.js, which are:

Element.immediateDescendants()

http://www.prototypejs.org/api/element
We use this method to toggle any clicked nodes' immediate branches.

Element.toggle()

http://www.prototypejs.org/api/element/toggle
Hides or shows and element depending on it's current state.

$()

http://www.prototypejs.org/api/utility/dollar
This is an utility function which is similar to the DOM functionality of document.getElementById(..)

Here's the JavaScript to toggle the tree and to toggle the checkboxes:

Code: JavaScript
// Called when a node-text is clicked, toggles the branches
 // @param: the reference of the clicked node, i.e. the <li>
 function showChildren(obj)
 {
     var children = obj.immediateDescendants();
     for(var i=0;i<children.length;i++)
     {
         if(children[i].tagName.toLowerCase()=='ul')
             children[i].toggle();
     }
 }
 
 // Called when a node's checkbox changes, toggles the child checkboxes recursively
 // @param: the reference of the clicked node, i.e. the <li>
 // @param: reference to self
 function checkChildren(obj,srcObj)
 {
     var children = obj.immediateDescendants();
     for(var i=0;i<children.length;i++)
     {
         if(children[i].tagName.toLowerCase()=='input' && children[i].type=='checkbox' && children[i]!=srcObj)
             children[i].checked = srcObj.checked;
 
         // recursive call
         checkChildren(children[i],srcObj);
     }
 }

The HTML



The HTML below is a sample HTML, you may generate the from a server side script dynamically.

Code: HTML
<style type='text/css' media='all'>
 body {
     font: normal 11px verdana;
     }
 
 ul li{
     list-style-type:none;
     margin:0;
     padding:0;
     margin-left:8px;
 }
 
 ul li a{
     text-decoration:none;
     color:#000;
 }
 </style>
 <ul style="display:block">
     <li id="1"><input type='checkbox' name='f_1' onclick='checkChildren($("1"),this);'><a href='javascript:void(0);' onclick='showChildren($("1"));'>Web Development</a>
         <ul style="display:none">
             <li id="2"><input type='checkbox' name='f_2' onclick='checkChildren($("2"),this);'><a href='javascript:void(0);' onclick='showChildren($("2"));'>PHP</a></li>
             <li id="3"><input type='checkbox' name='f_3' onclick='checkChildren($("3"),this);'><a href='javascript:void(0);' onclick='showChildren($("3"));'>ASP</a></li>
         </ul>
     </li>
     <li id="4"><input type='checkbox' name='f_4' onclick='checkChildren($("4"),this);'><a href='javascript:void(0);' onclick='showChildren($("4"));'>VBScript/JScript/DHTML</a>
         <ul style="display:none">
             <li id="5"><input type='checkbox' name='f_5' onclick='checkChildren($("5"),this);'><a href='javascript:void(0);' onclick='showChildren($("5"));'>JScript/JavaScript</a>
                 <ul style="display:none">
                     <li id="8"><input type='checkbox' name='f_8' onclick='checkChildren($("8"),this);'><a href='javascript:void(0);' onclick='showChildren($("8"));'>JScript</a></li>
                     <li id="9"><input type='checkbox' name='f_9' onclick='checkChildren($("9"),this);'><a href='javascript:void(0);' onclick='showChildren($("9"));'>JavaScript</a></li>
                 </ul>
             </li>
             <li id="6"><input type='checkbox' name='f_6' onclick='checkChildren($("6"),this);'><a href='javascript:void(0);' onclick='showChildren($("6"));'>VBScript</a></li>
             <li id="7"><input type='checkbox' name='f_7' onclick='checkChildren($("7"),this);'><a href='javascript:void(0);' onclick='showChildren($("7"));'>CSS</a></li>
         </ul>
     </li>
 </ul>


Final Words



This was really helpful for me, a simple DHTML tree implementation for quick deployment. Next time we'll look at dynamic server-side script to generate the HTML, and also process the submitted information.

The full sample is below for you to try out, do not forget to download prototype.js
Code: HTML
<script language="JavaScript" src="prototype.js"></script>
 <script language="JavaScript">
 function showChildren(obj)
 {
     var children = obj.immediateDescendants();
     for(var i=0;i<children.length;i++)
     {
         if(children[i].tagName.toLowerCase()=='ul')
             children[i].toggle();
     }
 }
 
 function checkChildren(obj,srcObj)
 {
     var children = obj.immediateDescendants();
     for(var i=0;i<children.length;i++)
     {
         if(children[i].tagName.toLowerCase()=='input' && children[i].type=='checkbox' && children[i]!=srcObj)
             children[i].checked = srcObj.checked;
 
         // recursive call
         checkChildren(children[i],srcObj);
     }
 }
 </script>
 <style type='text/css' media='all'>
 body {
     font: normal 11px verdana;
     }
 
 ul li{
     list-style-type:none;
     margin:0;
     padding:0;
     margin-left:8px;
 }
 
 ul li a{
     text-decoration:none;
     color:#000;
 }
 </style>
 <ul style="display:block">
     <li id="1"><input type='checkbox' name='f_1' onclick='checkChildren($("1"),this);'><a href='javascript:void(0);' onclick='showChildren($("1"));'>Web Development</a>
         <ul style="display:none">
             <li id="2"><input type='checkbox' name='f_2' onclick='checkChildren($("2"),this);'><a href='javascript:void(0);' onclick='showChildren($("2"));'>PHP</a></li>
             <li id="3"><input type='checkbox' name='f_3' onclick='checkChildren($("3"),this);'><a href='javascript:void(0);' onclick='showChildren($("3"));'>ASP</a></li>
         </ul>
     </li>
     <li id="4"><input type='checkbox' name='f_4' onclick='checkChildren($("4"),this);'><a href='javascript:void(0);' onclick='showChildren($("4"));'>VBScript/JScript/DHTML</a>
         <ul style="display:none">
             <li id="5"><input type='checkbox' name='f_5' onclick='checkChildren($("5"),this);'><a href='javascript:void(0);' onclick='showChildren($("5"));'>JScript/JavaScript</a>
                 <ul style="display:none">
                     <li id="8"><input type='checkbox' name='f_8' onclick='checkChildren($("8"),this);'><a href='javascript:void(0);' onclick='showChildren($("8"));'>JScript</a></li>
                     <li id="9"><input type='checkbox' name='f_9' onclick='checkChildren($("9"),this);'><a href='javascript:void(0);' onclick='showChildren($("9"));'>JavaScript</a></li>
                 </ul>
             </li>
             <li id="6"><input type='checkbox' name='f_6' onclick='checkChildren($("6"),this);'><a href='javascript:void(0);' onclick='showChildren($("6"));'>VBScript</a></li>
             <li id="7"><input type='checkbox' name='f_7' onclick='checkChildren($("7"),this);'><a href='javascript:void(0);' onclick='showChildren($("7"));'>CSS</a></li>
         </ul>
     </li>
 </ul>
Ambitious contributor
20Feb2008,12:24   #2
elec.shabnam's Avatar
not at all clear
Ambitious contributor
20Feb2008,12:24   #3
elec.shabnam's Avatar
can you please give a line by line explanation.
Team Leader
20Feb2008,14:17   #4
pradeep's Avatar
Tell me which portion is unclear to you, i'll explain it to you!
Ambitious contributor
20Feb2008,14:49   #5
elec.shabnam's Avatar
the thing is that i m new to java script so i m unable to understand at all
Team Leader
21Feb2008,10:12   #6
pradeep's Avatar
Well, in that case you'll need to go through JavaScript basics first and then you'll get this code easily.
Team Leader
27Feb2008,12:34   #7
pradeep's Avatar
Note: If you are planning to implement this in your dynamic cgi-perl script, do remember to escape the javascript $() function \$(). Few of my friends faced a problem when not escaping $
Contributor
5Mar2008,17:26   #9
aisha.ansari84's Avatar
Quote:
Originally Posted by pradeep
Note: If you are planning to implement this in your dynamic cgi-perl script, do remember to escape the javascript $() function \$(). Few of my friends faced a problem when not escaping $
i tried your code by removing$ but still there was a problem
Banned
17Jun2009,16:26   #10
gkumar's Avatar
To generate tree dynamically we can make use of "assembler design pattern". For that we have to create javascript which generates tree dynamically in a "java" file. the whole java script should be passed to web page as a single string.

java file:
String treeStr;
createTree(){
treeStr+=treeStr+DynamicItems from DB or Any+"Script related to active widgets";
}

at last "treeStr" will be passed to target page where it requires dynamic tree.
Page 1 of 2
1
2