As I have to represent a tree which might looks like windows file
explore,
so I was wondering if someone has already done the same work and made
it a widget to share with other people.
If not I think I shall write my own, and share it with you all. But I
am not sure have to represent a tree by html and javascript. So could
anyone give me some clues or some examples?
Thanks!
There are JavaScript libraries that can take any (nested) <ul> list and turn it
into a tree display. All you need to do is to give your <ul> element the
appropriate class.
This approach is somewhat limited when you want tree guides (the dotted lines
to the left) or icons both for the nodes and plus/minus symbols for
expanding/retracting branches as well. If you need this, you will have to
insert a few <span> or <div> elements into the <li> items or build your tree
with a list of nested divs.
There are really gazillions of these libraries out there, so I don't know where
to point you at first, but you could look at the Yahoo Library or
http://www.javascripttoolbox.com/lib/mktree.
But it should be a good CSS and MochiKit training to write a solution yourself ;-)
HTH, Chris