Creating A Dynamic Tree in JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Feb 19, 2008.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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:
     // 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.

    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
    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>
     
     
  2. elec.shabnam

    elec.shabnam New Member

    Joined:
    Feb 13, 2008
    Messages:
    102
    Likes Received:
    0
    Trophy Points:
    0
    not at all clear
     
  3. elec.shabnam

    elec.shabnam New Member

    Joined:
    Feb 13, 2008
    Messages:
    102
    Likes Received:
    0
    Trophy Points:
    0
    can you please give a line by line explanation.
     
  4. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    Tell me which portion is unclear to you, i'll explain it to you!
     
  5. elec.shabnam

    elec.shabnam New Member

    Joined:
    Feb 13, 2008
    Messages:
    102
    Likes Received:
    0
    Trophy Points:
    0
    the thing is that i m new to java script so i m unable to understand at all
     
  6. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    Well, in that case you'll need to go through JavaScript basics first and then you'll get this code easily.
     
  7. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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 $
     
  8. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  9. aisha.ansari84

    aisha.ansari84 New Member

    Joined:
    Feb 13, 2008
    Messages:
    82
    Likes Received:
    1
    Trophy Points:
    0
    i tried your code by removing$ but still there was a problem
     
  10. gkumar

    gkumar New Member

    Joined:
    Jun 16, 2009
    Messages:
    58
    Likes Received:
    5
    Trophy Points:
    0
    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.
     
  11. kien_vn

    kien_vn New Member

    Joined:
    Aug 31, 2010
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    0
    I need view a sample website use this article
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice