<HTML>
<!-- saved from url=(0011)about:blank -->
<!-- This demo assumes we have three small (9 x 9 pixel) images
in the directory holding the HTM/HTA file:
plus.gif small box with plus sign in it.
minus.gif small box with minus sign.
leaf.gif smal box with dot in it.
-->
<HEAD>
<TITLE>TreeView Demo</TITLE>
<STYLE>
BODY {font: normal normal normal 12pt/14pt Arial}
.clsTView {color: darkred;
font: normal normal normal 10pt/10pt Arial}
.clsTVNode {margin-left: 0; padding-left: 1.2em; text-indent: -1.2em}
</STYLE>
<SCRIPT language="VBScript">
Option Explicit
Sub TVLeafAppend(ByVal ParentTree, ByVal Text, ByVal LeafValue)
'Create treeview "leaf" under subtree ParentTree.
Dim leafNew, leafChild
Set leafNew = document.createElement("DIV")
With leafNew
.className = "clsTVNode"
Set .onclick = GetRef("TVLeaf_onclick")
.setAttribute "LeafValue", LeafValue
Set leafChild = document.createElement("IMG")
leafChild.src = "leaf.gif"
.appendChild leafChild
Set leafChild = document.createElement("SPAN")
leafChild.innerText = " " & Text
.appendChild leafChild
End With
If ParentTree.className = "clsTView" Then
ParentTree.appendChild leafNew
Else
ParentTree.children(2).appendChild leafNew
End If
End Sub
Sub TVLeaf_onclick()
'Put some action logic here. This demo just displays the
'LeafValue attribute but could easily do almost anything.
With window.event
spanLeaf.innerText = _
.srcElement.parentElement.LeafValue
.cancelBubble = True
End With
End Sub
Function TVTreeAppend(ByVal ParentTree, ByVal Text)
'Create treeview "subtree" under subtree ParentTree.
Dim treeNew, treeChild
Set treeNew = document.createElement("DIV")
With treeNew
.className = "clsTVNode"
Set .onclick = GetRef("TVTree_onclick")
Set treeChild = document.createElement("IMG")
treeChild.src = "plus.gif"
.appendChild treeChild
Set treeChild = document.createElement("SPAN")
treeChild.innerText = " " & Text
.appendChild treeChild
Set treeChild = document.createElement("DIV")
treeChild.style.display = "none"
.appendChild treeChild
End With
If ParentTree.className = "clsTView" Then
ParentTree.appendChild treeNew
Else
ParentTree.children(2).appendChild treeNew
End If
Set TVTreeAppend = treeNew
End Function
Sub TVTree_onclick()
'Expand/collapse subtree.
With window.event
With .srcElement
If .className <> "clsTVNode" Then
With .parentElement
If .children(2).style.display = "none" Then
.children(0).src = "minus.gif"
.children(2).style.display = "block"
Else
.children(0).src = "plus.gif"
.children(2).style.display = "none"
End If
End With
End If
End With
.cancelBubble = True
End With
End Sub
Sub window_onload()
'Build 4-level sample tree.
Dim treeLvl1, treeLvl2, treeLvl3
Set treeLvl1 = TVTreeAppend(tvDemo1, "Tree 1")
TVLeafAppend treeLvl1, "Leaf 1.1", "Action 1.1"
TVLeafAppend treeLvl1, "Leaf 1.2", "Action 1.2"
Set treeLvl2 = TVTreeAppend(treeLvl1, "Tree 1.3")
TVLeafAppend treeLvl2, "Leaf 1.3.1", "Action 1.3.1"
TVLeafAppend treeLvl2, "Leaf 1.3.2", "Action 1.3.2"
Set treeLvl3 = TVTreeAppend(treeLvl2, "Tree 1.3.3")
TVLeafAppend treeLvl3, "Leaf 1.3.3.1", "Action 1.3.3.1"
TVLeafAppend treeLvl3, "Leaf 1.3.3.2", "Action 1.3.3.2"
TVLeafAppend treeLvl3, "Leaf 1.3.3.3", "Action 1.3.3.3"
Set treeLvl2 = TVTreeAppend(treeLvl1, "Tree 1.4")
TVLeafAppend treeLvl2, "Leaf 1.4.1", "Action 1.4.1"
TVLeafAppend treeLvl2, "Leaf 1.4.2", "Action 1.4.2"
TVLeafAppend treeLvl2, "Leaf 1.4.3", "Action 1.4.3"
TVLeafAppend treeLvl2, "Leaf 1.4.4", "Action 1.4.4"
TVLeafAppend treeLvl1, "Leaf 1.5", "Action 1.5"
TVLeafAppend tvDemo1, "Leaf 2", "Action 2"
TVLeafAppend tvDemo1, "Leaf 3", "Action 3"
End Sub
</SCRIPT>
</HEAD>
<BODY>
<!-- Action display area -->
<DIV>Selected Leaf Value: <SPAN id="spanLeaf"></SPAN></DIV>
<HR>
<!-- DIV of class clsTView holds our treeview -->
<DIV class="clsTView" id="tvDemo1"></DIV>
</BODY>
</HTML>
