<!-- Download Links -->
<!-- Article image -->
<!-- Add the rest of your HTML here -->
I needed a class to create a tree list control for a web application I'm building, and after looking around on the net and failing to find anything similar, I decided to create my own. The main challenge with creating a decent tree list control with HTML, CSS and JScript is that there is no way to effectively create a node heirarchy and guarantee that the columns for each node will line up with the columns for all the other nodes. I experimented with div, span, table, tbody, thead, tr, p, ul, etc, but none offered an acceptable solution.
The ASP class generates an initial tree and the JScript code reads the html and extracts the information it needs to make the tree interactive. Unfortunately you can't update the tree with the current code once it has been generated in the browser, but that is ok because I had no need to do that.
My MAIN issue with this tree list control is, although it is reasonably fast to generate, and works perfectly, after you get about 100-200 nodes in the tree (I'm using a Pentium 4, 1.4ghz), the JScript starts getting very slow and unresponsive. If you find this control useful and manage to optimise the jscript code so that it is actually fast with a large number of nodes in the tree, I would greatly appreciate it if you could post the updated code here so I can take a look.
Below is the code to create a demonstration tree list. As you can see the control is very easy to use, just create an instance of the control, add the column headings, and then add the nodes. You can't add a node if its parent doesn't yet exist. Also, you should not reveal a node using the reveal function unless the node actually exists. Doing so will cause the page to create an error.
<!--<span class="code-comment">#include file="treelistcontrol/treelistcontrol.asp"--></span>
set tree = new treelistcontrol
'specify our default settings for the tree
tree.allowrowselect = false
tree.showborder = false
tree.pathtoicons = "treelistcontrol/"
tree.showdividers = false
'define the columns for the tree
tree.addcolumn "Node Name", "", ""
tree.addcolumn "Day of Week", "100", ""
tree.addcolumn "Month", "100", ""
tree.addcolumn "Random Number", "80", "right"
dim id, parentid, theday, themonth, thenumber
for id = 1 to 100
'make some random values for the tree
parentid = int(rnd*id)
theday = weekdayname(int(rnd*7)+1)
themonth = monthname(int(rnd*12)+1)
thenumber = formatnumber(int(rnd*1000000),,,true)
'add the node
tree.addnode id+0, parentid, "treelistcontrol/icon_folder.gif", false, _
array(id+0, theday, themonth, thenumber)
'reveal node #100