JSP 动态树的实现

第一步：在开始之前我们需要准备这么一个js文件，代码如下。我姑且将它命名为tree.js。
复制代码代码如下:
function Node（id, pid, name, url, title, target, icon, iconOpen, open, appendedStr） {
    this.id = id;
    this.pid = pid;
    this.name = name;
    this.url = url;
    this.title = title;
    this.target = target;

    this.icon = icon;
    this.iconOpen = iconOpen;

    this.appendedStr = appendedStr;

    this._io = open || false;
    this._is = false;
    this._ls = false;
    this._hc = false;
    this._ai = 0;
    this._p;
};
// Tree object
function tree（objName,path） {
    this.path = path;
    this.config = {
        target                    : null,
        folderLinks            : true,
        useSelection        : true,
        useCookies            : true,
        useLines                : true,
        useIcons                : true,
        useStatusText        : false,
        closeSameLevel    : false,
        inOrder                    : false
    }
    this.icon = {
        root                : path + "TreeDemo/images/tree_base.gif",
        folder            : path + "TreeDemo/images/tree_folder.gif",
        folderOpen    : path + "TreeDemo/images/tree_folderopen.gif",
        node                : path + "TreeDemo/images/tree_folder.gif",
        empty                : path + "TreeDemo/images/tree_empty.gif",
        line                : path + "TreeDemo/images/tree_line.gif",
        join                : path + "TreeDemo/images/tree_join.gif",
        joinBottom    : path + "TreeDemo/images/tree_joinbottom.gif",
        plus                : path + "TreeDemo/images/tree_plus.gif",
        plusBottom    : path + "TreeDemo/images/tree_plusbottom.gif",
        minus                : path + "TreeDemo/images/tree_minus.gif",
        minusBottom    : path + "TreeDemo/images/tree_minusbottom.gif",
        nlPlus            : path + "TreeDemo/images/tree_nolines_plus.gif",
        nlMinus            : path + "TreeDemo/images/tree_nolines_minus.gif"
    };
    this.obj = objName;
    this.aNodes = [];
    this.aIndent = [];
    this.root = new Node（-1）;
    this.selectedNode = null;
    this.selectedFound = false;
    this.completed = false;
};
// Adds a new node to the node array
tree.prototype.add = function（id, pid, name, url, title, target, icon, iconOpen, open, appendedStr） {
    this.aNodes[this.aNodes.length] = new Node（id, pid, name, url, title, target, icon, iconOpen, open, appendedStr）;
};
// Open/close all nodes
tree.prototype.openAll = function（） {
    this.oAll（true）;
};
tree.prototype.closeAll = function（） {
    this.oAll（false）;
};
// Outputs the tree to the page
tree.prototype.toString = function（） {
    var str = "<div class="tree"> ";
    if （document.getElementById） {
        if （this.config.useCookies） this.selectedNode = this.getSelected（）;
        str += this.addNode（this.root）;
    } else str += "Browser not supported.";
    str += "</div>";
    if （！this.selectedFound） this.selectedNode = null;
    this.completed = true;
    return str;
};
// Creates the tree structure
tree.prototype.addNode = function（pNode） {
    var str = "";
    var n=0;
    if （this.config.inOrder） n = pNode._ai;
    for （n; n<this.aNodes.length; n++） {
        if （this.aNodes[n].pid == pNode.id） {
            var cn = this.aNodes[n];
            cn._p = pNode;
            cn._ai = n;
            this.setCS（cn）;
            if （！cn.target && this.config.target） cn.target = this.config.target;
            if （cn._hc && ！cn._io && this.config.useCookies） cn._io = this.isOpen（cn.id）;
            if （！this.config.folderLinks && cn._hc） cn.url = null;
            if （this.config.useSelection && cn.id == this.selectedNode && ！this.selectedFound） {
                    cn._is = true;
                    this.selectedNode = n;
                    this.selectedFound = true;
            }
            str += this.node（cn, n）;
            if （cn._ls） break;
        }
    }
    return str;
};
// Creates the node icon, url and text
tree.prototype.node = function（node, nodeId） {
    var str = "<div class="treeNode">" + this.indent（node, nodeId）;
    if （this.config.useIcons） {
        if （！node.icon） node.icon = （this.root.id == node.pid）？ this.icon.root : （（node._hc）？ this.icon.folder : this.icon.node）;
        if （！node.iconOpen） node.iconOpen = （node._hc）？ this.icon.folderOpen : this.icon.node;
        if （this.root.id == node.pid） {
            node.icon = this.icon.root;
            node.iconOpen = this.icon.root;
        }
        str += "<img id="i" + this.obj + nodeId + "" src="" + （（node._io）？ node.iconOpen : node.icon） + "" src="" + （（node._io）？ node.iconOpen : node.icon） + "" alt="" />";
    }
    if （node.url） {
        str += "<a id="s" + this.obj + nodeId + "" class="" + （（this.config.useSelection）？（（node._is ？ "nodeSel" : "node"）） : "node"） + "" href="" + node.url + "" href="" + node.url + """;
        if （node.title） str += " title="" + node.title + """;
        if （node.target） str += " target="" + node.target + """;
        if （this.config.useStatusText） str += " onmouseover="window.status="" + node.name + "";return true;" onmouseout="window.status="";return true;" ";
        if （this.config.useSelection && （（node._hc && this.config.folderLinks） || ！node._hc））
            str += " onclick="javascript: " + this.obj + ".s（" + nodeId + "）;"";
        str += ">";
    }
    else if （（！this.config.folderLinks || ！node.url） && node._hc && node.pid ！= this.root.id）
        str += "<a href="javascript: " + this.obj + ".o（" + nodeId + "）;" href="javascript: " + this.obj + ".o（" + nodeId + "）;" class="node">";
    str += node.name;
    if （node.url || （（！this.config.folderLinks || ！node.url） && node._hc）） str += "</a>";

    //[！--begin--]add by wangxr to append str
    if（node.appendedStr） str += node.appendedStr;
    //[！--end--]
    str += "</div>";
    if （node._hc） {
        str += "<div id="d" + this.obj + nodeId + "" class="clip" style="display:" + （（this.root.id == node.pid || node._io）？ "block" : "none"） + ";" style="display:" + （（this.root.id == node.pid || node._io）？ "block" : "none"） + ";">";
        str += this.addNode（node）;
        str += "</div>";
    }
    this.aIndent.pop（）;
    return str;
};
// Adds the empty and line icons
tree.prototype.indent = function（node, nodeId） {
    var str = "";
    if （this.root.id ！= node.pid） {
        for （var n=0; n<this.aIndent.length; n++）
            str += "<img src="" + （（this.aIndent[n] == 1 && this.config.useLines）？ this.icon.line : this.icon.empty ） + "" src="" + （（this.aIndent[n] == 1 && this.config.useLines）？ this.icon.line : this.icon.empty ） + "" alt="" />";
        （node._ls）？ this.aIndent.push（0） : this.aIndent.push（1）;
        if （node._hc） {
            str += "<a href="javascript: " + this.obj + ".o（" + nodeId + "）;" href="javascript: " + this.obj + ".o（" + nodeId + "）;"><img id="j" + this.obj + nodeId + "" src="";
            if （！this.config.useLines） str += （node._io）？ this.icon.nlMinus : this.icon.nlPlus;
            else str += （（node._io）？（（node._ls && this.config.useLines）？ this.icon.minusBottom : this.icon.minus） : （（node._ls && this.config.useLines）？ this.icon.plusBottom : this.icon.plus ））;
            str += "" src=""; if （！this.config.useLines） str += （node._io）？ this.icon.nlMinus : this.icon.nlPlus; else str += （（node._io）？（（node._ls && this.config.useLines）？ this.icon.minusBottom : this.icon.minus） : （（node._ls && this.config.useLines）？ this.icon.plusBottom : this.icon.plus ））; str += "" alt="" /></a>";
        } else str += "<img src="" + （（this.config.useLines）？（（node._ls）？ this.icon.joinBottom : this.icon.join ） : this.icon.empty） + "" src="" + （（this.config.useLines）？（（node._ls）？ this.icon.joinBottom : this.icon.join ） : this.icon.empty） + "" alt="" />";
    }
    return str;
};
// Checks if a node has any children and if it is the last sibling
tree.prototype.setCS = function（node） {
    var lastId;
    for （var n=0; n<this.aNodes.length; n++） {
        if （this.aNodes[n].pid == node.id） node._hc = true;
        if （this.aNodes[n].pid == node.pid） lastId = this.aNodes[n].id;
    }
    if （lastId==node.id） node._ls = true;
};
// Returns the selected node
tree.prototype.getSelected = function（） {
    var sn = this.getCookie（"cs" + this.obj）;
    return （sn）？ sn : null;
};
// Highlights the selected node
tree.prototype.s = function（id） {
    if （！this.config.useSelection） return;
    var cn = this.aNodes[id];
    if （cn._hc && ！this.config.folderLinks） return;
    if （this.selectedNode ！= id） {
        if （this.selectedNode || this.selectedNode==0） {
            eOld = document.getElementById（"s" + this.obj + this.selectedNode）;
            eOld.className = "node";
        }
        eNew = document.getElementById（"s" + this.obj + id）;
        eNew.className = "nodeSel";
        this.selectedNode = id;
        if （this.config.useCookies） this.setCookie（"cs" + this.obj, cn.id）;
    }
};
// Toggle Open or close
tree.prototype.o = function（id） {
    var cn = this.aNodes[id];
    this.nodeStatus（！cn._io, id, cn._ls）;
    cn._io = ！cn._io;
    if （this.config.closeSameLevel） this.closeLevel（cn）;
    if （this.config.useCookies） this.updateCookie（）;
};
// Open or close all nodes
tree.prototype.oAll = function（status） {
    for （var n=0; n<this.aNodes.length; n++） {
        if （this.aNodes[n]._hc && this.aNodes[n].pid ！= this.root.id） {
            this.nodeStatus（status, n, this.aNodes[n]._ls）
            this.aNodes[n]._io = status;
        }
    }
    if （this.config.useCookies） this.updateCookie（）;
};
// Opens the tree to a specific node
tree.prototype.openTo = function（nId, bSelect, bFirst） {
    if （！bFirst） {
        for （var n=0; n<this.aNodes.length; n++） {
            if （this.aNodes[n].id == nId） {
                nId=n;
                break;
            }
        }
    }
    var cn=this.aNodes[nId];
    if （cn.pid==this.root.id || ！cn._p） return;
    cn._io = true;
    cn._is = bSelect;
    if （this.completed && cn._hc） this.nodeStatus（true, cn._ai, cn._ls）;
    if （this.completed && bSelect） this.s（cn._ai）;
    else if （bSelect） this._sn=cn._ai;
    this.openTo（cn._p._ai, false, true）;
};
// Closes all nodes on the same level as certain node
tree.prototype.closeLevel = function（node） {
    for （var n=0; n<this.aNodes.length; n++） {
        if （this.aNodes[n].pid == node.pid && this.aNodes[n].id ！= node.id && this.aNodes[n]._hc） {
            this.nodeStatus（false, n, this.aNodes[n]._ls）;
            this.aNodes[n]._io = false;
            this.closeAllChildren（this.aNodes[n]）;
        }
    }
}
// Closes all children of a node
tree.prototype.closeAllChildren = function（node） {
    for （var n=0; n<this.aNodes.length; n++） {
        if （this.aNodes[n].pid == node.id && this.aNodes[n]._hc） {
            if （this.aNodes[n]._io） this.nodeStatus（false, n, this.aNodes[n]._ls）;
            this.aNodes[n]._io = false;
            this.closeAllChildren（this.aNodes[n]）;
        }
    }
}
// Change the status of a node（open or closed）
tree.prototype.nodeStatus = function（status, id, bottom） {
    eDiv    = document.getElementById（"d" + this.obj + id）;
    eJoin    = document.getElementById（"j" + this.obj + id）;
    if （this.config.useIcons） {
        eIcon    = document.getElementById（"i" + this.obj + id）;
        eIcon.src = （status）？ this.aNodes[id].iconOpen : this.aNodes[id].icon;
    }
    eJoin.src = （this.config.useLines）？
    （（status）？（（bottom）？this.icon.minusBottom:this.icon.minus）:（（bottom）？this.icon.plusBottom:this.icon.plus））:
    （（status）？this.icon.nlMinus:this.icon.nlPlus）;
    eDiv.style.display = （status）？ "block": "none";
};
// [Cookie] Clears a cookie
tree.prototype.clearCookie = function（） {
    var now = new Date（）;
    var yesterday = new Date（now.getTime（） - 1000 * 60 * 60 * 24）;
    this.setCookie（"co"+this.obj, "cookieValue", yesterday）;
    this.setCookie（"cs"+this.obj, "cookieValue", yesterday）;
};
// [Cookie] Sets value in a cookie
tree.prototype.setCookie = function（cookieName, cookieValue, expires, path, domain, secure） {
    document.cookie =
        escape（cookieName） + "=" + escape（cookieValue）
        + （expires ？ "; expires=" + expires.toGMTString（） : ""）
        + （path ？ "; path=" + path : ""）
        + （domain ？ "; domain=" + domain : ""）
        + （secure ？ "; secure" : ""）;
};
// [Cookie] Gets a value from a cookie
tree.prototype.getCookie = function（cookieName） {
    var cookieValue = "";
    var posName = document.cookie.indexOf（escape（cookieName） + "="）;
    if （posName ！= -1） {
        var posValue = posName + （escape（cookieName） + "="）.length;
        var endPos = document.cookie.indexOf（";", posValue）;
        if （endPos ！= -1） cookieValue = unescape（document.cookie.substring（posValue, endPos））;
        else cookieValue = unescape（document.cookie.substring（posValue））;
    }
    return （cookieValue）;
};
// [Cookie] Returns ids of open nodes as a string
tree.prototype.updateCookie = function（） {
    var str = "";
    for （var n=0; n<this.aNodes.length; n++） {
        if （this.aNodes[n]._io && this.aNodes[n].pid ！= this.root.id） {
            if （str） str += ".";
            str += this.aNodes[n].id;
        }
    }
    this.setCookie（"co" + this.obj, str）;
};
// [Cookie] Checks if a node id is in a cookie
tree.prototype.isOpen = function（id） {
    var aOpen = this.getCookie（"co" + this.obj）.split（"."）;
    for （var n=0; n<aOpen.length; n++）
        if （aOpen[n] == id） return true;
    return false;
};
// If Push and pop is not implemented by the browser
if （！Array.prototype.push） {
    Array.prototype.push = function array_push（） {
        for（var i=0;i<arguments.length;i++）
            this[this.length]=arguments[i];
        return this.length;
    }
};
if （！Array.prototype.pop） {
    Array.prototype.pop = function array_pop（） {
        lastElement = this[this.length-1];
        this.length = Math.max（this.length-1,0）;
        return lastElement;
    }
};

由于代码太长，我这里就不给大家拿来细讲了，我们只要会用就OK。就像猪肉我们能吃就OK，不一定非要知道猪养。
第二步：创建数据库，创建数据库的代码如下，我这边使用的是MySQL数据为。
create database `treedemo`;
use treedemo;
create table trees（
tid int primary key not null,
pid int not null,
tname varchar（50） not null,
isleaf int
）;
select * from trees;
insert into trees（tid,pid,tname）values（0,-1,"组织内容"）;
insert into trees（tid,pid,tname）values（1,0,"短信"）;
insert into trees（tid,pid,tname）values（2,0,"彩信"）;
insert into trees（tid,pid,tname）values（3,0,"新闻"）;
insert into trees（tid,pid,tname）values（4,1,"移动生活"）;
insert into trees（tid,pid,tname）values（5,1,"单条滚动点播"）;
insert into trees（tid,pid,tname）values（6,2,"定制"）;
insert into trees（tid,pid,tname）values（7,2,"点播"）;
insert into trees（tid,pid,tname）values（8,3,"房产频道"）;
insert into trees（tid,pid,tname）values（9,3,"农村频道"）;
insert into trees（tid,pid,tname）values（10,3,"数码频道"）;
insert into trees（tid,pid,tname）values（11,6,"幽默笑话"）;
insert into trees（tid,pid,tname）values（12,7,"铃声"）;
insert into trees（tid,pid,tname）values（13,7,"贺卡"）;
insert into trees（tid,pid,tname）values（14,7,"动画"）;
insert into trees（tid,pid,tname）values（15,13,"贺卡1"）;
insert into trees（tid,pid,tname）values（16,13,"贺卡2"）;
insert into trees（tid,pid,tname）values（17,13,"贺卡3"）;
insert into trees（tid,pid,tname）values（18,13,"贺卡4"）;
select * from trees;
表字段的说明：
（1）tid表示节点的编号；
（2）pid 该节点父节点的编号；
（3）tname 节点名称；
（4）isleaf 表明该节点是否为叶节点，叶节点为1，非叶节点为0。该字段可根据实际情况增删。

