Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Creating A Dynamic Tree in JavaScript (http://www.go4expert.com/articles/creating-dynamic-tree-javascript-t8911/)

pradeep 19Feb2008 17:50

Creating A Dynamic Tree in JavaScript
 
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>


elec.shabnam 20Feb2008 12:24

Re: Creating A Dynamic Tree in JavaScript
 
not at all clear

elec.shabnam 20Feb2008 12:24

Re: Creating A Dynamic Tree in JavaScript
 
can you please give a line by line explanation.

pradeep 20Feb2008 14:17

Re: Creating A Dynamic Tree in JavaScript
 
Tell me which portion is unclear to you, i'll explain it to you!

elec.shabnam 20Feb2008 14:49

Re: Creating A Dynamic Tree in JavaScript
 
the thing is that i m new to java script so i m unable to understand at all

pradeep 21Feb2008 10:12

Re: Creating A Dynamic Tree in JavaScript
 
Well, in that case you'll need to go through JavaScript basics first and then you'll get this code easily.

pradeep 27Feb2008 12:34

Re: Creating A Dynamic Tree in JavaScript
 
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 $

shabbir 5Mar2008 09:42

Re: Creating A Dynamic Tree in JavaScript
 
Nominate your favorite article of the month for Feb 2008

aisha.ansari84 5Mar2008 17:26

Re: Creating A Dynamic Tree in JavaScript
 
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

gkumar 17Jun2009 16:26

Re: Creating A Dynamic Tree in JavaScript
 
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.

kien_vn 31Aug2010 12:23

Re: Creating A Dynamic Tree in JavaScript
 
I need view a sample website use this article


All times are GMT +5.5. The time now is 02:29.