Tree View - CodeProject®

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

Article Top

Poor

Excellent

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

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Thanx

ajay_nahan

22:36 25 Jan '09

It Helps me lot Thanx Again
Sign In·View Thread·Permalink

How to use it in asp.net2.0

VimalSaifudin

20:39 11 Nov '07

The + and - images are not displayed on pageLoad. After refreshing or clicking on each nodes, they are displayed. What might be the reason?
Sign In·View Thread·Permalink	1.40/5 (5 votes)

Opening the URL in the same window

ai4u

4:00 28 Jun '07

I am using this treeview on a page and not using Frames . i want to open the link on one of the childnodes in the same window of the browser . how can I do that . With the present code when I click on any childnode with URL it opens in another window. I tried by giving the value to "target" parameter but nothing happened. Atul
Sign In·View Thread·Permalink	2.00/5 (1 vote)

how to display xml data in treecheckbox using javascript

snitu

19:35 8 Apr '07

hi all I m new user of this group. i am using javascript for creating treecheckbox. the problem is how to show the nodes name from xml file. Plz.??????????????????? reply me as soon as possible. thanks snitu
Sign In·View Thread·Permalink	2.33/5 (3 votes)

Not running

sdhiman

1:06 28 Dec '06

Dear sir,

I want to display a tree of groups and subgroups. This tree script is good for small numbers of groups but not well if there are a huge number of groups around 2000.

I gives an error 'A script on this page is causing Internet Explorer to run slowly, if it continues to run your computer may became unresponsive.
Do you want to abort the script ?'

The above message is display,
is there any solution...
sanjeev dhiman
sdhiman@coecipl.com

Sanjeev Dhiman
Software Engineer
NOIDA, India
sdhiman@coecipl.com

Drawing the tree in a special location

islam galileo

4:13 19 Apr '06

hi how it is going i used the script and it is very good but i wanna the tree to be drawn in a specific location inside a td i don't want it to be at the left of the document so how i can do this
Sign In·View Thread·Permalink	1.00/5 (2 votes)

Re: Drawing the tree in a special location

islam galileo

4:16 19 Apr '06

i think i found the solution that is by selecting another element by its id and it works with td not table
Sign In·View Thread·Permalink	1.67/5 (3 votes)

Re: Drawing the tree in a special location

jrios

9:24 21 May '06

I insert a table and to rootCell variable assign : rootCell=tblMenu.cells(0); Note: "tblMenu" is the name of the table, I hope you understand me, bye
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Removing Plus When there are no child nodes

Mikan23

13:39 14 Feb '06

Very nice script. But for those trying to remove the expansion sign in front when an item has no children. After adding all of your nodes, just run this function (just an adaption of toggle() without the toggle)

function TestIcons() {

    var idx = -1;

    for( i = 0; i < iconList.length; i++ )

    {

        item = iconList[i][0];

        if (item) {

            idx = i;

        

            var div=document.getElementById("D"+item);

            var key=document.getElementById("P"+item);

            

            

            // Check if the item clicked has any children. If it does not then remove the plus/minus icon

            // and replace it with a transaparent gif.

            var removeIcon = div.hasChildNodes() == false;

            

            if( key != null )

            {

                if( removeIcon )

                    key.innerHTML="<img src='transparent.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";

            }

        }

    }

}

Re: Removing Plus When there are no child nodes

mrtsherman

17:45 30 Apr '06

Where do you place the function call?
Sign In·View Thread·Permalink

Re: Removing Plus When there are no child nodes

Mikan23

20:51 30 Apr '06

You should call TestIcons() at the end of the CreateProjectExplorer function as shown. `function CreateExplorer() { Initialize(); CreateTreeItem(); //however many times you call it TestIcons(); }` Then call CreateExplorer() in the body OnLoad.
Sign In·View Thread·Permalink

Re: Removing Plus When there are no child nodes

mrtsherman

6:37 2 May '06

Yes, that is what I thought. It appears that this only works in latest versions of FireFox and does not work in IE 6. I'm not sure why it does not work. I tried on two different machines running WindowsXP SP2 + IE6. Thank-you for the reply.
Sign In·View Thread·Permalink

Re: Removing Plus When there are no child nodes

Mikan23

14:13 18 May '06

Okay, I've updated the code so it now works in both Firefox and IE 6, I cannot vouch for older versions of either, but at least with the latest items, this version should work.