第三步：在myeclipse中创建一个WEB工程，命名为“TreeDemo”。在WebRoot文件夹下创建js文件夹、css文件夹、images文件夹分别用来存放.js文件、.css文件和项目中用到的图片文件。
第四步：编写数据库连接类，其中的用户名、密码需要根据你数据库情况进行修改，代码如下。
复制代码代码如下:
package com.sx.mas.utils;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBConn {
private static final String DRIVER="com.mysql.jdbc.Driver";
private static final String URL="jdbc:mysql://localhost:3306/treedemo";
Connection conn=null;
public Connection getConnection（）{
try {
Class.forName（DRIVER）;
conn=DriverManager.getConnection（URL,"root","root"）;
} catch （ClassNotFoundException e） {
// TODO Auto-generated catch block
e.printStackTrace（）;
} catch （SQLException e） {
// TODO Auto-generated catch block
e.printStackTrace（）;
}
return conn;
}
}
package com.sx.mas.utils;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBConn {
    private static final String DRIVER="com.mysql.jdbc.Driver";
    private static final String URL="jdbc:mysql://localhost:3306/treedemo";
    Connection conn=null;
    public Connection getConnection（）{
        try {
            Class.forName（DRIVER）;
            conn=DriverManager.getConnection（URL,"root","root"）;
        } catch （ClassNotFoundException e） {
            // TODO Auto-generated catch block
            e.printStackTrace（）;
        } catch （SQLException e） {
            // TODO Auto-generated catch block
            e.printStackTrace（）;
        }
        return conn;
    }
}

