Treeview JavaScript Applet

Treeview Demos

Click a link to load a demo

Requirements: Treeview uses JavaScript and DHTML for basic layout, and cookies only for advanced features. Make sure the three are fully enabled, not only in your browser but also in your firewall and antivirus software. If you are using Netscape and running the advanced demos, turn on the cookies settings not only under "Privacy", but also under "Scripts & Plug ins".

Basic frame-based layout
The basic functionality of the Treeview is demonstrated here, including options for selecting window targets, associating links with the folders themselves, and customizing icons. This demo has the highlight option turned off.

Basic frameless layout

Webmasters have the option of either displaying the tree in a frame by itself or, as in this case, in a frameless page together with other HTML. This demo also has the highlight option turned off.

Highlight example (also frameless)

A variant of the above demo that showcases the highlight functionality. Note that only nodes that actually load pages (folders or "docs") can be highlighted. The STARTALLOPEN option is also demoed.

Very-large-tree example

Treeview renders large trees very quickly. After the page is loaded, see how fast the Treeview render engine displays this 1500+ nodes (folder and links) tree. Check also the highlight on the leaf nodes (the days).

Advanced: Show All, Collapse All and other JavaScript functions

JavaScript functions can be used to manipulate Treeview, for example: "open all folders", "close all folders", "open specific folder", "select specific node and load its page". Conversely, tree nodes can be used to call JavaScript functions, which may or may not actually load pages. Both types of communication between Treeview and other JavaScript code are demonstrated in this example.

Advanced: Checkbox Tree, a FORM example

This tree adds checkboxes to each item. The additional HTML needed for the checkboxes is supplied by the prependHTML method within the tree-configuration statements. The form itself is put in the left frame document, like any other HTML form. This kind of tree is very useful to input and display web application settings and other user options.

Advanced: Dynamic, server-side construction of the tree, reading from a database

Treeview is a client-side component (an applet); if the contents of your tree are not supposed to be automatically updated, you will not need server-side code. The language used in this demo was ASP. Other scripts can be built for PHP, Cold fusion, etc, and they will follow the same generic design. Other users have contributed with similar demos in different languages. Click on a link to download a ZIP file with the source code:
• Server-side tree construction in ASP.NET.
• Server-side tree construction in JSP.

It is unlikely that your project will be able to use one of the codes above as is. There are many possible configurations for a tree retrieved from a database and many possible database schemas. The demos cannot tell you how to implement your particular server side application. Their objective is to provide you with a starting point.

Other applications using the tree

Database-driven example (Treeview Visual Builder)
The Treeview Visual Builder shows how database-driven, server-side applications can use the Treeview as the front end.

File Browser (PHP or ASP)

Given a valid path inside a file system, creates a tree with the directories and files. The directories are all listed. The files are only shown if they have one of the extensions chosen to be visible by the webmaster.