Click here to Skip to main content
15,895,746 members
Articles / Programming Languages / Javascript

Easy DHTML treeview

Rate me:
Please Sign up or sign in to vote.
4.85/5 (45 votes)
21 Feb 20025 min read 699.2K   14.1K   112  
A relatively easy implementation of a treeview using DHTML (Client Side JavaScript in conjunction with DOM). This implementation is straightforward and doesn't require the filling of java-arrays.
<%
	' --------------------------------------------------------
	' --- Name:    Easy DHTML Treeview Server Side library  --
	' --- Author:  D.D. de Kerf                             --
	' --- Version: 0.1                      Date: 6-6-2001  --
	' --------------------------------------------------------
	'
	

	' Output the Toggle-function (call only once per page!)
	Sub InitTreeView()
%>
<SCRIPT LANGUAGE="JavaScript">

// ---------------------------------------------
// --- Name:    Easy DHTML Treeview           --
// --- Author:  D.D. de Kerf                  --
// --- Version: 0.1           Date: 6-6-2001  --
// ---------------------------------------------
function Toggle(node)
{
	// Unfold the branch if it isn't visible
	if (node.nextSibling.style.display == 'none')
	{
		// Change the image (if there is an image)
		if (node.children.length > 0)
		{
			if (node.children.item(0).tagName == "IMG")
			{
				node.children.item(0).src = "minus.gif";
			}
		}

		node.nextSibling.style.display = '';
	}
	// Collapse the branch if it IS visible
	else
	{
		// Change the image (if there is an image)
		if (node.children.length > 0)
		{
			if (node.children.item(0).tagName == "IMG")
			{
				node.children.item(0).src = "plus.gif";
			}
		}

		node.nextSibling.style.display = 'none';
	}

}
</SCRIPT>
<%
	end Sub


	' Helper function for TopicsInTree. This function will be called recursively to load the whole tree from
	'	the database
	Sub SubTopicsInTree(DBconnection, topicID, topic, depth)

	   ' Query the database for all the direct subtopics of topic topicID
	   set rsSubtopics = DBconnection.execute( _
			"SELECT topicID, name FROM topic WHERE topicID IN (SELECT subtopicID " + _
			"FROM subtopic WHERE topicID = " + CStr(topicID) + ") ORDER BY name ASC")

      	   Response.Write("<TABLE BORDER=0><TR>")

	   if (depth > 1) then
		' This value (now 10) represents the hoziontal spacing between the branches
		Response.Write("<TD WIDTH=10></TD>")
	   end if

	   ' We have another branch. Solve the branch recursively
	   if not rsSubtopics.eof then
	   	Response.Write("<TD><A onClick=""Toggle(this)""><IMG SRC=""minus.gif""> " + topic + "</A><DIV>")

   	   	do while not rsSubtopics.eof 
			subtopicID = rsSubtopics(0)
			subtopic = rsSubtopics(1)
			call SubTopicsInTree(DBconnection, subtopicID, subtopic, depth + 1)
			rsSubtopics.movenext
		loop

	   ' We have a leaf. Simply print the leaf
	   else
	   	Response.Write("<TD><IMG SRC=""leaf.gif""> " + topic + "<DIV>")
	   end if

	   Response.Write("</DIV></TD></TR></TABLE>")

	   rsSubtopics.close
	   set rsSubtopics=nothing

	end Sub


	' The function that loads the treeview from the database and draws it in HTML
	Sub TopicsInTree(inputDSN)

	   ' Connect to the database
	   dim conntemp, rstemp
	   set conntemp=server.createobject("adodb.connection")
	   conntemp.open inputDSN

	   ' Query the database for topics that are no subtopic (so we'll get only the main topics)
	   set rsMainTopic=conntemp.execute( _
			"SELECT topicID, name FROM topic WHERE topicID NOT IN (SELECT subtopicID " + _
			"FROM subtopic) ORDER BY name ASC")

	   Response.Write("<TABLE BORDER=0>")
	   if not rsMainTopic.eof then
		   do while not rsMainTopic.eof 
		  	Response.Write("<TR><TD>")
			onderwerpID = rsMainTopic(0)
			onderwerp = rsMainTopic(1)

			' Every main topic is a branch of it's own, so they have to be solved
			'	recursively
        	       	call SubTopicsInTree(conntemp, onderwerpID, onderwerp, 1)

			rsMainTopic.movenext
		  	Response.Write("</TR></TD>")
		   loop
	   end if
	   Response.Write("</TABLE>")

	   ' Close the connection to the database
	   rsMainTopic.close
	   set rsMainTopic=nothing
	   conntemp.close
	   set conntemp=nothing

	end Sub

%>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


Written By
Web Developer
Netherlands Netherlands
I completed college Higher Informatics (HIO Breda, The Netherlands) in august 2000. I have been software engineer/documentalist/project manager with Bodégro Technical Automation since 1998 (started as part-time, full-time since august 2000).

Lots of experience with Delphi, Visual C++, PL/SQL, ASP and PHP. Started a succesfull knowledge-sharing initiative in late 1999 called 'Cohort Forum', which resulted in a web-site a lot like the codeproject.

Comments and Discussions