Parent node and child node

sandy1028 · July 23, 2007

Hi,

How to display the tree format using the horizontal and verticle lines which is connected from parent node to child node....

Please provide me ideas how it can be displayed

sandy1028 · July 24, 2007

<style type="text/css">
#containerul, #containerul ul{
  text-align:left;
  margin:0; /* Removes browser default margins applied to the lists. */
  padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
  margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
  padding:0; /* Removes browser default padding applied to the list items. */
  list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
  float:left;
  width:12px;
  height:1em;
  background-position:0 50%;
  background-repeat:no-repeat;
}

#containerul .borders {
border-left-color: blue;
border-right-width: 0px; border-left-width: 3px;
padding-right: 0px; padding-left: 0px;
}


</style>
<script type="text/javascript">

var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
  cookieCount=0;
  if(document.cookie){
    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();
    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[0].replace(/ /g,"");
    }
  }
  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
  temp=document.getElementById("containerul");
  for(var o=0;o<temp.getElementsByTagName("li").length;o++){
    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
      temp2 = document.createElement("span");
   temp2.className = "symbols";
//temp2.className = "borders";
      temp2.style.backgroundImage =  (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }
      cookieCount++;
    }
    else{
      temp2 = document.createElement("span");
        temp2.className = "symbols";
//      temp2.className = "borders";
      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
    }
  }
}function showhide(el){
  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"line":"block";
   el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";

}

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together  and assigned to a cookie.
  cookieArray=new Array()
  for(var q=0;q<temp.getElementsByTagName("li").length;q++){
    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" &&  temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
      }
    }
  }
  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
</script>
<?
echo "<html>";
echo "<body bgcolor=\"#FFF0FF\" text=\"#000000\">";
$lines = file('phonedb.txt');
echo "<ul id=\"containerul\"><li>View Tree ";

echo "<ul><li>Name";

echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[0]</li>";
}
echo "</ul></li>";

echo "<li>Address";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[1]</li>";
}
echo "</ul></li>";



echo "<li>Age";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[2]</li>";
}
echo "</ul></li>";

echo "<li>Email";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[3]</li>";
}
echo "</ul></li>";
echo "<li>Mobile";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[4]</li>";
}
echo "</ul></li>";


echo "<li>Residence Number";
echo "<ul>";
                        foreach ($lines as $line) {
                        $text_line = explode(":",$line);
echo "<li>--$text_line[5]</li>";
}
echo "</ul></li>";



echo "</li></ul>";

?>

<script type="text/javascript">
initiate();
</script>
<?php
echo "</body>";
echo "</html>";
?>

This code works fine. But how to include the horizontal and verticle as the attached image

[attachment deleted by admin]

Sign In

Parent node and child node

Recommended Posts

sandy1028

Link to comment

Share on other sites

sandy1028

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information