利用ACCESS创建数据库listBase.mdb:
数据表：listTable
数据字段：listId    listName    listInfo    parentId 连接方法：
<%
    dim sC & server.mappath("listBase.mdb")
    set sC-->
<script language=jscript>
<!--
//此函数用来显示与关闭它的子菜单的，并切换其前面的小图片
functi){
menuObj.style.display="";
if(isSub==1){
event.srcElement.src="http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/images/open.gif";
}
}
else{
menuObj.style.display="n;
}
}
}
//-->
</script>
<!--下面这段蓝色的区域，是设置目录树的根，其中的内容非数据内的数据，数据库内的数据都附着在它的下面//-->
<%
respjscript:showForm(''add'',0)"">添加</td>" & chr(13))
resp & id
sRec.open sSql,sClistId"))
if sTmp("countSub")>0 then
respjscript:showForm(''add''," & sRec("listId") & ")"">添加</div></td><td width=''40'' class=''menuFjscript:showForm(''edit''," & sRec("listId") & ")"">编辑</div></td>" & chr(13))
respjscript:window.locatilistId") & "''"">删除 </div></td>" & chr(13) & "<td>&nbsp;</td>" & chr(13) & "</tr>" & chr(13) & "</table>" & chr(13) & "</td>" & chr(13) & "</tr>" & chr(13))
respjscript:showForm(''add''," & sRec("listId") & ")"">添加</div></td><td width=''40'' class=''menuFjscript:showForm(''edit''," & sRec("listId") & ")"">编辑</div></td>" & chr(13))
respjscript:window.locatilistId") & "''"">删除</div></td>" & chr(13) & "<td>&nbsp;</td>" & chr(13) & "</tr>" & chr(13) & "</table>" & chr(13) & "</td>" & chr(13) & "</tr>" & chr(13))
end if
sRec.movenext
sNum=sNum+1
wend
resp>
<!-- //此函数设置处理表单的内容
//比如添加时，表单为空，并显示为什么节点添加子节点
//比如修改时，表单内为相应节点的内容，并显示在修改什么节点
functi;
document.all.addNodeForm.disp.value=http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/disp;
document.all.addNodeForm.parentId.value=http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/parentId;
if(disp=="edit"){
document.all.addNodeForm.listInfo.value=http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/eval("img"+parentId+".alt");
document.all.addNodeForm.listName.value=http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/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")+"]添加子节点";
}
}
<!--这棕色部分为移动表单代码，可以不要。//-->
functi) 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.) 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.) 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_toFr leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="addNodeDiv" style="positi >
<form acti method="get" name="addNodeForm" id="addNodeForm">
<table width="300" border="0" cellspacing="0" cellpadding="3">
<tr style="cursor:hand">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="infoValue" class="menuF>
<input name="parentId" type="hidden" id="parentId">
<input name="disp" type="hidden" id="disp">
<img src="http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/images/close2.gif" alt="点击关闭" width="13" height="13" style="cursor:hand" ></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="70" class="menuF>节点名称：</div></td>
<td width="120"><input name="listName" type="text" class="text1" id="listName"></td>
<td class="menuF>
<div align="right" class="menuF cols="19" rows="3" class="text1" id="listInfo"></textarea></td>
<td class="menuF><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="80">&nbsp;</td>
<td width="40"> <input name="SubmitBut" type="submit" class="DivBut" id="SubmitBut" value="http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/提交" >
</td>
<td width="10">&nbsp;</td>
<td width="40"> <input name="cancelBut" type="butt id="cancelBut" value="http://www.dedecms.com/web-art/htmlbase/Dreamweaver/20060416/取消">
</td>
<td>&nbsp;</td>
</tr>
</table></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--此处为包含文件//-->
<div id="Layer1" class="treeDiv">
<!--#include file="inc.asp"-->
</div>
</td>
</tr>
</table>
</body>
</html>下面是提交信息处理页的代码，保存为disp.asp
<!--#include file="initialize.asp"-->
<%
functi 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文件，放在CSS目录下。注：有一两个样式是不要的，我没删
.menuPro {
    border-top: 1px dotted #b8bxBBE0;
    border-right: 1px dotted #31548E;
    border-bottom: 1px dotted #31548E;
    border-left: 1px dotted #b8bxBBE0;
    overflow: visible;
    font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
    font-size: 12px; }
.menuGro {
    border-top: 2px outset #31548E;
    border-right: 2px outset #b8bxBBE0;
    border-bottom: 2px outset #b8bxBBE0;
    border-left: 2px outset #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: 1px outset #B9DCFF;
    border-right: 1px outset #004488;
    border-bottom: 1px outset #004488;
    border-left: 1px outset #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: 1px outset; }
另在根目录下建一个IMAGES目录。用来放那些文件夹样子的小图。 打包下载[请使用WINRAR3.0解压]：小图片

（出处：六月海设计）

无忧站长学院，建站自然无忧www.5ucms.org