Tree Editor 
Collapse all tree nodesExpand as far as level 2Expand all tree nodes
Expand this node
Collapse
Expand this node
Introduction
This site offers:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
...which displays collapsible, hierarchical tree structures on web pages;
Expand this node
Collapse
Expand this node
...which allows hierarchical tree structures to be created and manipulated using a web browser.
Expand this node
Collapse
Expand this node
Technology overview
The tree display is generated on the server using PHP;
It's rendered on the client using JavaScript and DHTML;
Expand this node
Collapse
Expand this node
More details...
The tree editor manipulates a representation of the tree in a standard SQL database;
The tree editor uses a double database abstraction layer;
By default, the editor is set up to access MySQL via Pear - but other configurations are possible;
Trees can be rendered directly from database tables via SQL.
Trees can also be generated directly from PHP;
The code works with PHP 4 and PHP 5.
Expand this node
Collapse
Expand this node
Tree viewer
The tree viewer component generates collapsible, hierarchical trees on a web pages.
The tree viewer has its own web page here;
The tree is dynamic - users can:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
...expand nodes:
...to reveal additional details - or...
Expand this node
Collapse
Expand this node
...collapse nodes:
...to conceal superfluous information.
Trees can be nested;
Arbitrary HTML can be used in tree nodes;
Expand this node
Collapse
Expand this node
More details...
All content wraps correctly - without disturbing the tree display;
Trees are presented using a familiar interface - one immediately familiar to any users who have ever browsed through the directory structure of their machine's filing system;
The tree viewer is available as a stand-alone component;
Information about which branches of the tree are visible persists even if the page is left and returned to later.
Expand this node
Collapse
Expand this node
Tree editor
The tree editor application allows users to create and manipulate hierarchical trees using an ordinary web browser;
The tree editor has its own web page here;
The tree is rendered using the tree viewer component while it is being edited - providing a degree of "WYSIWYG" editing;
Several sorts of operation are permitted to be performed on the tree:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Single node-oriented operations:
...allow single "leaves" to be created, manipulated, modified or deleted;
Expand this node
Collapse
Expand this node
Branch-oriented operations:
...allow branches of the tree to be pruned - or grafted to other locations in the tree;
Expand this node
Collapse
Expand this node
Mass-node operations:
...these allow large numbers of nodes to be manipulated at once.
Branches of the tree can be treated as though they were independent roots;
Expand this node
Collapse
Expand this node
Applications
Many structures naturally form hierarchical trees:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Threaded discussions:
...often posts are made in response to other posts - and a natural way of rendering the results is a hierarchical tree;
Expand this node
Collapse
Expand this node
Human family trees:
Here a tree is a natural way of following blood lines;
Expand this node
Collapse
Expand this node
Nested lists:
In cases where lists can contain other lists, a natural representaion is a hierarchical tree;
Expand this node
Collapse
Expand this node
Taxonomical diagrams in biology:
Biological taxonomies are family trees on a grand scale;
Expand this node
Collapse
Expand this node
Addresses, domains, file paths:
The need to specify addresses as strings often results in them being arranged into a hierarchical tree;
Expand this node
Collapse
Expand this node
XML/HTML documents
A number of common document formats are structured into elements which naturally form nested hierarchical trees.
Collapsible trees also have many applications:
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
Collapsible trees can hide irrelevant information:
Information such as footnotes or references is often best kept out of the way of the casual reader. A collapsible tree can hide this information - while still keeping it only a click away;
Expand this node
Collapse
Expand this node
Collapsible trees can act as summaries:
A collapsible tree can present a summary initially - while still allowing readers to "drill down" on the points that interest them - without swamping them initially with lots of irrelevant details.
More examples should be available soon on our page of sample applications.
Expand this node
Collapse
Expand this node
Sample applications
Collapse all tree nodesExpand all tree nodes
Expand this node
Collapse
Expand this node
This SQL/DHTML application can be used to track problems and bugs. It uses the tree viewer component to render its display.
Expand this node
Collapse
Expand this node
This application allows the contents of a directory on the server to be navigated. The tree viewer component is again used to display the directory structure.

Expand this node
Collapse
Expand this node
Other sample sites
There are a variety of sites using the tree component.
A list of sample sites is available on the page devoted to the tree viewer.
Expand this node
Collapse
Expand this node
Source code
Source code for the tree viewer tree editor and is available here.
Expand this node
Collapse
Expand this node
License
Everything on this web site has been placed into the public domain by its author.
Expand this node
Collapse
Expand this node
Development
This program is under active development - and you're welcome to join in.
Expand this node
Collapse
Expand this node
More details...
The license terms of the code maximise the ease of reusing this code in other projects.
If you use the code, you are warmly invited to contribute any constructive changes you make back to the project.
That way others benefit, the project benefits - and you are likely to benefit as a user of it.
To give some idea of what's planned, here are:
Expand this node
Collapse
Expand this node
Tree viewer
...the "ToDo" list;
...the list of known problems;
Expand this node
Collapse
Expand this node
Tree editor
...the "ToDo" list;
...the list of known problems.
Expand this node
Collapse
Expand this node
Links


Tim Tyler | Contact | http://treeeditor.com/