We help IT Professionals succeed at work.
Get Started

Need help adding functionallity to simple Javascript expandable item tree

GrrWolfie
GrrWolfie asked
on
249 Views
Last Modified: 2012-05-12
So I need to add the following,
1. A folder maximize and minimize link next to each folder. They'd operate by changing the "expand:" value in the array to true or false and redraw the array by calling createList(myArray). I just have no idea how to find all the parents beyond the first for this link. I'm also veeeeery new to this object passed "parenting" i'm struggling with the information available on the web on this when attempting to apply it to this code.
2. Each non-folder will have a <input type="text" value="?"> field, inside will be the full path (all parents) to that item + the item.
Example: "Ultra Purple" would show as Colors\Special\Purple\Ultra Purple
3. Instead of a list i'd like to use multiple &nbsp; tags for tabbing things over.

Many thanks, this would be a huge help i'm massively stuck.

Here's what I got so far! (credit to djon2003 for his awesome code :) )
- I get this error: "You may not start a |i] tag within a |i] tag" (replace "|" with "["), I had to change all instances of |i] to "|i]" to get it to post. To test it they'll need to be changed back. Anyone know how to get around that?

<div id="thecontainer"></div>

<script language="JavaScript">
var myArray= 
[
{name:"Colors",expand:true, children :
   [
      {name:"Blue",expand:true,children:[]},
      {name:"Yellow",expand:true,children:[]},
      {name:"Special",expand:true,children: 
         [
            {name:"Purple",expand:true,children:
               [
                  {name:"Ultra Purple",expand:true,children:[]},
               ]
            }
         ]
      }
   ]
},
{name:"Price range",expand:false,children: 
   [
      {name:"Low",expand:false,children:[]}
   ]
},
{name:"Distance",expand:false,children:[]}
];
var divContainer = document.getElementById('thecontainer');
divContainer.innerHTML = createList(myArray);
function createList(nodes, parent, level){
   if (level=="undefined"){
      level=1
   }
   var html="<ul>";
   if(parent!=undefined && parent.expand!=true){
      var html = "<ul style=\"display:none\">"
   }
   else{
      var html="<ul>"
   }
   for(var i = 0; i < nodes.length; i++) {
      //Do something  with nodes[i].name and other values
      html+="<li>";
      if (nodes[i].children.length!=0){

         //Here's where I'd add a folder expansion button, need an example! :X

      }
      html += nodes[i].name;
      if (nodes[i].children.length!=0){

         html+=createList(nodes[i].children, nodes[i], level + 1);
      }
      html+="</li>";
   }
   html+="</ul>";
   return html;
}
//myArray[Colors][]='false';createList(myArray);"
</script>

Open in new window

Comment
Watch Question
This problem has been solved!
Unlock 2 Answers and 12 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE