使用DW用ASP+ACCESS编写目录树

利用ACCESS创建数据库listBase.mdb:

数据表：listTable

数据字段：listIdlistNamelistInfoparentId 连接方法：

dimsConn,sConnStr,sSql

sConnStr="DRIVER={MicrosoftAccessDriver(*.mdb)};dbq="&server.mappath("listBase.mdb")

setsConn=server.createobject("adodb.connection")

sConn.opensConnStr

把以上代码保存成文件：initialize.asp 下面这段程序代码是用来显示目录树用的，保存成文件：inc.asp

<!--

//此函数用来显示与关闭它的子菜单的，并切换其前面的小图片

function showMenu(menuObj,isSub){

if(menuObj.style.display=="none"){

menuObj.style.display="";

if(isSub==1){

event.srcElement.src="images/open.gif";

}

else{

menuObj.style.display="none";

if(isSub==1){

event.srcElement.src="images/close.gif";

}

//-->

</script>

response.write("<table width='100%' border='0' cellspacing='0' cellpadding='0'>" & chr(13))

response.write("<tr>" & chr(13)&"<td>" & chr(13) & "<table width='100%' border='0' cellspacing='0' cellpadding='0'>")

response.write("<tr>" & chr(13) & "<td width='18' ><img src='images/root.gif' onclick='jscript:showMenu(subMenu0,0)' style='cursor:hand' alt='不可修改'></td>" & chr(13) & "<td width='100' class='menuPro' id='listName0'>根节点</td>" & chr(13))

response.write("<td width='40' class='menuFont' align='center' style='cursor:hand' onclick=""jscript:showForm('add',0)"">添加</td>" & chr(13))

response.write("<td width='40' class='menuFont' align='center' onclick=''></td>" & chr(13))

response.write("<td> </td></tr></table></td></tr>" & chr(13))

response.write("<tr id='subMenu0'>" & chr(13) & "<td colspan='2'>" & chr(13))

'此处调用显示目录树的递归函数

listChild(0)

response.write("</td>" & chr(13) & "</tr>" & chr(13) & "</table>" & chr(13))

'下面代码为显示目录树最关键的函数，使用了递归方法（很多象这样类型的都是用递归来做的。）

function listChild(id)

dim sRec,sSql,sNum,sTmp

set sRec=server.createobject("adodb.recordset")

sSql="select listId,listName,listInfo,parentId from listTable where parentId=" & id

sRec.open sSql,sConn,3,1

if not sRec.eof then

sNum=1

response.write("<table width='100%' border='0' cellspacing='0' cellpadding='0'>" & chr(13))

while not sRec.eof

sTmp=sConn.execute("select count(listId) as countSub from listTable where parentId=" & sRec("listId"))

if sTmp("countSub")>0 then

response.write("<tr>" & chr(13))

if sNum=sRec.recordcount then

response.write("<td width='18' valign='top'><img src='images/angel.gif'></td>" & chr(13))

else

response.write("<td width='18' background='images/eline.gif' valign='top'><img src='images/t.gif' ></td>" & chr(13))

end if

response.write("<td>" & chr(13) & "<table width='100%' border='0' cellspacing='0' cellpadding='0'>" & chr(13))

response.write("<tr>" & chr(13) & "<td width='118' class='menuPro' id='listName" & sRec("listId") & "'><img id='img" & sRec("listId") & "' style='cursor:hand' src='images/close.gif' align='absMiddle' onclick='jscript:showMenu(subMenu" & sRec("listId") & ",1)' alt='" & sRec("listInfo") & "'>" & server.HTMLEncode(sRec("listName")) & "</td>" & chr(13) & "<td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:showForm('add'," & sRec("listId") & ")"">添加</div></td><td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:showForm('edit'," & sRec("listId") & ")"">编辑</div></td>" & chr(13))

response.write("<td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:window.location='disp.asp?disp=del&parentId=" & sRec("listId") & "'"">删除 </div></td>" & chr(13) & "<td> </td>" & chr(13) & "</tr>" & chr(13) & "</table>" & chr(13) & "</td>" & chr(13) & "</tr>" & chr(13))

response.write("<tr id='subMenu" & sRec("listId") &"' style='display:none'>")

if sNum=sRec.recordcount then

response.write("<td width='18' valign='top'")

response.write("<img src='images/angel.gif' >")

response.write("</td>" & chr(13))

else

response.write("<td width='18' valign='top' background='images/eline.gif'>")

response.write("</td>" & chr(13))

end if

response.write("<td>" & chr(13))

listChild(sRec("listid"))

response.write("</td>" & chr(13) & "</tr>" & chr(13))

else

response.write("<tr>" & chr(13))

if sNum=sRec.recordcount then

response.write("<td width='18' valign='top'><img src='images/angel.gif'></td>" & chr(13))

else

response.write("<td width='18' background='images/eline.gif' valign='top'><img src='images/t.gif' ></td>" & chr(13))

end if

response.write("<td>" & chr(13) & "<table width='100%' border='0' cellspacing='0' cellpadding='0'>" & chr(13))

response.write("<tr>" & chr(13) & "<td width='118' class='menuPro' id='listName" & sRec("listId") & "'><img id='img" & sRec("listId") & "' src='images/file.gif' align='absMiddle' alt='" & sRec("listInfo") & "'>" & server.HTMLEncode(sRec("listName")) & "</td>" & chr(13) & "<td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:showForm('add'," & sRec("listId") & ")"">添加</div></td><td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:showForm('edit'," & sRec("listId") & ")"">编辑</div></td>" & chr(13))

response.write("<td width='40' class='menuFont'><div align='center' style='cursor:hand' onclick=""jscript:window.location='disp.asp?disp=del&parentId=" & sRec("listId") & "'"">删除</div></td>" & chr(13) & "<td> </td>" & chr(13) & "</tr>" & chr(13) & "</table>" & chr(13) & "</td>" & chr(13) & "</tr>" & chr(13))

end if

sRec.movenext

sNum=sNum+1

wend

response.write("</table>" & chr(13))

end if

sRec.close '关闭记录集

set sRec=nothing '关闭记录集

end function

sConn.close '关闭数据库链接

set sConn=nothing '关闭数据库链接

下面这是调用页代码，保存成index.asp

<%@LANGUAGE='VBSCRIPT' CODEPAGE='936'%>

<html>

<head>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=='Netscape')&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW

innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

<!-- //此函数设置处理表单的内容

//比如添加时，表单为空，并显示为什么节点添加子节点

//比如修改时，表单内为相应节点的内容，并显示在修改什么节点

function showForm(disp,parentId){

addNodeDiv.style.display="";

document.all.addNodeForm.disp.value=disp;

document.all.addNodeForm.parentId.value=parentId;

if(disp=="edit"){

document.all.addNodeForm.listInfo.value=eval("img"+parentId+".alt");

document.all.addNodeForm.listName.value=eval("listName"+parentId+".innerText");

infoValue.innerText="编辑["+eval("listName"+parentId+".innerText")+"]节点";

}

else{

document.all.addNodeForm.listInfo.value="";

document.all.addNodeForm.listName.value="";

infoValue.innerText="给节点["+eval("listName"+parentId+".innerText")+"]添加子节点";

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

} function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01

var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;

var NS6=(!IE&&document.getElementById), NS=(NS4

NS6); if (!IE && !NS) return false;

retVal = true; if(IE && event) event.returnValue = true;

if (MM_dragLayer.arguments.length > 1) {

curDrag = MM_findObj(objName); if (!curDrag) return false;

if (!document.allLayers) { document.allLayers = new Array();

with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];

for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)

with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];

} else {

if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");

for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}

for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];

} }

curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;

curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;

curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;

curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;

curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;

curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;

curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;

if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;

curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;

if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;

curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;

curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;

curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!

document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;

if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);

} else {

var theEvent = ((NS)?objName.type:event.type);

if (theEvent == 'mousedown') {

var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;

var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;

var maxDragZ=null; document.MM_maxZ = 0;

for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];

var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);

if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;

var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);

if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {

var parentL=0; var parentT=0;

if (NS6) { parentLayer = aLayer.parentNode;

while (parentLayer != null && parentLayer.style.position) {

parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);

parentLayer = parentLayer.parentNode;

} } else if (IE) { parentLayer = aLayer.parentElement;

while (parentLayer != null && parentLayer.style.position) {

parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;

parentLayer = parentLayer.parentElement; } }

var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);

var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);

if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;

var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);

var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);

if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null

maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }

if (curDrag) {

document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);

curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;

curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;

if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;

MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;

document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;

if(curDrag.MM_toFront) {

eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');

if (!curDrag.MM_dropBack) document.MM_maxZ++; }

retVal = false; if(!NS4&&!NS6) event.returnValue = false;

} } else if (theEvent == 'mousemove') {

if (document.MM_curDrag) with (document.MM_curDrag) {

var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;

var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;

newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;

if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);

if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);

if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);

if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);

MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;

if (NS4) {left = newLeft; top = newTop;}

else if (NS6){style.left = newLeft; style.top = newTop;}

else {style.pixelLeft = newLeft; style.pixelTop = newTop;}

