Well, the easiest way I have found to build a tree view is to create it using Divs and assign them a certain style
Code:
In your head:
<style>
.element{
width:100%;
}
.element_contents{
margin-left:.5em;
display:none;
}
</style>
then in your html:
<div class="element">
<span class="toggle">+</span><span class="title">FolderName</span><br>
<div class="element_contents">
<div class="element">
<span class="toggle">+</span><span class="title">SubFolder 1</span><br>
</div>
<div class="element">
<span class="toggle">+</span><span class="title">SubFolder 2</span><br>
</div>
</div>
</div>
Then we would need to create some javascript to handle opening and closing these divs. So we would first want to put some onClick's in the toggle spans, when these are clicked we can then turn their siblings (the element_contents div in the same element div) to display:inline, making them "drop-down" or expand. Rather than go through all the steps, here is a sample of the drop-down:
Code:
<html>
<head>
<title> Expanding List </title>
<style>
.element{
font-size:13px;
margin-left:25px;
}
.element_contents{
font-size:13px;
display:none;
border-left:1px solid #aaaaaa;
}
.element_file{
font-size:13px;
margin-left:25px;
}
.toggle{
width:20px;
text-decoration:none;
text-align:center;
color:#aaaaaa;
cursor:hand;
}
</style>
<script language="JavaScript">
//first redirect all click events to the navClicked function
document.onclick = navClicked;
function switchPoint(aNavPoint){
var collapsed;
if(aNavPoint.innerHTML == "+"){
collapsed=false;
aNavPoint.innerHTML = "-";
}
else{
collapsed=true;
aNavPoint.innerHTML = "+";
}
return collapsed;
}
function navClicked(){
//assume the click was on a switchPoint and that it is collapsed
var isCollapsed = true;
//get a reference to the element that was clicked
e = window.event.srcElement;
//if the element that was clicked on was one of the toggles
if(e.className == "toggle"){
//call the switchpoint function to change it's state, ie "+" to "-" and "-" to "+"
isCollapsed = switchPoint(e);
//if the item is now collapsed after switching
if(isCollapsed)
//get it's parent element, get the parents third child (element_contents), hide it
e.parentElement.children(2).style.display = "none";
else
//otherwise open it's element_contents sibling
e.parentElement.children(2).style.display = "inline";
}
}
</script>
</head>
<body>
<div class="element">
<span class="toggle">+</span>
<span class="element_name">Sample Folder</span>
<div class="element_contents">
<!-- Begin a subfolder -->
<div class="element">
<span class="toggle">+</span>
<span class="element_name">Sample Sub Folder 1</span>
<div class="element_contents">
<div class="element"><span class="element_file">Sample File in sub1</span></div>
<div class="element"><span class="element_file">Sample File in sub1</span></div>
<div class="element"><span class="element_file">Sample File in sub1</span></div>
</div>
</div>
<!-- Done first subfolder -->
<!-- Begin a subfolder -->
<div class="element">
<span class="toggle">+</span>
<span class="element_name">Sample Sub Folder 2</span>
<div class="element_contents">
<div class="element"><span class="element_file">Sample File in sub2</span></div>
<div class="element"><span class="element_file">Sample File in sub2</span></div>
<div class="element"><span class="element_file">Sample File in sub2</span></div>
</div>
</div>
<!-- Done second subfolder -->
<div class="element"><span class="element_file">Sample File in top level</span></div>
<div class="element"><span class="element_file">Sample File in top level</span></div>
<div class="element"><span class="element_file">Sample File in top level</span></div>
</div>
</div>
</body>
</html>
That code isn't perfect, but I added in a little style to help display better.
Now that we can do our static drop down we need to come up with a way to populate it dynamically. The best wayt I can think to do this would be to create two functions, an AddFile and an AddDirectory function. The AddDirectory function would be passed a Folder object (originally gotten by using the FileSystemObject object). It would first output the beginning div (element class), the toggle, and the title (filled with the folder name of course), and the element_contents div. Then it would loop through it's subfolders, calling the AddFolder function on each of them, then it would loop through it's files, calling the AddFile on each of those.
Here is some sorta code (somewehere between pseudo-code and working code) to use as an example:
Code:
Function AddFolder(aFolder)
Response.Write "<div class='element'><span class='toggle'>+</span><span class='element_name'>" & aFolder.Name & "</span>"
Response.Write "<div class='element_contents'>"
'Now loop through the sub folders of this folder:
Dim subFol
For Each subFol in aFolder.Folders
AddFolder subFol
Next
Dim fil
'Now Loop through the files and add them
For Each fil in aFolder.files
AddFile fil
Next
'Now end the element_contents div and the element div
Response.Write "</div></div>"
End Function
Function AddFile(aFile)
'output the element_file tags
Response.Write "<div class='element_file'>"
'output the element_name tags
Response.Write "<div class='element_name'>"
'output the filename
Response.Write aFile.Name
'end the two divs
Response.Write "</div></div>"
End Function
Then all you would have to do to start it is to use the FSO to get the base folder you want to start with and call the AddFolder function with that in it. I haven't tested the above code, as I just finished writing it on the fly, but it should be close to or all the way complete. Now all you have to do is integrate the ASP and the static html from above and you should have your directory listing.
-Tarwn ________________________________________________
Get better results for your questions: faq333-2924
Frequently Asked ASP Questions: faq333-3048
===============