Q1781 How to make a collapsible treeview applet with JavaScript?

You are here: irt.org | FAQ | DHTML | Q1781 [ previous next ]

A treeview applet in DHTML requires the following pieces of code:

- A section that is configurable to describe the actual tree structure

- An internal representation of the tree made with JavaScript objects (nodes)

- A rendering engine that recursively calls the drawing functions of the nodes

Each node can be a folder or a link. If the node is a folder it will know about the child nodes (sub-folders and links.) Folder nodes have a rendering function different than link nodes, but both output HTML that will can be dynamically be made visible or invisible.

That dynamic visibility is what makes the tree expand or collapse entirely in the client-side.

//Example. Constructor of class folder:

function Folder(folderDescription, hreference) //constructor
{
  //constant data
  this.desc = folderDescription
  this.hreference = hreference
  this.id = -1
  this.navObj = 0
  this.iconImg = 0
  this.nodeImg = 0
  this.isLastNode = 0

  //dynamic data
  this.isOpen = true
  this.iconSrc = "ftv2folderopen.gif"
  this.children = new Array
  this.nChildren = 0

  //methods
  this.initialize = initializeFolder
  this.setState = setStateFolder
  this.addChild = addChild
  this.createIndex = createEntryIndex
  this.escondeBlock = escondeBlock
  this.esconde = escondeFolder
  this.mostra = mostra
  this.renderOb = drawFolder
  this.totalHeight = totalHeight
  this.subEntries = folderSubEntries
  this.outputLink = outputFolderLink
  this.blockStart = blockStart
  this.blockEnd = blockEnd
}

//Rendering function for class folder:

function drawFolder(leftSide)
{
  var idParam = "id='folder" + this.id + "'"

  if (browserVersion == 2) {
    if (!doc.yPos)
      doc.yPos=20
  }

  this.blockStart("folder")

  doc.write("<tr><td>")
  doc.write(leftSide)
  this.outputLink()
  doc.write("<img id='folderIcon" + this.id + "' name='folderIcon" + this.id + "' src='" + this.iconSrc+"' border=0></a>")
  doc.write("</td><td valign=middle nowrap>")
  if (USETEXTLINKS)
  {
    this.outputLink()
    doc.write(this.desc + "</a>")
  }
  else
    doc.write(this.desc)
  doc.write("</td>")

  this.blockEnd()

  if (browserVersion == 1) {
    this.navObj = doc.all["folder"+this.id]
    this.iconImg = doc.all["folderIcon"+this.id]
    this.nodeImg = doc.all["nodeIcon"+this.id]
  } else if (browserVersion == 2) {
    this.navObj = doc.layers["folder"+this.id]
    this.iconImg = this.navObj.document.images["folderIcon"+this.id]
    this.nodeImg = this.navObj.document.images["nodeIcon"+this.id]
    doc.yPos=doc.yPos+this.navObj.clip.height
  } else if (browserVersion == 3) {
    this.navObj = doc.getElementById("folder"+this.id)
    this.iconImg = doc.getElementById("folderIcon"+this.id)
    this.nodeImg = doc.getElementById("nodeIcon"+this.id)
  }
}

The full source can be downloaded for free from this location: http://www.mmartins.com/ft/

Submitted by Marcelino Martins