应该可以
那种数型目录,有的就是用jsp+xml+js做成的。

解决方案 »

  1.   

    下面是树型目录的jsp代码:注意这里引用的:
    <%@ include file="/WEB-INF/jsp/include/menuXML.jsp" %>下面我会列出来。
    树型目录的jsp代码如下:
    ///////////////////////////////////////////////////////////////////
    <%@ page contentType="text/html; charset=gb2312" %>
    <%@ include file="/WEB-INF/jsp/include/init.jsp" %>
    <HTML>
    <HEAD>
    <TITLE> DSTree </TITLE></HEAD>
    <BODY><%@ include file="/WEB-INF/jsp/include/menuXML.jsp" %><table style="position:absolute;left:0;top:0;">
    <tr><td id=treeBox></td><tr>
    </table>
    </BODY>
    </HTML><script language="javascript">
    var HC = "color:#990000;border:1px solid #cccccc";
    var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
    var IO = null;
    window.onload = initTree;function clickHandle(){
    // your code here 
    //alert("clickHandle");
     if((this.getAttribute("href")!=null)&&(this.getAttribute("href")!="http://")) {
         window.parent.frames[2].location.href=this.getAttribute("href");
     }     
         //if((this.getAttribute("href")!=null)&&(this.getAttribute("href")!="http://"))
         //{
         //window.parent.frames[1].location.href=this.getAttribute("href");
         //}
    }function contextMenuHandle(){
    event.returnValue = false;
    var treeId = this.getAttribute("treeId");
    //alert("contextMenuHandle");
    // your code here
    }function initTree(){
    var rootn = document.all.menuXML.documentElement;
    var sd = 0;
    //document.onselectstart = function(){return false;}
    document.all.treeBox.appendChild(createTree(rootn,sd));
    }
    function createTree(thisn,sd){
    var nodeObj = document.createElement("span");
    var upobj = document.createElement("span");
    with(upobj){
    style.marginLeft = sd*10;
    className = thisn.hasChildNodes()?"hasItems":"Items";
    //innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";
    innerHTML = "<span id='icon'></span> <a href='#'>" + thisn.getAttribute("text") + "</a>";

    onmousedown = function(){
    //if(event.button != 1) return;
    if(this.getAttribute("cn")){
    this.setAttribute("open",!this.getAttribute("open"));
    this.cn.style.display = this.getAttribute("open")?"inline":"none";
    //this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
    this.all.tags("span")[0].innerHTML = this.getAttribute("open")?"-&nbsp&nbsp":"+&nbsp&nbsp";
    }
    //if(IO){
    //IO.runtimeStyle.cssText = "";
    //IO.setAttribute("selected",false);
    //}
    //IO = this;
    //this.setAttribute("selected",true);
    //this.runtimeStyle.cssText = SC;
    }
    //onmouseover = function(){
    //if(this.getAttribute("selected"))return;
    //this.runtimeStyle.cssText = HC;
    //}
    //onmouseout = function(){
    //if(this.getAttribute("selected"))return;
    //this.runtimeStyle.cssText = "";
    //}
    //oncontextmenu = contextMenuHandle;
    onclick = clickHandle;
    } if(thisn.getAttribute("treeId") != null){
    upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
    }
    if(thisn.getAttribute("href") != null){
    upobj.setAttribute("href",thisn.getAttribute("href"));
    }
    if(thisn.getAttribute("target") != null){
    upobj.setAttribute("target",thisn.getAttribute("target"));
    } nodeObj.appendChild(upobj);
    nodeObj.insertAdjacentHTML("beforeEnd","<br>") if(thisn.hasChildNodes()){
    var i;
    var nodes = thisn.childNodes;
    var cn = document.createElement("span");
    upobj.setAttribute("cn",cn);
    if(thisn.getAttribute("open") != null){
    upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
    upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
    //if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
    if( !upobj.getAttribute("open"))upobj.all.tags("span")[0].innerHTML ="+&nbsp&nbsp";
    }

    for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
    nodeObj.appendChild(cn);
    }
    else{
    //upobj.all.tags("img")[0].src ="endnode.gif";
    upobj.all.tags("span")[0].innerHTML ="&#65377;&#65420;&nbsp&nbsp";
    }
    return nodeObj;
    }
    </script>
      

  2.   

    menuXML.jsp代码如下:
    <%@ page contentType="text/html; charset=gb2312" %>
    <xml id=menuXML>
    <?xml version="1.0" encoding="GB2312"?>
    <DSTreeRoot text="" open="true" href="http://" treeId="000001">

    <DSTree text="写在前面" open="false" treeId="000002">
        <DSTree text="起源" href="<%= request.getContextPath() %>/StudyArea.do?action=right" target="rightFrame" treeId="000003" />
    </DSTree> <DSTree text="学习电脑" open="false" treeId="000004">
    <DSTree text="何为电脑" href="http://" target="box" treeId="000005" />
    </DSTree>

    <DSTree text="学习网络" open="false" treeId="000006">
    <DSTree text="网络概论" open="false" href="http://" target="box" treeId="000007">
    <DSTree text="何为网络" href="http://" target="box" treeId="000008" />
    </DSTree>
    <DSTree text="TCP/IP基础" open="false" href="http://" target="box" treeId="000009">
    <DSTree text="TCP/IP简介" href="http://" target="box" treeId="000010" />
    </DSTree>
    <DSTree text="网络安全基础" open="false" href="http://" target="box" treeId="000011">
    <DSTree text="保护密码" href="http://" target="box" treeId="000012" />
    </DSTree>
    <DSTree text="结束" href="http://" target="box" treeId="000013" />
    <DSTree text="附录1" href="http://" target="box" treeId="000014" />
    <DSTree text="附录2" href="http://" target="box" treeId="000015" />
    </DSTree></DSTreeRoot>
    </xml>
      

  3.   

    上面可能有乱码,再贴一次。
    节点可以用图片,这里我用的是“+,-”号,以及一些特殊字符代替了。<%@ page contentType="text/html; charset=gb2312" %>
    <%@ include file="/WEB-INF/jsp/include/init.jsp" %>
    <HTML>
    <HEAD>
    <TITLE> DSTree </TITLE></HEAD>
    <BODY><%@ include file="/WEB-INF/jsp/include/menuXML.jsp" %><table style="position:absolute;left:0;top:0;">
    <tr><td id=treeBox></td><tr>
    </table>
    </BODY>
    </HTML><script language="javascript">
    var HC = "color:#990000;border:1px solid #cccccc";
    var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000;";
    var IO = null;
    window.onload = initTree;function clickHandle(){
    // your code here 
    //alert("clickHandle");
     if((this.getAttribute("href")!=null)&&(this.getAttribute("href")!="http://")) {
         window.parent.frames[2].location.href=this.getAttribute("href");
     }     
         //if((this.getAttribute("href")!=null)&&(this.getAttribute("href")!="http://"))
         //{
         //window.parent.frames[1].location.href=this.getAttribute("href");
         //}
    }function contextMenuHandle(){
    event.returnValue = false;
    var treeId = this.getAttribute("treeId");
    //alert("contextMenuHandle");
    // your code here
    }function initTree(){
    var rootn = document.all.menuXML.documentElement;
    var sd = 0;
    //document.onselectstart = function(){return false;}
    document.all.treeBox.appendChild(createTree(rootn,sd));
    }
    function createTree(thisn,sd){
    var nodeObj = document.createElement("span");
    var upobj = document.createElement("span");
    with(upobj){
    style.marginLeft = sd*10;
    className = thisn.hasChildNodes()?"hasItems":"Items";
    //innerHTML = "<img src=expand.gif class=ec>" + thisn.getAttribute("text") +"";
    innerHTML = "<span id='icon'></span> <a href='#'>" + thisn.getAttribute("text") + "</a>";

    onmousedown = function(){
    //if(event.button != 1) return;
    if(this.getAttribute("cn")){
    this.setAttribute("open",!this.getAttribute("open"));
    this.cn.style.display = this.getAttribute("open")?"inline":"none";
    //this.all.tags("img")[0].src = this.getAttribute("open")?"expand.gif":"contract.gif";
    this.all.tags("span")[0].innerHTML = this.getAttribute("open")?"-&nbsp&nbsp":"+&nbsp&nbsp";
    }
    //if(IO){
    //IO.runtimeStyle.cssText = "";
    //IO.setAttribute("selected",false);
    //}
    //IO = this;
    //this.setAttribute("selected",true);
    //this.runtimeStyle.cssText = SC;
    }
    //onmouseover = function(){
    //if(this.getAttribute("selected"))return;
    //this.runtimeStyle.cssText = HC;
    //}
    //onmouseout = function(){
    //if(this.getAttribute("selected"))return;
    //this.runtimeStyle.cssText = "";
    //}
    //oncontextmenu = contextMenuHandle;
    onclick = clickHandle;
    } if(thisn.getAttribute("treeId") != null){
    upobj.setAttribute("treeId",thisn.getAttribute("treeId"));
    }
    if(thisn.getAttribute("href") != null){
    upobj.setAttribute("href",thisn.getAttribute("href"));
    }
    if(thisn.getAttribute("target") != null){
    upobj.setAttribute("target",thisn.getAttribute("target"));
    } nodeObj.appendChild(upobj);
    nodeObj.insertAdjacentHTML("beforeEnd","<br>") if(thisn.hasChildNodes()){
    var i;
    var nodes = thisn.childNodes;
    var cn = document.createElement("span");
    upobj.setAttribute("cn",cn);
    if(thisn.getAttribute("open") != null){
    upobj.setAttribute("open",(thisn.getAttribute("open")=="true"));
    upobj.getAttribute("cn").style.display = upobj.getAttribute("open")?"inline":"none";
    //if( !upobj.getAttribute("open"))upobj.all.tags("img")[0].src ="contract.gif";
    if( !upobj.getAttribute("open"))upobj.all.tags("span")[0].innerHTML ="+&nbsp&nbsp";
    }

    for(i=0;i<nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
    nodeObj.appendChild(cn);
    }
    else{
    //upobj.all.tags("img")[0].src ="endnode.gif";
    upobj.all.tags("span")[0].innerHTML ="√&nbsp&nbsp";
    }
    return nodeObj;
    }
    </script>