INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Date format

Creating a folder tree view by greyone
Posted: 16 May 01

To create a folder tree view first of all create an html file (say test.html) and copy the following code:

test.html

<html>
<HEAD>
<script language="javascript" src="menu1.js"></script>
<script language="javascript" src="menutree.js"></script>
<script>
 initializeDocument()
</script>
</HEAD>
<BODY>
</body>
</html>

The code for the tree view is included in 2 js files menu1.js and menutree.js which are as follows:

menu1.js

function Folder(folderDescription, hreference)
{
    
  this.desc = folderDescription
  this.hreference = hreference
  this.id = -1   
  this.navObj = 0  
  this.iconImg = 0  
  this.nodeImg = 0  
  this.isLastNode = 0
 
  this.isOpen = true
  this.iconSrc = "folderopen.gif"   
  this.children = new Array
  this.nChildren = 0
 
  this.initialize = initializeFolder
  this.setState = setStateFolder
  this.addChild = addChild
  this.createIndex = createEntryIndex
  this.hide = hideFolder
  this.display = display
  this.renderOb = drawFolder
  this.totalHeight = totalHeight
  this.subEntries = folderSubEntries
  this.outputLink = outputFolderLink
}
 
function setStateFolder(isOpen)
{
  var subEntries
  var totalHeight
  var fIt = 0
  var i=0
 
  if (isOpen == this.isOpen)
    return
 
  if (browserVersion == 2)  
  {
    totalHeight = 0
    for (i=0; i < this.nChildren; i++)
      totalHeight = totalHeight + this.children.navObj.clip.height
      subEntries = this.subEntries()
    if (this.isOpen)
      totalHeight = 0 - totalHeight
    for (fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)
      indexOfEntries[fIt].navObj.moveBy(0, totalHeight)
  }  
  this.isOpen = isOpen
  propagateChangesInState(this)
}
 
function propagateChangesInState(folder)
{   
  var i=0
 
  if (folder.isOpen)
  {
    if (folder.nodeImg)
      if (folder.isLastNode)
        folder.nodeImg.src = "mlastnode.gif"
      else
      folder.nodeImg.src = "mnode.gif"
    folder.iconImg.src = "folderopen.gif"
    for (i=0; i<folder.nChildren; i++)
      folder.children.display()
  }
  else
  {
    if (folder.nodeImg)
      if (folder.isLastNode)
        folder.nodeImg.src = "plastnode.gif"
      else
      folder.nodeImg.src = "pnode.gif"
    folder.iconImg.src = "folderclosed.gif"
    for (i=0; i<folder.nChildren; i++)
      folder.children.hide()
  }  
}
 
function hideFolder()
{
  if (browserVersion == 1) {
    if (this.navObj.style.display == "none")
      return
    this.navObj.style.display = "none"
  } else {
    if (this.navObj.visibility == "hiden")
      return
    this.navObj.visibility = "hiden"
  }
   
  this.setState(0)
}
 
function initializeFolder(level, lastNode, leftSide)
{
var j=0
var i=0
var numberOfFolders
var numberOfDocs
var nc
      
  nc = this.nChildren
   
  this.createIndex()
 
  var auxEv = ""
 
  if (browserVersion > 0)
    auxEv = "<a href='javascript:clickOnNode("+this.id+")'>"
  else
    auxEv = "<a>"
 
  if (level>0)
    if (lastNode) //the last 'brother' in the children array
    {
      this.renderOb(leftSide + auxEv + "<img name='nodeIcon" + this.id + "' src='mlastnode.gif' border=0></a>")
      leftSide = leftSide + "<img src='blank1.gif'>"  
      this.isLastNode = 1
    }
    else
    {
      this.renderOb(leftSide + auxEv + "<img name='nodeIcon" + this.id + "' src='mnode.gif' border=0></a>")
      leftSide = leftSide + "<img src='vertline.gif'>"
      this.isLastNode = 0
    }
  else
    this.renderOb("")
   
  if (nc > 0)
  {
    level = level + 1
    for (i=0 ; i < this.nChildren; i++)  
    {
      if (i == this.nChildren-1)
        this.children.initialize(level, 1, leftSide)
      else
        this.children.initialize(level, 0, leftSide)
      }
  }
}
 