function TestIcons() {

	var idx = -1;

	var item = false;

	for( i = 0; i < iconList.length; i++ )

	{

		if (iconList[i].length != 0) {

			item = new String(iconList[i][0]);

		}

 

		if (item) {

			idx = i;

		

			if( idx < 0 )

				alert( "Could not find key in Icon List." );

				   

			var div=document.getElementById("D"+item);

			var key=document.getElementById("P"+item);

			

			// Check if the item clicked has any children. If it does not then remove the plus/minus icon

			// and replace it with a transaparent gif.

			var removeIcon = false;

			if (div.hasChildNodes() == null || div.hasChildNodes() == false) {

				var removeIcon = true;

			}

			

			if( key != null )

			{

				if( removeIcon )

					key.innerHTML="<img src='transparent.gif' width='16' height='16' hspace='0' vspace='0' border='0'>";

			}

		}

	}

}

thanks

Merlin Rose

22:13 5 May '09


Sign In·View Thread·Permalink

Thank You

davidgev

10:46 30 Nov '05

Hello.
Thanks a lot for the tree, it works well.
But there is some things that I don't like, isn't it
possible to remove (from the beginning) the plus image icon from
nodes wich don't have child nodes (I've noticed that you do so when
the node is clicked), and I have one more comment regarding this, also
when the node doesn't have any child nodes then by clicking it the
image icon which indicates for ex. that folder is open must not appear, because it doesn't have any childs (it seems same problem as with plus
icon) Also, is it possible to make this tree open travesed from the beginning
(I mean when the tree, page is opened the child nodes are already opened, is yes please help me, how I can do this)

Thanks in advance.

David Gevorkian (davidgev@lycos.com)

TreeView Vertical Lines

Lorraine Concos

6:41 30 Sep '05

Thanks for your help, one more question: how do we get the vertical lines to appear with Tree View?
Sign In·View Thread·Permalink	1.00/5 (2 votes)

Re: TreeView Vertical Lines

Bryon Baker

17:23 30 Sep '05

That is more tricky, but achievable.

You will need to change how the nesting works. At the moment it just uses padding when the DIV is created for the child with the CreateDiv() method. The line that controls the indentation of the children is: div.style.marginLeft = "2em";
Change this value to "5em" and "0em" how it works.

To also better understand the nesting change the value of the border attribute in the CreateTreeItem() method.
table.setAttribute( "border", 1 );

Once you have done this you will see how the nesting works and then it will be self evident as to what you need to do.

But, in a nut shell, in order to get the vertical bars you will need to reduce the padding to zero and create a new TD in each TR for every level of indentation. Then assign the cell an image.

When playing with this I suggest you keep borders visible so you can see what is happening.

Bryon

Expand Tree View

Lorraine Concos

5:28 28 Sep '05

Excellent code for Tree View, but we get an error when we want to expand Tree View automatically (the error is in line 80 of tree_view.js, key not recognized). Can someone send us an example with Tree View Expanded?
Sign In·View Thread·Permalink	2.25/5 (4 votes)

Re: Expand Tree View

Bryon Baker

11:25 28 Sep '05

The reason you are getting the error is that the Expand() and Collapse() methods are old ones that I forgot to delete. They won't work as they stand.

The way Tree View works is that is creates a hash that uniquely identifies every node. When you click on the expand or collapse symbols (+ or -) the hash is passed so that it can work out which one needs to be expanded or collapsed.

You need to modify the Expand and Collapse methods to pass these hash keys.

Regards,

Bryon

line provision

Sudhakar J

2:17 27 Sep '05

good work How to see lines on ur stuff
Sign In·View Thread·Permalink	3.50/5 (2 votes)

Re: line provision

Sudhakar J

2:32 27 Sep '05

and also where is the provision to store value for particular node
Sign In·View Thread·Permalink

expand tree node

mwong7025

17:14 8 Aug '05

Good treeview. Question: how do you set to expand a default tree node intialially upon creation?
Sign In·View Thread·Permalink

Re: expand tree node

Bryon Baker

0:46 9 Aug '05

Change the CreateDiv() method to be:

// Creates a new DIV tag and appends it to parent if parent is not null.
// Returns the new DIV tag.
function CreateDiv( parent, id, expand )
{
div=document.createElement("DIV");
if( parent != null )
parent.appendChild( div );

div.setAttribute( "id", "D"+id );
if( expand == true )
div.style.display = "block";
else
div.style.display = "none";
div.style.marginLeft = "2em";

return div;
}

Add another parameter to the CreateTreeNode() and pass it down the chain.

There is an old Expand() method that I forgot to delete. It will almost do what you want. With a small mod, if you call it it will expand the entire tree.

Regards,

Bryon

Thanks

EEmadzadeh

16:59 6 Aug '05

Tankx,very nice treeview, i used AJAX to make it more dynamic
Sign In·View Thread·Permalink

Re: Thanks

Sudhakar J

5:54 27 Sep '05

i too have similar requirement , when i click particular node i should populate some other nodes from server (i am using script callback instead of AJAX) , so for this i need to assign some particular value for nodes , can u help on this Thanks Sudhakar
Sign In·View Thread·Permalink	2.00/5 (1 vote)