I thought this should be put under advanced because it's a theory question more than a practical, and iirc, that's the purpose of this part fo the forum.
How would you represent a tree in HTML? I've got a basic system working, but it doesn't look very tree-like, because it's in a table...
Any thoughts?
Representing a tree in HTML
Moderator: General Moderators
- twigletmac
- Her Royal Site Adminness
- Posts: 5371
- Joined: Tue Apr 23, 2002 2:21 am
- Location: Essex, UK
www.hotscripts.com has some scripts, phpclasses.org too
...and many more
what kind of tree do you want to display?
...and many more
what kind of tree do you want to display?
I suck at being specific 
Okay, I need to generate a tree. Each node can have multiple children nodes. Each and Every Node has other peices of information that must be displayed... how would you do it?
(Example node)
(NodeID = 53)
(ParentNode = 24)
(Info1 = 'Some Info')
(Info2 = 'Some Info')
(Info3 = 'Some Info')
(Info4 = 'Some Info')
(Info5 = 'Some Info')
Okay, I need to generate a tree. Each node can have multiple children nodes. Each and Every Node has other peices of information that must be displayed... how would you do it?
(Example node)
(NodeID = 53)
(ParentNode = 24)
(Info1 = 'Some Info')
(Info2 = 'Some Info')
(Info3 = 'Some Info')
(Info4 = 'Some Info')
(Info5 = 'Some Info')
Im not completely sure if I understood your problem correctly, but here it goes.
1.
If you have lots and lots of data, be sure to give enough narrowing parameters to users
2.
Display only as much data in each node as you see that is the absolute minimum. Remember that every node must be still somehow indentifiable.
3.
Give user some method to examine that node closer: it can be done in many ways. (Node can open popup, it can display the data after user has kept cursor in the node long enough, there can be frames and one frame is updated when user clicks a node etc.
As coding side of things, (I recently did something like that with java servlets, it used tables and it works pretty well.) it shouldn't be too hard:
- load all appropriate data from db
- sort the data in multidimensional array
- calculate how much of the sorted data is actually visible, depending what user has clicked (only if it is a folding one.) ditch what you dont need
- calculate how many cols does it take to show the data (widest part of the tree)
- calculate how many rows does it take to show the data (how tall the tree is)
- construct the table
and thats it. The sorting part was the thoughest for me, as my app could have n number of roots, and those roots can all open to x number of nodes that opens to y number, well, you get the idea. It was also a folding one.
Hope this helps,
-99
1.
If you have lots and lots of data, be sure to give enough narrowing parameters to users
2.
Display only as much data in each node as you see that is the absolute minimum. Remember that every node must be still somehow indentifiable.
3.
Give user some method to examine that node closer: it can be done in many ways. (Node can open popup, it can display the data after user has kept cursor in the node long enough, there can be frames and one frame is updated when user clicks a node etc.
As coding side of things, (I recently did something like that with java servlets, it used tables and it works pretty well.) it shouldn't be too hard:
- load all appropriate data from db
- sort the data in multidimensional array
- calculate how much of the sorted data is actually visible, depending what user has clicked (only if it is a folding one.) ditch what you dont need
- calculate how many cols does it take to show the data (widest part of the tree)
- calculate how many rows does it take to show the data (how tall the tree is)
- construct the table
and thats it. The sorting part was the thoughest for me, as my app could have n number of roots, and those roots can all open to x number of nodes that opens to y number, well, you get the idea. It was also a folding one.
Hope this helps,
-99