How can I create and populate a tree? (HTA or HTML)

jaisol · Aug 24, 2007

Hi,

I'm looking for the way to create and populate a tree through vbs either using HTA or HTML.

I found some ASP options on Internet.
For example, I tried to adapt following asp method to vbs with no success

How To Populate an ActiveX TreeView Control Using ASP

http://support.microsoft.com/kb/q183329

Thanks in advance.

dilettante · Aug 25, 2007

It isn't easy to describe, but the general idea is pretty much the same for most approaches I have seen. Here's a demo that may give you an idea of one way to do it:

Code:

<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>

Here I've just "statically" built the treeview in the onload event. I won't claim this is bug free, it's just a sample.

You can easily vary the behavior of the treeview for more advanced operations.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How can I create and populate a tree? (HTA or HTML)

jaisol

Programmer

dilettante

MIS

Similar threads

Part and Inventory Search

Sponsor