<!-- Download Links -->
<!-- Article image -->
<!-- Add the rest of your HTML here -->
Have you ever tried to insert an easy-to-use treeview into your homepage or even use a
treeview in your web-application? If you have, you will probably know that most ready-made
treeviews out there are built in a quite complex manner, making heavy use of client side
is, however, a more elegant way of implementing a treeview using only one small client-side
Easy DHTML Treeview
The 'Easy DHTML Treeview' builds a treeview on top of the Document Object Model, which
already is hierarchical by definition. The whole idea of the 'Easy DHTML Treeview'
is using simple HTML tags such as
A to create the real tree and then
all of the children (branches and leaves) by hiding or showing the DIV-item (if a DIV item is
hidden, all the children of the DIV item are hidden as well).
Toggle will be
called with a pointer to the branch name itsself. The Toggle-function will then ask the document
(using DOM) what the next item is (which in this case is the yellow
DIV-section) and hide
it. If the yellow
DIV-section is hidden all items inside the yellow square (which is almost
everything in the picture) will be hidden as well.
Serialising the treeview
The good thing about this simple implementation is that it is very easy to construct a treeview
from data that can be stored in a database. Whereas other treeview functions and components force
tree), 'Easy DHTML Treeview' allows you to simply print the data as if it were a table. The whole
functionality of collapsing and unfolding the branches in the tree is then added almost automatically
by the single function that does it all!
The included demo-project shows you that it is really quite easy to create very dynamic, n-level
truly recursive trees using 'Easy DHTML Treeview'. For storing the data in the tree, this
data model is used:
Like a treeview, the data model itself is recursive, because topic and topic_1 are the very same
table. This means topic has a relation to topic, with the subtopic table in between to implement
an n-n relationship.
Tips & Tricks
I got a lot of questions about the treeview so I'd just answer some of them here for your convenience:
How can I change the initial state of the treeview from collapsed to expanded? The
answer is quite simple. If you're using the static version (from the live demo-site, simply
omit the style attribute from the
DIV-tags. So what was
< DIV style='display:none' >
< DIV >. And of course if you're into details, you should change the
images in front of the items from plus.gif to minus.gif. If you're using the
scripts that generate a tree from a database, you should hack it the other way around, because
that sample is initially expanded. It's quite straightforward, but when I find the time I
could post 2 versions of the samples, one collapsed and the other one expanded.
How can I liven up the treeview to make it look better? Well, I've been working on
a pure-HTML extension of the treeview with a colleague of mine, which draws lines in the treeview,
like MFC treeviews do. I will post this version shortly.
I developed this treeview for Internet Explorer 5, which is not such a good idea if you
want to develop a cross-browser treeview because Microsoft has the tendency to build all
kind of fancy non-standard goodies into it's browser. Luckily some people on the
have tested it on other browsers and it only seemed to work on IE5 (not even IE4!). I'm now
in the process of evaluating what I can do to improve this. Today (June 13th 2001) I checked
all my script-entries against the actual standards and found out that all of it should work
on browsers supporting CSS Level 1, HTML 4.0 and DOM Level 2. I made
some modifications today as well and I'm curious on which browsers the script works correctly.
The treeview has been tested on the following browsers:
|Microsoft Internet Explorer 4 (SP 2)||Doesn't Work!|
|Microsoft Internet Explorer 5.0 (for Macintosh)||Work partially (different look)|
|Microsoft Internet Explorer 5.00.3103.1000||Works!|
|Microsoft Internet Explorer 5.50.4522.1800C0||Works!|
|Microsoft Internet Explorer 6.00.2462.0000||Works!|
|Netscape 4.77||Doesn't work!|
|Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; 0.8.1) Gecko/20010323||Works!|
|Opera 5.0 (Build 528 on Windows 2000)||Doesn't work!|
|Opera 6||Doesn't work!|
(Thanks to Jorge Sabater Redondo, Alexandra Berg, Neal Costello, Zinggl Alois,
Jens Kreiensiek, Arnt Witteveen, Jamie Nordmeyer, Bryan Pietrzak and Bruce for the testing!)
If you have another browser than listed above, please test the script at
THIS live-demo site and
mail me to tell me if it did or didn't work on your
browser... Together we can build a better treeview, I know it!