Tree View

Sample Image - screenshot.gif

Introduction

Tree View builds tree browsers for your web pages. It was inspired by D. D. de Kerf who created Easy DHTML treeview.

However, it was not practical for creating complex dynamic trees. So I took his ideas and wrote a JavaScript that uses DOM to build the hierarchical document he created with static HTML.

To build the tree is very straightforward:

You include the treeview.js file into your HTML.

<script language="javascript" src="scripts/tree_view.js"></script>

Hook into the event that calls a method when the page is loaded:
```
<body onLoad="CreateProjectExplorer()">
```

Create a function that builds the tree:

function CreateProjectExplorer()
{
    Initialise();
    // This MUST be the called before
    // any other of treeview's funcitons.

    // Build a test project.
    d = CreateTreeItem( rootCell, "img/project.gif", 
        "img/project.gif", "Point of Sale terminal", 
        null, null );
    d2 = CreateTreeItem( d, "img/folder_closed.gif", 
         "img/folder_open.gif", "Actors", null, null );
    // .....
}

That's it! You are up and running with a tree browser.

The function signature is:

// Creates a new package under a parent. 
// Parameters:
//    parent: The parent element of the new element. (E.g. a folder)
//    img1FileName: File name of the "unclicked" image. (E.g. Closed folder)
//    img2FileName: File name of the "clicked" image. (E.g. Open folder)
//    nodeName: The text to display for the tree node.
//    url: The url to link to when the node is clicked.
//    target: Target when the node is clicked.
//            Possible values are: Frame name, _blank, _self
// Returns:
//    The newly created tree node item. 
//    To create children of the new node pass the returned 
//    node in as a parent of another new node.
function CreateTreeItem( parent, img1FileName, 
                         img2FileName, nodeName, url, target )

Thanks to D. D. de Kerf for the inspiration!

Note: This script is supplied "as is" without any form of warranty. Rewritten Software shall not be liable for any loss or damage to person or property as a result of using this script. Use this script at your own risk!

You are licensed to use this script free of charge for commercial or non-commercial use providing you do not remove the copyright notice or disclaimer from the comment section in the script.

Have fun!

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

About the Author

Bryon Baker

Web Developer

Australia

Member

No Biography provided

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Tree View builds tree browsers for your web pages.

Type	Article
Licence
First Posted	16 Mar 2005
Views	146,710
Bookmarked	43 times

JavascriptWindows
HTMLDevIntermediate

		9,887,886 members (28,328 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Introduction

License

About the Author

Comments and Discussions