Need help with expand/collapse treeview 1

EdRev · Sep 16, 2005

This is a snippet of my asp code to display the files and folders of //SERVER/Documents directory in a collapsible treeview.
It works but I would want to make it more functional.

How it works, as everyone would have guessed, is that when the folder name (i.e f.name is the parent folder) it expands to display its content (files and folders).
Beside the folder name is an image (close.gif) to denote that this is a folder that needs to be clicked to expand and it just that, denotes. I would want the image to do the same as the folder name when clicked, expand or collapse the folder.
and at the same token, change the image to open.gif when expanded and change back to close.gif when collapsed.

Also, beside the file name is an image (bullet.gif). I would want it to open the file when clicked, the same way as when the file name (i.e fl1.name) is clicked.

The code below is from one of the thread in this forum and I just customized it to my specs.
in this piece of code: <a onClick="expandit(this)" onmouseover="style.cursor = 'hand'" class='sme' id="level">, do I need the class and id? and does it have to vary from span to span?

I would appreciate all the help.

<html>
<script language="JavaScript1.2">

</script>
<body>
<%

Dim fso, f, f1, fc, s,filedir

filedir = "//SERVER/Documents"

Set fso = CreateObject("Scripting.FileSystemObject")
Set f = fso.GetFolder(filedir)
Set fc = f.SubFolders

%>
<img src="close.gif"><a onClick="expandit(this)" onmouseover="style.cursor = 'hand'" class='sme' id="level"><%=f.name%></a>

<%

set fl = f.Files
For each fl1 in fl
%>
 
    <img src="bullet.gif"><a href="<%=fl1.path%>" target="_blank" style="color:darkgreen;"><%=fl1.name%></a>
<%
' for level files
next

For Each sf1 in fc
%> 
    <img src="close.gif"><a onClick="expandit(this)" onmouseover="style.cursor = 'hand'" class='sme1' id="level1"><%=sf1.name%></a>

<%
set f1 = fso.GetFolder(sf1.path)
set sf2 = f1.SubFolders
set fl2 = f1.Files
For each fl3 in fl2
%>
 
  <img src="bullet.gif"><a href="<%=fl3.path%>" target="_blank" style="color:darkgreen;"><%=fl3.name%></a>
<%
' for level 1 files
next

For each sf3 in sf2
%>
 
 <img src="close.gif"> <a onClick="expandit(this)" onmouseover="style.cursor = 'hand'" class='sme1' id="level2"><%=sf3.name%></a>

<%
set f2 = fso.GetFolder(sf3.path)
set sf4 = f2.SubFolders
set fl4 = f2.Files
For each fl5 in fl4
%>
 
   <img src="bullet.gif"><a href="<%=fl5.path%>" target="_blank" style="color:darkgreen;"><%=fl5.name%></a>
<%
' for level 2 files
next

For each sf5 in sf4
%>
 
  <img src="close.gif"><a onClick="expandit(this)" onmouseover="style.cursor = 'hand'" class='sme1' id="level3"><%=sf5.name%></a>


<%
set f3 = fso.GetFolder(sf5.path)
set sf6 = f3.SubFolders
set fl6 = sf5.Files
For each fl7 in fl6
%>
 
    <img src="bullet.gif"><a href="<%=fl7.path%>" target="_blank" style="color:darkgreen;"><%=fl7.name%></a>
<%
' for fl6 files - which are fl17
next
%>

<%
next
%>

<%
next
%>

Tarwn · Sep 17, 2005

First I would suggest you clean up your HTML. Right now you have a lot of overlapping tags and a bunch of things that could be moved to a style/CSS section instead of being in the body. This would clean things up considerably and make it easer to work with.
Next, in order to change the image you use forthe toggle, you would need to expand the javascript. The important section of the javascript that handles opening and closing nodes is here:

Code:

if (folder.display=="none")
   folder.display=""
else
   folder.display="none"

Similar to how the script finds the folder element, you will need to get a handle on the image, so something like this:

Code:

   var toggleImage = curobj.prevSibling;
   if (folder.display=="none"){
      folder.display="";
      prevSibling.src = "open.gif";
   }
   else{
      folder.display="none"
      prevSibling.src = "close.gif";
   }

Basically what this is doing is getting a reference to the clicked on objects previous sibling in the DOM, which should be the image tag in front of the anchor. Then we change the src atribute to point at a differant picture. That method should be cross browser compatible (not sure why you have a browser check, maybe I am wrong).

In any case, this is probably more of a javascript question since the portion that is actively changing the tree and such is all client-side javascript.

-T

EdRev · Sep 17, 2005

Thank you very much for the reply.
I have change the code to be and getting an error message that prevSibling is undefined:

Am I doing it correctly?

<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
var toggleimage=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style
toggleImage = curobj.prevSibling;

if (folder.display=="none"){
folder.display=""
prevSibling.src = "open.gif";
}
else{
folder.display="none"
prevSibling.src = "close.gif";
}
}

Tarwn · Sep 17, 2005

Yep, sorry, that was my fault. prevSibling is used in the same way nextSibling is, that is to get the previous or next sibling from an element. So in this case we would need to do:

Code:

curobj.prevSibling

in order to get the prvious sibling (the img tag).

What I had meant to type above was:

Code:

var toggleImage = curobj.prevSibling;
if (folder.display=="none"){
   folder.display="";
   toggleImage.src = "open.gif";
}
else{
   folder.display="none"
   toggleImage.src = "close.gif";
}

Sorry about that,

-T

EdRev · Sep 17, 2005

Thank you!! Thank you!! Thank you!!!
It worked great. ;

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!

Need help with expand/collapse treeview 1

EdRev

Programmer

Tarwn

Programmer

EdRev

Programmer

Tarwn

Programmer

EdRev

Programmer

Similar threads

Part and Inventory Search

Sponsor