第五步：编写javabean类，代码如下，
复制代码代码如下:
package com.sx.mas.beans;
public class TreeNode {
private int tid;
private int pid;
private String tname;
private int isleaf;
public int getTid（） {
return tid;
}
public void setTid（int tid） {
this.tid = tid;
}
public int getPid（） {
return pid;
}
public void setPid（int pid） {
this.pid = pid;
}
public String getTname（） {
return tname;
}
public void setTname（String tname） {
this.tname = tname;
}
public int getIsleaf（） {
return isleaf;
}
public void setIsleaf（int isleaf） {
this.isleaf = isleaf;
}
}
package com.sx.mas.beans;
public class TreeNode {
    private int tid;
    private int pid;
    private String tname;
    private int isleaf;

    public int getTid（） {
        return tid;
    }
    public void setTid（int tid） {
        this.tid = tid;
    }
    public int getPid（） {
        return pid;
    }
    public void setPid（int pid） {
        this.pid = pid;
    }
    public String getTname（） {
        return tname;
    }
    public void setTname（String tname） {
        this.tname = tname;
    }
    public int getIsleaf（） {
        return isleaf;
    }
    public void setIsleaf（int isleaf） {
        this.isleaf = isleaf;
    }
}

第六步：创建相关的DAO类，代码如下。DAO类将数据库表装保存到Vector对象中。
复制代码代码如下:
package com.sx.mas.beans;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Vector;
import com.sx.mas.utils.DBConn;
public class TreeDAO {
public Vector getTree（）{
Vector vec = new Vector（）;
DBConn dbconn = new DBConn（）;
Connection conn = dbconn.getConnection（）;
try {
Statement stmt = conn.createStatement（）;
ResultSet rs = stmt.executeQuery（"select * from trees"）;
while（rs.next（））{
TreeNode treenode = new TreeNode（）;
treenode.setTid（rs.getInt（"tid"））;
treenode.setPid（rs.getInt（"pid"））;
treenode.setTname（rs.getString（"tname"））;
treenode.setIsleaf（rs.getInt（"isleaf"））;
vec.add（treenode）;
}
} catch （SQLException e） {
// TODO Auto-generated catch block
e.printStackTrace（）;
}
return vec;
}
}
package com.sx.mas.beans;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Vector;
import com.sx.mas.utils.DBConn;
public class TreeDAO {
    public Vector getTree（）{
        Vector vec = new Vector（）;
        DBConn dbconn = new DBConn（）;
        Connection conn = dbconn.getConnection（）;
        try {
            Statement stmt = conn.createStatement（）;
            ResultSet rs = stmt.executeQuery（"select * from trees"）;
            while（rs.next（））{
                TreeNode treenode = new TreeNode（）;
                treenode.setTid（rs.getInt（"tid"））;
                treenode.setPid（rs.getInt（"pid"））;
                treenode.setTname（rs.getString（"tname"））;
             treenode.setIsleaf（rs.getInt（"isleaf"））;
                vec.add（treenode）;
            }
        } catch （SQLException e） {
            // TODO Auto-generated catch block
            e.printStackTrace（）;
        }
        return vec;
    }
}

第七步：页面上显示树状结构。在TreeDemo中创建show_tree.jsp页面，代码如下。
复制代码代码如下:
<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312"%>
<%@ page import="com.sx.mas.beans.*" %>
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK href="css/tree.css" href="css/tree.css" type=text/css rel=stylesheet>
<LINK href="css/css.css" href="css/css.css" rel=stylesheet>
<SCRIPT src="js/tree.js" src="js/tree.js" type=text/javascript></SCRIPT>
<title>My JSP "index.jsp" starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<！--
<link rel="stylesheet" type="text/css" href="styles.css" href="styles.css">
-->
</head>
<body onresize="return true;" leftMargin=1 topMargin=1>
<table>
<tr>
<td valign="top">
<TABLE class=table_left_menu cellSpacing=0 cellPadding=0 width="100%"
background=images/tree_bg.gif border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG height=24 src="images/tree_button.gif" src="images/tree_button.gif"
width=147 useMap=#Map border=0>
<MAP id=Map name=Map>
<AREA shape="RECT" shape="RECT" coords="16,3,69,15" coords="16,3,69,15" href="javascript:%20d.openAll（）" href="javascript:%20d.openAll（）">
<AREA shape="RECT" shape="RECT" coords="72,3,131,15" coords="72,3,131,15" href="javascript:%20d.closeAll（）" href="javascript:%20d.closeAll（）">
</MAP>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT type=text/javascript>
d = new tree（"d","../"）;
<%
TreeDAO treedao = new TreeDAO（）;
Vector vec =treedao.getTree（）;
Iterator iterator = vec.iterator（）;
while（iterator.hasNext（））{
TreeNode treenode = （TreeNode）iterator.next（）;
if（treenode.getIsleaf（）==0）{
%>
d.add（<%=treenode.getTid（）%>,<%=treenode.getPid（）%>,"<%=treenode.getTname（）%>"）
<%}else{%>
d.add（<%=treenode.getTid（）%>,<%=treenode.getPid（）%>,"<%=treenode.getTname（）%>",parent.getUrlByCatalogId（"<%=treenode.getTid（）%>"）,null,"list"）;
<%}}%>
document.write（d）;
</SCRIPT>
</td>
</tr>
</table>
</body>
</html>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312"%>
<%@ page import="com.sx.mas.beans.*" %>
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK href="css/tree.css" href="css/tree.css" type=text/css rel=stylesheet>
<LINK href="css/css.css" href="css/css.css" rel=stylesheet>
<SCRIPT src="js/tree.js" src="js/tree.js" type=text/javascript></SCRIPT>
<title>My JSP "index.jsp" starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <！--
    <link rel="stylesheet" type="text/css" href="styles.css" href="styles.css">
    -->
