Click here to Skip to main content
11,417,750 members (47,643 online)
Click here to Skip to main content

Tree View

, 16 Mar 2005
Rate this:
Please Sign up or sign in to vote.
Tree View builds tree browsers for your web pages.

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:

  1. You include the treeview.js file into your HTML.
    <script language="javascript" src="scripts/tree_view.js"></script>
  2. Hook into the event that calls a method when the page is loaded:
    <body onLoad="CreateProjectExplorer()">
  3. 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

Share

About the Author

Bryon Baker
Web Developer
Australia Australia
No Biography provided

Comments and Discussions

 
GeneralThanx Pin
ajay_nahan25-Jan-09 22:36
memberajay_nahan25-Jan-09 22:36 
QuestionHow to use it in asp.net2.0 Pin
VimalSaifudin11-Nov-07 20:39
memberVimalSaifudin11-Nov-07 20:39 
QuestionOpening the URL in the same window Pin
ai4u28-Jun-07 4:00
memberai4u28-Jun-07 4:00 
Questionhow to display xml data in treecheckbox using javascript Pin
snitu8-Apr-07 19:35
membersnitu8-Apr-07 19:35 
GeneralNot running Pin
sdhiman28-Dec-06 1:06
membersdhiman28-Dec-06 1:06 
GeneralDrawing the tree in a special location Pin
islam galileo19-Apr-06 4:13
memberislam galileo19-Apr-06 4:13 
GeneralRe: Drawing the tree in a special location Pin
islam galileo19-Apr-06 4:16
memberislam galileo19-Apr-06 4:16 
GeneralRe: Drawing the tree in a special location Pin
jrios21-May-06 9:24
memberjrios21-May-06 9:24 
GeneralRemoving Plus When there are no child nodes Pin
Mikan2314-Feb-06 13:39
memberMikan2314-Feb-06 13:39 
GeneralRe: Removing Plus When there are no child nodes Pin
mrtsherman30-Apr-06 17:45
membermrtsherman30-Apr-06 17:45 
GeneralRe: Removing Plus When there are no child nodes Pin
Mikan2330-Apr-06 20:51
memberMikan2330-Apr-06 20:51 
GeneralRe: Removing Plus When there are no child nodes Pin
mrtsherman2-May-06 6:37
membermrtsherman2-May-06 6:37 
GeneralRe: Removing Plus When there are no child nodes Pin
Mikan2318-May-06 14:13
memberMikan2318-May-06 14:13 
Generalthanks Pin
Merlin Rose5-May-09 22:13
memberMerlin Rose5-May-09 22:13 
GeneralThank You Pin
davidgev30-Nov-05 10:46
memberdavidgev30-Nov-05 10:46 
GeneralTreeView Vertical Lines Pin
Lorraine Concos30-Sep-05 6:41
memberLorraine Concos30-Sep-05 6:41 
GeneralRe: TreeView Vertical Lines Pin
Bryon Baker30-Sep-05 17:23
memberBryon Baker30-Sep-05 17:23 
GeneralExpand Tree View Pin
Lorraine Concos28-Sep-05 5:28
memberLorraine Concos28-Sep-05 5:28 
GeneralRe: Expand Tree View Pin
Bryon Baker28-Sep-05 11:25
memberBryon Baker28-Sep-05 11:25 
Generalline provision Pin
Sudhakar J27-Sep-05 2:17
memberSudhakar J27-Sep-05 2:17 
GeneralRe: line provision Pin
Sudhakar J27-Sep-05 2:32
memberSudhakar J27-Sep-05 2:32 
Generalexpand tree node Pin
mwong70258-Aug-05 17:14
membermwong70258-Aug-05 17:14 
GeneralRe: expand tree node Pin
Bryon Baker9-Aug-05 0:46
memberBryon Baker9-Aug-05 0:46 
GeneralThanks Pin
EEmadzadeh6-Aug-05 16:59
memberEEmadzadeh6-Aug-05 16:59 
GeneralRe: Thanks Pin
Sudhakar J27-Sep-05 5:54
memberSudhakar J27-Sep-05 5:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150427.4 | Last Updated 16 Mar 2005
Article Copyright 2005 by Bryon Baker
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid