Easy DHTML treeview






4.85/5 (44 votes)
Jun 6, 2001
5 min read

709706

14079
A relatively easy implementation of a treeview using DHTML (Client Side JavaScript in conjunction with DOM). This implementation is straightforward and doesn't require the filling of java-arrays.
- Download demo (serialisation from database) - 12.8 KB
- Download example script files - 1.9 KB
- A working live demo
Introduction
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 treeview
s out there are built in quite a complex manner, making heavy use of client side JavaScript and difficult-to-handle structures like multi-dimensional arrays and such. There is, however, a more elegant way of implementing a treeview
using only one small client-side JavaScript and making use of DOM (Document Object Model) and basic HTML-tags such as DIV
.
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 DIV
and A
to create the real tree and then using one simple JavaScript function (triggered by clicking on a branch) to collapse and unfold 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).
So, when you click on the yellow 'branch name', the JavaScript function Toggle
will be called with a pointer to the branch name itself. 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 you to fill a JavaScript array (which is only 2 levels deep anyway and therefore not a real n-level 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' >
simply becomes < 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 treeview
s do. I will post this version shortly.
Cross-Browser Treeview?
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 kinds of fancy non-standard goodies into its browser. Luckily, some people on CodeProject 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! |
Netscape 6 | Works! |
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 those listed above, please test the script at THIS live-demo site and leave me a comment below to tell me if it did or didn't work on your browser... Together, we can build a better treeview
, I know it! ;-)
License
This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.
A list of licenses authors might use can be found here.