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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Creating a folder tree view

Date format

Creating a folder tree view

by  greyone  Posted    (Edited  )
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.


Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top