|
|
|
This thread is locked; no one can reply to it.
|
| Javascript dynamic treeview |
|
Steve Terry
Member #1,989
March 2002
 |
I need a way to create a tree in java or javascript that displays a collapsible tree with checkboxes next to each entry. Is there any good free classes to use for this? Also I need a way to dynamically create the tree from a file. What would be the best way to store a tree in a datafile? I was thinking something simple like: 0 Item1 1 SubItem1 1 SubItem2 2 SubItemOfItem2 1 SubItem3 Not sure how easy that would be to parse and convert to a tree view though. ___________________________________ |
|
CGamesPlay
Member #2,559
July 2002
 |
To the second question, the easiest way to store the data is in javascript: ({ name: "Item1", children: [ { name: "SubItem1" }, { name: "SubItem2", children: [ { name: "SubItemOfItem2" } ] }, { name: "SubItem3" } ] }) Then you can just... var tree = eval(data); var node = tree; for(var i = 0; i < node.children.length; i++) { if(node.children<i>.name == "SubItem2") { node = node.children<i>; break; } } alert("SubItem2 has " + node.children.length + " sub-items"); The code for the tree view itself isn't hard. Just create a small checkbox image in all three states and assign each line (which should be an li element, I imagine) a node as from the code above. When the node is expanded, either add a child list of the end of the current node's list item, or insert list items after the current one. -- Ryan Patterson - <http://cgamesplay.com/> |
|
Steve Terry
Member #1,989
March 2002
|
What about as a jsp page. I forgot to mention that this will be running server side. ___________________________________ |
|
BAF
Member #2,981
December 2002
 |
The javascript for the tree view will have to be client side, the processing to generate that would be server side. |
|
Steve Terry
Member #1,989
March 2002
|
Not sure why it's putting in the extra spaces. I'm just doing some simple html at the moment to see if I can get the images to line up properly... <div><img src="images/ix_startm.gif"><input type="checkbox" name="option1" value="Item1">Item1</div> <div><img src="images/ix_space.gif"><img src="images/ix_list.gif"><input type="checkbox" name="option2" value="SubItem2">SubItem2</div> <div><img src="images/ix_space.gif"><img src="images/ix_list.gif"><input type="checkbox" name="option3" value="SubItem3">SubItem3</div> <div><img src="images/ix_space.gif"><img src="images/ix_end.gif"><input type="checkbox" name="option4" value="SubItem4">SubItem4</div>
___________________________________ |
|
CGamesPlay
Member #2,559
July 2002
|
Well, obviously the check box has a size that is larger than the image -- Ryan Patterson - <http://cgamesplay.com/> |
|
Steve Terry
Member #1,989
March 2002
|
... and how do I resize it? ___________________________________ |
|
CGamesPlay
Member #2,559
July 2002
|
Open up your DOM Inspector and click all the elements. The one with the blinking border in the wrong spot is causing your problem -- Ryan Patterson - <http://cgamesplay.com/> |
|
|