function drawFolder(leftSide)
{
  if (browserVersion == 2) {
    if (!doc.yPos)
      doc.yPos=8
    doc.write("<layer id='folder" + this.id + "' top=" + doc.yPos + " visibility=hiden>")
  }
   
  doc.write("<table ")
  if (browserVersion == 1)
    doc.write(" id='folder" + this.id + "' style='position:block;' ")
  doc.write(" border=0 cellspacing=0 cellpadding=0>")
  doc.write("<tr><td>")
  doc.write(leftSide)
  this.outputLink()
  doc.write("<img name='folderIcon" + this.id + "' ")
  doc.write("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>")  
  doc.write("</table>")
   
  if (browserVersion == 2) {
    doc.write("</layer>")
  }
 
  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
  }
}

function outputFolderLink()
{
  if (this.hreference)
  {
    
    doc.write("<a href='" + this.hreference + "' TARGET=\"basefrm\" ")
    
    if (browserVersion > 0)
      doc.write("onClick='javascript:clickOnFolder("+this.id+")'")
    doc.write(">")
  }
  else
    doc.write("<a>")
//  doc.write("<a href='javascript:clickOnFolder("+this.id+")'>")
}
 
function addChild(childNode)
{
  this.children[this.nChildren] = childNode
  this.nChildren++
  return childNode
}
 
function folderSubEntries()
{
  var i = 0
  var se = this.nChildren
 
  for (i=0; i < this.nChildren; i++){
    if (this.children.children) //is a folder
      se = se + this.children.subEntries()
  }
 
  return se
}
 
 
function Item(itemDescription, itemLink)
{
  // constant data
  this.desc = itemDescription
  this.link = itemLink
  this.id = -1 //initialized in initalize()
  this.navObj = 0 //initialized in render()
  this.iconImg = 0 //initialized in render()
  this.iconSrc = "doc.gif"
 
  // methods
  this.initialize = initializeItem
  this.createIndex = createEntryIndex
  this.hide = hideItem
  this.display = display
  this.renderOb = drawItem
  this.totalHeight = totalHeight
}
 
function hideItem()
{
  if (browserVersion == 1) {
    if (this.navObj.style.display == "none")
      return
    this.navObj.style.display = "none"
  } else {
    if (this.navObj.visibility == "hiden")
      return
    this.navObj.visibility = "hiden"
  }     
}
 
function initializeItem(level, lastNode, leftSide)
{  
  this.createIndex()
 
  if (level>0)
    if (lastNode) //the last 'brother' in the children array
    {
      this.renderOb(leftSide + "<img src='lastnode.gif'>")
      leftSide = leftSide + "<img src='blank1.gif'>"  
    }
    else
    {
      this.renderOb(leftSide + "<img src='node.gif'>")
      leftSide = leftSide + "<img src='vertline.gif'>"
    }
  else
    this.renderOb("")   
}
 
function drawItem(leftSide)
{
  if (browserVersion == 2)
    doc.write("<layer id='item" + this.id + "' top=" + doc.yPos + " visibility=hiden>")
     
  doc.write("<table ")
  if (browserVersion == 1)
    doc.write(" id='item" + this.id + "' style='position:block;' ")
  doc.write(" border=0 cellspacing=0 cellpadding=0>")
  doc.write("<tr><td>")
  doc.write(leftSide)
  doc.write("<a href=" + this.link + ">")
  doc.write("<img id='itemIcon"+this.id+"' ")
  doc.write("src='"+this.iconSrc+"' border=0>")
  doc.write("</a>")
  doc.write("</td><td valign=middle nowrap>")
  if (USETEXTLINKS)
    doc.write("<a href=" + this.link + ">" + this.desc + "</a>")
  else
    doc.write(this.desc)
  doc.write("</table>")
   
  if (browserVersion == 2)
    doc.write("</layer>")
 
  if (browserVersion == 1) {
    this.navObj = doc.all["item"+this.id]
    this.iconImg = doc.all["itemIcon"+this.id]
  } else if (browserVersion == 2) {
    this.navObj = doc.layers["item"+this.id]
    this.iconImg = this.navObj.document.images["itemIcon"+this.id]
    doc.yPos=doc.yPos+this.navObj.clip.height
  }
}
 
// Methods common to both objects
// ********************************************************
 
function display()
{
  if (browserVersion == 1)
    this.navObj.style.display = "block"
  else
    this.navObj.visibility = "show"
}
 