</head>
<body onresize="return true;" leftMargin=1 topMargin=1>
    <table>
        <tr>
            <td valign="top">
<TABLE class=table_left_menu cellSpacing=0 cellPadding=0 width="100%"
background=images/tree_bg.gif border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><IMG height=24 src="images/tree_button.gif" src="images/tree_button.gif"
width=147 useMap=#Map border=0>
<MAP id=Map name=Map>
<AREA shape="RECT" shape="RECT" coords="16,3,69,15" coords="16,3,69,15" href="javascript:%20d.openAll（）" href="javascript:%20d.openAll（）">
<AREA shape="RECT" shape="RECT" coords="72,3,131,15" coords="72,3,131,15" href="javascript:%20d.closeAll（）" href="javascript:%20d.closeAll（）">
</MAP>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT type=text/javascript>
        d = new tree（"d","../"）;
        <%
            TreeDAO treedao = new TreeDAO（）;
            Vector vec =treedao.getTree（）;
            Iterator iterator = vec.iterator（）;
            while（iterator.hasNext（））{
            TreeNode treenode = （TreeNode）iterator.next（）;
            if（treenode.getIsleaf（）==0）{
        %>
         d.add（<%=treenode.getTid（）%>,<%=treenode.getPid（）%>,"<%=treenode.getTname（）%>"）
         <%}else{%>
         d.add（<%=treenode.getTid（）%>,<%=treenode.getPid（）%>,"<%=treenode.getTname（）%>",parent.getUrlByCatalogId（"<%=treenode.getTid（）%>"）,null,"list"）;
         <%}}%>
