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!

  • 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!

Directory Treeview in ASP 1

Status
Not open for further replies.

AndyLord

Programmer
Jun 30, 2004
45
GB
Can anyone help with my question.
I have download some code, for a directory VB style Treeview, written with Javascript and VBscript. See below for my code and teh link to download the code.

What I want to achieve using this code are two extra bits of functionality.

1) To open a directory, with sub directories you have to click on the Plus icon next to the Directory name. I would like also be able to click on the directory name.

2) If the sub directories are in the open state, expanded to reveal other subdirectories, when the page is refreshed the treeview is closed. I wish to have the treeview to remain opened until the user closes the subdirectory by clicking the Minus icon.

Download teh code from:

My code:
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">

<title>ASP TreeView</title>
<meta name="author" content="Simon La Rochelle">
<meta name="description" content="This is an easy way to make a vb-like TreeView in ASP">

<script language='javascript'>

function ToggleDisplay(oButton, oItems) {

if ((oItems.style.display == "") || (oItems.style.display == "none")) {
oItems.style.display = "block";
oButton.src = "minus.gif";
} else {
oItems.style.display = "none";
oButton.src = "plus.gif";
}

return false;

}

function HideDisplay(oItems) {

oItems.style.display = "none";

}

function ShowDisplay(oItems) {

oItems.style.display = "block";

}

</script>

<base target="main">

<style fprolloverstyle>A:hover {color: #FF0000; font-family: Arial; font-weight: bold}
</style>

</head>

<body bgcolor='#99CC00' vlink="#333399" link="#333399">

<form action='TreeView.asp' method='post'>

<%

WriteHead "MyTreeView",1,"Q&A Directories",0,True,False,"",True
WriteHead "MyTreeView",2,"Accommodation",1,False,False,"NewAccomodation.htm",False
WriteFoot
WriteHead "MyTreeView",3,"Admin and IT procedures",1,False,False,"NewAdmin & IT.htm",False
WriteFoot
WriteHead "MyTreeView",4,"Centre Information",1,True,False,"",False
WriteHead "MyTreeView",49,"ECR's",1,False,False,"NewECRS.htm",False
WriteFoot
WriteHead "MyTreeView",50,"Health Screening",1,False,False,"NewHealthScreening.htm",False
WriteFoot
WriteHead "MyTreeView",51,"Irish Clients",1,False,False,"NewIrishClients.htm",False
WriteFoot
WriteHead "MyTreeView",52,"Miscellaneous",1,False,False,"NewMiscellaneous.htm",False
WriteFoot
WriteHead "MyTreeView",53,"NHS A&E Casualty Departments",1,False,False,"NewNHSCasualty.htm",False
WriteFoot
WriteHead "MyTreeView",54,"Product Information",1,True,False,"",False
WriteHead "MyTreeView",55,"Fees",2,False,False,"NewFees.Htm",False
WriteFoot
WriteHead "MyTreeView",56,"Products and Services",2,False,False,"NewProdServ.Htm",False
WriteFoot
WriteFoot
WriteHead "MyTreeView",57,"Steri",1,False,False,"NewSteri.htm",False
WriteFoot
WriteHead "MyTreeView",58,"Telephone and Fax Lists",1,False,False,"NewTelFax.Htm",False
WriteFoot
WriteHead "MyTreeView",67,"Local Suppliers",1,False,False,"LocalSuppliers.htm",False
WriteFoot
WriteFoot


%>

</form>
<p><font face='Verdana,Arial,Helvetica' size='2'><a href="site_search.asp">Search
Knowledge Base</a></font></p>
<p><font face='Verdana,Arial,Helvetica' size='2'><a href="UserGuide.Htm">Q&A User Guide</a></font></p>


<%

'*********************************
'TREEVIEW SUBS
'*********************************

Sub WriteHead(TreeName,ItemID,ItemName,Level,IsParent,UseCheckBox,MyLink,IsOpn)

Dim IsIE 'as boolean

IsIE = (InStr(request.servervariables("HTTP_USER_AGENT"), "MSIE") > 0)

'Spacing depends on what level you're at
Select Case Level
Case 1 : Response.Write "<IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 2 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=36 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 3 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=72 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 4 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=108 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 5 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=144 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 6 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=180 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 7 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=216 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 8 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=252 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 9 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=288 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
Case 10 : Response.Write "<IMG SRC='t_dot.gif' WIDTH=324 HEIGHT=18 BORDER=0 ALT=''><IMG SRC='dot1.gif' BORDER=0 ALT=''>"
End Select

'If IsParent then put a plus sign else put a blank space
If IsParent then
'JsCode only if isIE
If isIE then
If IsOpn then
Response.Write "<IMG SRC='minus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ONCLICK='javascript:ToggleDisplay(" & TreeName & ItemID & "Btn, " & TreeName & ItemID & "chlds);' ALT BORDER='0'>"
Else
Response.Write "<IMG SRC='plus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ONCLICK='javascript:ToggleDisplay(" & TreeName & ItemID & "Btn, " & TreeName & ItemID & "chlds);' ALT BORDER='0'>"
End If
Else
If IsOpn then
Response.Write "<IMG SRC='minus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ALT BORDER='0'>"
Else
Response.Write "<IMG SRC='plus.gif' WIDTH=12 HEIGHT=10 ID='" & TreeName & ItemID & "Btn' ALT BORDER='0'>"
End if
End If
Else
If Level = 0 then
Response.Write "<IMG SRC='nosign2.gif' WIDTH=12 HEIGHT=10 ALT BORDER='0'>"
Else
Response.Write "<IMG SRC='nosign.gif' WIDTH=12 HEIGHT=10 ALT BORDER='0'>"
End If
End if

Response.Write "<font face='Verdana,Arial,Helvetica' size='2' color='#333399'>"

'If MyLink = "" then do not use link
If MyLink = "" then
'If first Level, use bold
If Level = 0 then
Response.Write "<b>" & ItemName & "</b>"
else
Response.Write ItemName
End if
Else
'If first Level, use bold
If Level = 0 then

Response.Write "<b><a href='" & MyLink & "'>" & ItemName & "</a></b>" "
else
Response.Write "<a href='" & MyLink & "'>" & ItemName & "</a>"
End If
End If


Response.Write "</font>"
Response.Write "<br>"

'Always add DIV because WriteFoot() will close it
Response.Write "<div ID='" & TreeName & ItemID & "chlds'>"

'JsCode only if IsIE and if the section is not open
If IsIE then
If IsOpn then
Response.Write "<script language='javascript'>ShowDisplay(" & TreeName & ItemID & "chlds);</script>"
Else
Response.Write "<script language='javascript'>HideDisplay(" & TreeName & ItemID & "chlds);</script>"
End If
End If

End Sub

Sub WriteFoot()

Response.Write "</div>"

End Sub
%>

</body>
</html>
 
The OnClick funciton used in the first img could be duplicated to be used in a span or something similar around your text. Th eproblem would eb that your already capable of roviding a link for that text, jhow would you differentiate between someone clicking the folder name as a link and someone clicking the name to expand/contract it?

As far as the refresh is concerned, with a javascript tree your not going to be able to prevent the reset on refresh because a refresh causes the page to return to it's initial load state. So if the initial load state for the items is contracted, but you just expanded a bunch of items, then when you refresh it will display them all contracted again. The only way you could really get around this is if you made every click submit the page back to itself, using ASP to determine open and closed nodes rather then javascript. At this point a refresh would not change the tree at all (or the 50 in the hidtory, etc), but the user has to wait for the page to reload with every click.

-T

barcode_1.gif
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top