function createEntryIndex()
{
  this.id = nEntries
  indexOfEntries[nEntries] = this
  nEntries++
}
 
// total height of subEntries open
function totalHeight() //used with browserVersion == 2
{
  var h = this.navObj.clip.height
  var i = 0
   
  if (this.isOpen) //is a folder and _is_ open
    for (i=0 ; i < this.nChildren; i++)  
      h = h + this.children.totalHeight()
 
  return h
}
  
// Events
// *********************************************************
 
function clickOnFolder(folderId)
{
  var clicked = indexOfEntries[folderId]
 
  if (!clicked.isOpen)
    clickOnNode(folderId)
 
  return  
 
  if (clicked.isSelected)
    return
}
 
function clickOnNode(folderId)
{
  var clickedFolder = 0
  var state = 0
 
  clickedFolder = indexOfEntries[folderId]
  state = clickedFolder.isOpen
 
  clickedFolder.setState(!state) //open<->close  
}
 
function initializeDocument()
{
  if (doc.all)
    browserVersion = 1 //IE4   
  else
    if (doc.layers)
      browserVersion = 2 //NS4
    else
      browserVersion = 0 //other
 
  foldersTree.initialize(0, 1, "")
  foldersTree.display()
  
  if (browserVersion > 0)
  {
    doc.write("<layer top="+indexOfEntries[nEntries-1].navObj.top+">รก</layer>")
 
    // close the whole tree
    clickOnNode(0)
    // open the root folder
    clickOnNode(0)
  }
}
 
// Auxiliary Functions for Folder-Treee backward compatibility
// *********************************************************
 
function gFld(description, hreference)
{
  folder = new Folder(description, hreference)
  return folder
}
 
function gLnk(target, description, linkData)
{
  fullLink = ""
 
  if (target==0)
  {
    fullLink = "'"+linkData+"' target=\"basefrm\""
  }
  else
  {
    if (target==1)
       fullLink = "'http://";+linkData+"' target=body"
    else
       fullLink = "'http://";+linkData+"' target=\"basefrm\""
  }
 
  linkItem = new Item(description, fullLink)   
  return linkItem
}
 
function insFld(parentFolder, childFolder)
{
  return parentFolder.addChild(childFolder)
}
 
function insDoc(parentFolder, document)
{
  parentFolder.addChild(document)
}
 
// Global variables
// ****************
 
USETEXTLINKS = 1
indexOfEntries = new Array
nEntries = 0
doc = document
browserVersion = 0
selectedFolder=0


in order to make this work you have to have the images as shown in the code. Either you could define your own images
or if you really want to see it working the way it is mail me at nitinkhanna@softhome.net and i will mail you the images.

The next js file is called menutree.js which is used to initialize the array and customise the folder tree view.
Here is a small example of what i have done:

menutree.js

foldersTree = gFld("<b>RET - Food Manufacturing</b>", "")
    aux1 = insFld(foldersTree, gFld("<font color=navy> 447000-Gasoline Stations</font>", ""))
    aux2 = insFld(aux1, gFld("447100-Gasoline Stations", "/---.jsp"))
        insDoc(aux2, gLnk(0, "447190-Other Gasoline Stations", "/---.jsp"))
        insDoc(aux2, gLnk(0, "447110-Gasoline Stations with Convenience Stores", "/---.jsp"))
        
    
    aux1 = insFld(foldersTree, gFld("<font color=navy> 447000-Gasoline Stations</font>", ""))
    
    aux2 = insFld(aux1, gFld("447100-Gasoline Stations", "/---.jsp"))
        insDoc(aux2, gLnk(0, "447190-Other Gasoline Stations", "javascript:alert('hello')"))
        insDoc(aux2, gLnk(0, "447110-Gasoline Stations with Convenience Stores", "/---.jsp"))
        
    aux2 = insFld(aux1, gFld("447100-Gasoline Stations", "/---.jsp"))
        insDoc(aux2, gLnk(0, "447190-Other Gasoline Stations", "/---.jsp"))
        insDoc(aux2, gLnk(0, "447110-Gasoline Stations with Convenience Stores", "/---.jsp"))
    
With all that in place you are ready to test out the Folder Tree View just like the one in Windows Explorer.
Go ahead and enjoy.
If you have any questions or concers feel free to mail me at nitinkhanna@softhome.net.



Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close