Representing a tree in HTML

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Gleeb
Forum Commoner
Posts: 87
Joined: Tue May 13, 2003 7:01 am
Location: UK
Contact:

Representing a tree in HTML

Post by Gleeb »

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?
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

I've moved this to Client Side because as far as I could see it isn't to do with PHP.

Mac
Gleeb
Forum Commoner
Posts: 87
Joined: Tue May 13, 2003 7:01 am
Location: UK
Contact:

Post by Gleeb »

good call ;) Any takers?
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

What do you need to represent and why HTML? For example would it make sense to play with creating an image on the fly using some of the image manipulation commands?
Gleeb
Forum Commoner
Posts: 87
Joined: Tue May 13, 2003 7:01 am
Location: UK
Contact:

Post by Gleeb »

Well, basically, I can't use any images other that the ones provided for me, because the site will be viewed over modems. It has to be low bandwidth, and that means HTML, apparently.
User avatar
nielsene
DevNet Resident
Posts: 1834
Joined: Fri Aug 16, 2002 8:57 am
Location: Watertown, MA

Post by nielsene »

ASCII art in a <pre>? Is it a binary tree or a generalized tree?
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post by volka »

www.hotscripts.com has some scripts, phpclasses.org too
...and many more ;)
what kind of tree do you want to display?
Gleeb
Forum Commoner
Posts: 87
Joined: Tue May 13, 2003 7:01 am
Location: UK
Contact:

Post by Gleeb »

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')
User avatar
9902468
Forum Commoner
Posts: 89
Joined: Thu Jun 06, 2002 6:39 am
Location: Europe

Post by 9902468 »

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
Post Reply