document.write（d）;
</SCRIPT>
            </td>
        </tr>
    </table>
</body>
</html>

第八步：创建一个框架页面，index.html代码如下，和list_default.htm。
复制代码代码如下:
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<！-- saved from url=（0203）http://211.142.31.211:8050/cms/content/content_frame.jsp？eafplaceholder=1&staffId=11010000&ssessionId=A5704FD79B3367C9FBE67681C048CA6A×tamp=1240457326218&secret=649820873&menuId=10081&labelStyle=DLS -->
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href=""
type=text/css rel=stylesheet>
<SCRIPT type=text/javascript>
function getUrlByCatalogId（catalogId） {
return "TreeDemo/content_add.jsp？catalogId="+catalogId;
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3527" name=GENERATOR></HEAD><FRAMESET border=0
frameSpacing=0 rows=* frameBorder=0>
<FRAMESET border=0 frameSpacing=1 frameBorder=0 cols=200,*>
<FRAME name=stree src="show_cat_tree.jsp" src="show_tree.jsp" scrolling=yes target="list">
<FRAME name=list src="list_default.htm" src="list_default.htm"><NOFRAMES>
<body>
</body>
</NOFRAMES></FRAMESET></FRAMESET></HTML>
<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<！-- saved from url=（0203）http://211.142.31.211:8050/cms/content/content_frame.jsp？eafplaceholder=1&staffId=11010000&ssessionId=A5704FD79B3367C9FBE67681C048CA6A×tamp=1240457326218&secret=649820873&menuId=10081&labelStyle=DLS -->
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href=""
type=text/css rel=stylesheet>
<SCRIPT type=text/javascript>
function getUrlByCatalogId（catalogId） {
return "TreeDemo/content_add.jsp？catalogId="+catalogId;
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3527" name=GENERATOR></HEAD><FRAMESET border=0
frameSpacing=0 rows=* frameBorder=0>
<FRAMESET border=0 frameSpacing=1 frameBorder=0 cols=200,*>
<FRAME name=stree src="show_cat_tree.jsp" src="show_tree.jsp" scrolling=yes target="list">
<FRAME name=list src="list_default.htm" src="list_default.htm"><NOFRAMES>
<body>
</body>
</NOFRAMES></FRAMESET></FRAMESET></HTML>

第九步：运行效果
备注：如有需要源码的请直接联系QQ398349538。