Web Design Forum

murph1329 · 05-11-2009

No question just code for anyone that needs it.

It needs work but it's the foundation for a tree view.

Code:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<script language="JavaScript">
// Arrays for nodes and icons
var node = new Array();
var writeCount = 0;
function add(value, PID)
{
 if(node==0) 
 {
  //Top: PID | ID | value
  node.push(null+"|"+0+"|"+value);
 }
 else
 {
  var pos=0;
  pos=push(PID, PID, 0);
  node.splice(pos, 0, PID+"|"+null+"|"+value);
  fixPOS();
 }
}
function push(PID, ogID, count)
{
 var nodeValues = node[count].split("|");
 if(PID==nodeValues[1])
  if(count+1==node.length)
   return count+1;
  else 
  {
   var nodeNext=node[count+1].split("|");
   if(nodeNext[0]==PID || nodeNext[0]>=ogID)
    return push(nodeNext[1], ogID, count+1);
   else
    return count+1;
  }
 return push(PID, ogID, count+1)
}
function fixPOS()
{
 //start - insert IDs
 for(var i=0;i<node.length;i++)
 {
  var nodeValues = node[i].split("|");
  node[i]=nodeValues[0]+"|"+i+"|"+nodeValues[2];
 }
 //end - insert IDs
}
function write(start)
{
 for(var i=start;i<node.length;i++)
 {
  var nodeValues=node[i].split("|");
  if(!document.getElementById("div"+nodeValues[1]))
  {
   //document.write("<div id=\""+nodeValues[1]+"\" style=\"CURSOR:POINTER; width: 300px;\" onclick=\"getID(id);\">");
   document.write("<div id=\"div"+nodeValues[1]+"\"><a id=\"href"+nodeValues[1]+"\" href=\"javascript:onclick=getID('"+nodeValues[1]+"');\">");
   document.write("PID:"+nodeValues[0]+" | ID:"+nodeValues[1]+" | Value:"+nodeValues[2]+"</a><br>");
   document.write("</div>");
  }
  else 
  {
   var text=null;
   text="PID:"+nodeValues[0]+" | ID:"+nodeValues[1]+" | Value:"+nodeValues[2];
   document.getElementById("href"+nodeValues[1]).innerText=text;
  }
 }
 
 
 var space=new Array();
 space=format();
 for(var i=0;i<node.length;i++)
 {
  var nodeValues=node[i].split("|");
  for(var a=0;a<space[i];a++)
  {
   document.getElementById("href"+nodeValues[1]).innerText="-"+document.getElementById("href"+nodeValues[1]).innerText
  }
 } 
}
function getID(id)
{
 alert(id);
}
function format()
{
 var tabs=new Array();
 var count=0;
 for(var i=node.length-1;i>=0;i--)
 {
  var nodeValues=node[i].split("|");
  tabs.push(tab(count, nodeValues[0]));
 }
 return tabs.reverse()
}
function tab(count, PID)
{
 if(PID=="null")
 {
  return count;
 }
 else
 {
  var nodeValues=node[PID].split("|");
  return tab(++count, nodeValues[0]);
 }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
 <script type="text/javascript">
  //value | parent
  add("wes", 0);//pos 0  
  add("test1", 0);//pos 1
  add("test2", 1);//pos 2 
  add("test3", 2);//pos 3
  add("...", 3);// pos 4
  write(0); //start at 0
  add("test4", 1);// pos 4
 
  add("test5", 2);// pos 4
  write(0); //start at last parent added to + 1
  add("test6", 3);
  add("at 0", 0);
  write(0); //start at last parent added to + 1
 </script>
</body>
</html>

murph1329 · 05-11-2009

If anyone wants to add features to this tree view please do. I'm trying to do 1 thing a day.

Fixed write function to allow for new nodes during run-time. Change getID by adding user prompt.
Apparently using document.write clears everything so i had to use document.createelement.

I really want to clean this up and make it look better but it works for now so that's one thing down.

Code:

function write()
{
 if(!document.getElementById("treediv"))
  document.write("<div id=\"treediv\">");
 var append = document.getElementById('treediv');
 for(var i=0;i<node.length;i++)
 {
  var nodeValues=node[i].split("|");
  if(!document.getElementById("href"+nodeValues[1]))
  {
        var el = document.createElement('a');
           el.id = "href"+nodeValues[1];
           el.href="javascript:onclick=getID("+nodeValues[1]+")";
           el.innerText="PID:"+nodeValues[0]+" | ID:"+nodeValues[1]+" | Value:"+nodeValues[2];
           append.appendChild(el);
           el=document.createElement('br');
           append.appendChild(el);
  }
  else 
  {
   var text=null;
   text="PID:"+nodeValues[0]+" | ID:"+nodeValues[1]+" | Value:"+nodeValues[2];
   document.getElementById("href"+nodeValues[1]).innerText=text;
  }
 }
 if(!document.getElementById("treediv"))
  document.write("</div>");
 
 
 var space=new Array();
 space=format();
 for(var i=0;i<node.length;i++)
 {
  var nodeValues=node[i].split("|");
  for(var a=0;a<space[i];a++)
  {
   document.getElementById("href"+nodeValues[1]).innerText="-"+document.getElementById("href"+nodeValues[1]).innerText
  }
 }
}
 
//getID changed below:
function getID(id)
{
 var ans=prompt('Enter your name', '');
 if(ans)
 { 
  add(ans, id)
  write();
 }
}

If I don't grow too bored of this i'll add the follow:
-drag and drop w/ childern
-check boxes per node
-images
-expand/collapsible

murph1329 · 05-12-2009

Bug in fixPOS fixed with below code. Don't forget to pass in new arguement.

Code:

function fixPOS(pos, PID)
{
 //start - insert IDs
 for(var i=pos;i<node.length;i++)
 {
  var nodeValues = node[i].split("|");
  if(nodeValues[0]>PID)
   nodeValues[0]++;
  node[i]=nodeValues[0]+"|"+i+"|"+nodeValues[2];
 }
 //end - insert IDs
}

murph1329 · 05-14-2009

sorry enhancements are going to take longer for me to get to

I've got a bunch of detailed designs to create for my job.

Web Design Forum

Web Design and Web Development Forum

LATEST POSTS

FORUM STATISTICS

PARTNER SITES

LinkBack

Thread Tools

Rate This Thread

Display

JavaScript Tree View

Re: JavaScript Tree View

Re: JavaScript Tree View

Re: JavaScript Tree View

Similar Threads

Javascript

javascript part 9

How to Start Javascript

javascript part 2

Javascript part 1