Building recursive directory tree using FSO 2

BG12424 · Feb 14, 2003

Can anyone point me in the right direction to find example scripts for building a recursive drop down directory/file tree using the file system object component that also can build the dhtml components that open/close folder icons. I would also like to be able to change the starting directory where recursion will start to take place.

I find it most difficult to organize the open/closed menu part because I don't know where the top-level/sub-level directories are beginning and ending.

Ideally, I want an example that does not have limitations as to the depth of the subdirectories it finds. When I click on the folder, it will get the files for that directory and display them in the right frame.

I am wanting to display this tree like below (where of = open folder icon and cf=closed folder icon):

(of) toplevel | contents of folder3a
|_ (cf) folder1 | file1.gif
|_ (cf) folder2 | file2.gif
|_ (of) folder3 | file3.gif
|_ (of) folder3a | file4.gif
|_ (cf) folder3b | etc.
|_ (cf) folder3c |
|_ (cf) folder4 |
|_ (cf) folder5 |
|
|

Thanks for the help. regards,
Brian

browolf · Feb 14, 2003

u need a recursive loop to get thru the tree.
recursive being like a function that calls itself. i couldnt say how to write one tho.

ah-ha....

Recursive Directory Listing

http://www.planet-source-code.com/xq/ASP/txtCodeId.6826/lngWId.4/qx/vb/scripts/ShowCode.htm

this'll start u off.

===============
Security Forums

http://www.security-forums.com

Tarwn · Feb 14, 2003

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=&quot;element&quot;>
   <span class=&quot;toggle&quot;>+</span><span class=&quot;title&quot;>FolderName</span><br>
   <div class=&quot;element_contents&quot;>
      <div class=&quot;element&quot;>
         <span class=&quot;toggle&quot;>+</span><span class=&quot;title&quot;>SubFolder 1</span><br>
      </div>
      <div class=&quot;element&quot;>
         <span class=&quot;toggle&quot;>+</span><span class=&quot;title&quot;>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=&quot;JavaScript&quot;>
		//first redirect all click events to the navClicked function
		document.onclick = navClicked;

		function switchPoint(aNavPoint){
			var collapsed;

			if(aNavPoint.innerHTML == &quot;+&quot;){
				collapsed=false;
				aNavPoint.innerHTML = &quot;-&quot;;
				}
			else{
				collapsed=true;
				aNavPoint.innerHTML = &quot;+&quot;;
			}

			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 == &quot;toggle&quot;){
				//call the switchpoint function to change it's state, ie &quot;+&quot; to &quot;-&quot; and &quot;-&quot; to &quot;+&quot;
				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 = &quot;none&quot;;
				else
					//otherwise open it's element_contents sibling
					e.parentElement.children(2).style.display = &quot;inline&quot;;
			}
		}
</script>
</head>
<body>
<div class=&quot;element&quot;>
	<span class=&quot;toggle&quot;>+</span>
	<span class=&quot;element_name&quot;>Sample Folder</span>
	<div class=&quot;element_contents&quot;>
		<!-- Begin a subfolder -->
		<div class=&quot;element&quot;>
			<span class=&quot;toggle&quot;>+</span>
			<span class=&quot;element_name&quot;>Sample Sub Folder 1</span>
			<div class=&quot;element_contents&quot;>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub1</span></div>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub1</span></div>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub1</span></div>
			</div>
		</div>
		<!-- Done first subfolder -->
		<!-- Begin a subfolder -->
		<div class=&quot;element&quot;>
			<span class=&quot;toggle&quot;>+</span>
			<span class=&quot;element_name&quot;>Sample Sub Folder 2</span>
			<div class=&quot;element_contents&quot;>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub2</span></div>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub2</span></div>
				<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in sub2</span></div>
			</div>
		</div>
		<!-- Done second subfolder -->
		<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in top level</span></div>
		<div class=&quot;element&quot;><span class=&quot;element_file&quot;>Sample File in top level</span></div>
		<div class=&quot;element&quot;><span class=&quot;element_file&quot;>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 &quot;<div class='element'><span class='toggle'>+</span><span class='element_name'>&quot; & aFolder.Name & &quot;</span>&quot;
   Response.Write &quot;<div class='element_contents'>&quot;

   '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 &quot;</div></div>&quot;
End Function

Function AddFile(aFile)
   'output the element_file tags
   Response.Write &quot;<div class='element_file'>&quot;
   'output the element_name tags
   Response.Write &quot;<div class='element_name'>&quot;
   'output the filename
   Response.Write aFile.Name
   'end the two divs
   Response.Write &quot;</div></div>&quot;
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

BG12424 · Feb 14, 2003

I will definitely test it out and give it shot. I will attempt this tomorrow and re-post my (your) results. Thanks a ton. regards,
Brian

BG12424 · Feb 15, 2003

Tarwn,

Thank you very much, your on-the-fly code gets you a star. I got it working with only a slight change to your code. Folders object is not support, it should be

For Each subFol in aFolder.SubFolders

I added this recursive routine to get it working along with of course the FSO object declarations.

Sub WalkTree(fldr)

Dim subFolder
For Each subFolder in fldr.SubFolders
AddFolder subFolder
WalkTree subFolder
Next

End Sub regards,
Brian

Tarwn · Feb 15, 2003

Glad it worked out for you, I'm sure I would have caught that subfolder/folder thing if I hadn't been writing it on the fly, I'm glad you managed to catch it so quickly and it didn'ty lead to more trouble. Thanks for reposting that, now if anyone else attempts to try this I won't have to decode what I did to help them

Glad it worked out for you,
-Tarwn ________________________________________________
Get better results for your questions: faq333-2924
Frequently Asked ASP Questions: faq333-3048

BG12424 · Feb 18, 2003

I realized that I didn't need my WalkTree afterall since your AddFolder routine already does what I was doing in my WalkTree routine. No need to do it twice. Thanks again. regards,
Brian

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!

Building recursive directory tree using FSO 2

BG12424

Programmer

browolf

Programmer

Tarwn

Programmer

BG12424

Programmer

BG12424

Programmer

Tarwn

Programmer

BG12424

Programmer

Similar threads

Part and Inventory Search

Sponsor