if (MM_dragJS) eval(MM_dragJS);

retVal = false; if(!NS) event.returnValue = false;

} } else if (theEvent == 'mouseup') {

document.onmousemove = null;

if (NS) document.releaseEvents(Event.MOUSEMOVE);

if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS

if (document.MM_curDrag) with (document.MM_curDrag) {

if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&

(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+

Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {

if (NS4) {left = MM_targL; top = MM_targT;}

else if (NS6) {style.left = MM_targL; style.top = MM_targT;}

else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}

MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }

if (MM_everyTime

MM_SNAPPED) eval(MM_dropJS);

if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}

retVal = false; if(!NS) event.returnValue = false; }

document.MM_curDrag = null;

}

if (NS) document.routeEvent(objName);

} return retVal;

}

//-->

</script>

</head> <body bgcolor="#4A8CCE" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<td>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td class="menuFont">10个字符BR> </tr>

<tr>

</tr>

<tr>

<tr>

</td>

</td>

</tr>

</table></td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</div>

<tr>

<td>

</div>

</td>

</tr>

</table>

</body>

</html>下面是提交信息处理页的代码，保存为disp.asp

function checkstr(str)

str=replace(str,"'","''",1,-1,1)

checkstr=str

end function

dim disp,parentId,listName,listInfo

disp=request.QueryString("disp")

parentId=request.QueryString("parentId")

select case disp

case "add"

listName=checkstr(left(request.QueryString("listName"),10))

listInfo=checkstr(left(request.QueryString("listInfo"),50))

if listName="" then listName="空白节点"

if listInfo="" then ListInfo="此节点在添加入未填写内容"

sSql="insert into listTable (listName,listInfo,parentId) values('" & listName & "','" & listInfo & "'," & parentId & ")"

case "edit"

listName=checkstr(left(request.QueryString("listName"),10))

listInfo=checkstr(left(request.QueryString("listInfo"),50))

if listName="" then listName="空白节点"

if listInfo="" then listInfo="此节点在添加入未填写内容"

sSql="update listTable set listName='" & listName & "',listInfo='" & listInfo & "' where listId=" & parentId

case "del"

sSql="delete from listTable where listId=" & parentId & " or parentId=" & parentId

end select

sConn.execute sSql,,1

response.redirect("index.asp")

%> 以上代码保存成的文件放在同一目录下面（在这里我们称为根目录）。

下面为CSS定义，保存成css.css文件，放在CSS目录下。注：有一两个样式是不要的，我没删

.menuPro{

border-top:1pxdotted#A5BBE0;

border-right:1pxdotted#31548E;

border-bottom:1pxdotted#31548E;

border-left:1pxdotted#A5BBE0;

overflow:visible;

font-family:"Verdana","Arial","Helvetica","sans-serif";

font-size:12px; }

.menuGro{

border-top:2pxoutset#31548E;

border-right:2pxoutset#A5BBE0;

border-bottom:2pxoutset#A5BBE0;

border-left:2pxoutset#31548E;

overflow:visible;

font-family:"Verdana","Arial","Helvetica","sans-serif";

font-size:12px;

}

.menuFont{

font-family:"Verdana","Arial","Helvetica","sans-serif";

font-size:12px;

}

.showDiv{

display:'';

}

.hiddenDiv{

display:none;

}

.treeDiv{

background-color:#A8D5EA;

height:100%;

width:100%;

border-top-width:2px;

border-right-width:2px;

border-bottom-width:2px;

border-left-width:2px;

border-top-style:inset;

border-right-style:inset;

border-bottom-style:inset;

border-left-style:inset;

border-top-color:#3680C9;

border-right-color:#BCD5ED;

border-bottom-color:#BCD5ED;

border-left-color:#3680C9;

overflow:auto;

padding:20px;

}

body{

overflow:hidden;

}

.formDiv{

font-family:"Verdana","Arial","Helvetica","sans-serif";

font-size:12px;

font-weight:normal;

background-color:#7ABDDE;

height:200px;

width:300px;

border-top:1pxoutset#B9DCFF;

border-right:1pxoutset#004488;

border-bottom:1pxoutset#004488;

border-left:1pxoutset#B9DCFF;

overflow:hidden;

}

.text1{

width:160px;

}

.DivBut{

font-family:"Verdana","Arial","Helvetica","sans-serif";

font-size:12px;

font-weight:normal;

background-color:#3399CC;

height:20px;

width:40px;

border:1pxoutset; }

另在根目录下建一个IMAGES目录。用来放那些文件夹样子的小图。打包下载[请使用WINRAR3.0解压]：小图片