求在JSP中显示树形结构（在线等）。。。。。

用梅花雪构件，或者jtreeview组件，会有相应的示例直接在页面写的写法如下：
<c:forEach items="${dicts}" var="item">
          <div id="dict${item.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item.id},1)">${item.name}</div>
          <c:if test="${not empty param.keyword}">
            <script>display('${item.id}','${param.keyword}');</script>
          </c:if>
          <c:forEach items="${item.dicts}" var="item2">
            <div id="dict${item2.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item2.id},2)">├─${item2.name}</div>
            <c:if test="${not empty param.keyword}">
              <script>display('${item2.id}','${param.keyword}');</script>
            </c:if>
            <c:forEach items="${item2.dicts}" var="item3">
              <div id="dict${item3.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item3.id},3)">    ├─${item3.name}</div>
              <c:if test="${not empty param.keyword}">
                <script>display('${item3.id}','${param.keyword}');</script>
              </c:if>
              <c:forEach items="${item3.dicts}" var="item4">
                <div id="dict${item4.id}" style="width:100%" onMouseOver="this.style.cursor='pointer'; this.style.background='#F8F2CD'" onMouseOut="this.style.background='#FFFFFF'" onClick="showDict(${item4.id},4)">        ├─${item4.name}</div>
                <c:if test="${not empty param.keyword}">
                  <script>display('${item4.id}','${param.keyword}');</script>
                </c:if>
              </c:forEach>
            </c:forEach>
          </c:forEach>
        </c:forEach>

个人习惯是喜好用menutree，但是遗憾的是数据是固定的，并非从数据库里读取

在数据库中建一个树表,设主键，父结点ID，是否为叶子结点，为几级目录等等，然后在连接数据库得到数据，用递归算法得到一个JS，放到JSP定义好的DIV中

表结构：表 fso_sdept，字段 dept_id（部门ID）、dept_name（部门名称）、dept_p_id（父部门ID）包含父部门和子部门
select dept_id,dept_name from fso_sdept where dept_stat=1
start with dept_id=1129 connect by prior dept_id=dept_p_id不包含父部门只包含子部门
select dept_id,dept_name from fso_sdept where dept_stat=1
start with dept_p_id=1129 connect by prior dept_id=dept_p_id

dtree主页：http://destroydrop.com/javascripts/tree/ (下载地址在右上角)
下载后主要用到dtree.js和dtree.css
使用说明：<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<div class="dtree">
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
</script>
</div>
</body>
</html>
参数说明：id ：节点自身的idpid ：节点的父节点的idname ：节点显示在页面上的名称url ：节点的链接地址title ：鼠标放在节点上所出现的提示信息target ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）icon ：节点关闭时的显示图片的路径iconOpen：节点打开时的显示图片的路径open ：布尔型，节点是否打开（默认为false）注：open项：顶级节点一般采用true，即pid是－1的节点
1：默认值的书写规则（从左至右，依次省略）即 d.add(id,pid,name,url);后面5个参数可以省略2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）即 tree.add(id,pid,name,url,"",target);必须这样写其他 tree.add(id,pid,name,url,"","","","",true);

动态生成：
1）在数据库建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四个字段，来存储节点信息。
2）编写java类，用于从数据库找出节点信息，并且生成javascript脚本。
详细过程:
   1）在数据库建表，脚本如下(以mysql为例)：
   CREATE TABLE 'test'.'tree_info' (
   'node_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
   'parent_id' INTEGER UNSIGNED NOT NULL DEFAULT -1,
   'node_name' VARCHAR(45) NOT NULL,
   'ref_url' VARCHAR(45) NOT NULL,
   PRIMARY KEY('node_id')
)
2）编写TreeInfo.java，这个类用于封装节点信息
     package com.diegoyun.web.tree;
  /**
   * @author Diegoyun
   * @version 1.0
   */
  public class TreeInfo {
   private int nodeId = -1;//node id
   private int parentId = -1;//parentId
   private String nodeName = null;//node name
   private String url = null;//url references
   public int getNodeId() {
    return nodeId;
   }
   public void setNodeId(int nodeId) {
    this.nodeId = nodeId;
   }
   public int getParentId() {
    return parentId;
   }
   public void setParentId(int parentId) {
    this.parentId = parentId;
   }
   public String getNodeName() {
    return nodeName;
   }
   public void setNodeName(String nodeName) {
    this.nodeName = nodeName;
   }
   public String getUrl() {
    return url;
   }
   public void setUrl(String url) {
    this.url = url;
   }
  }
编写TreeUtil.java，用于从数据库得到节点信息，封装到TreeInfo对象，并生成javascript脚本
   TreeUtil.java
   package com.diegoyun.web.tree;
  import java.util.Collection;
  import java.util.ArrayList;
  import java.util.Iterator;
  import java.util.List;
  import java.sql.PreparedStatement;
  import java.sql.ResultSet;
  import java.sql.Connection;
  import java.sql.DriverManager;
  /**
   * @author Diegoyun
   * @version 1.0
   */
  public class TreeUtil {
   public static List retrieveNodeInfos(){
    List coll = new ArrayList();
    String driverName = "com.mysql.jdbc.Driver";
    String host = "localhost";
    String port = ":3306";
    String serverID = "test";
    String userName = "root";
    String userPwd = "root";
    String url = "jdbc:mysql://" + host + port + "/" + serverID ;
    Connection conn = null ;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try{
     Class.forName(driverName).newInstance();
     conn = DriverManager.getConnection(url , userName , userPwd);
     String sql = "select * from tree_info";
     ps = conn.prepareStatement(sql);
     rs = ps.executeQuery();
     TreeInfo info = null;
     while(rs!=null && rs.next()){
      info = new TreeInfo();
      info.setNodeId(rs.getInt(1));
      info.setParentId(rs.getInt(2));
      info.setNodeName(rs.getString(3));
      info.setUrl(rs.getString(4));
      coll.add(info);
     }
  //            if(rs!=null){
  //                rs.close();
  //                rs=null;
  //            }
  //            if(ps!=null){
  //                ps.close();
  //                ps=null;
  //            }
    }catch(Exception e){
     System.out.println(e);
    }    return coll;
   }

   public static String createTreeInfo(List alist){
    StringBuffer contents = new StringBuffer();
    contents.append("d = new dTree('d');");
    TreeInfo info =null;
    for(int max = alist.size(),i=0;i<max;i++){
     info = (TreeInfo)alist.get(i);
     contents.append("d.add("+info.getNodeId()+","+info.getParentId()+","+"'"+info.getNodeName()+"',"+"'"+info.getUrl()+"');\n");
    }
    return contents.toString();
   }
}
这样在jsp页面中,这样调用：<html>
   <head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"> </script>
</head>
<body>
  <script>
   <% =TreeUtil.createTreeInfo(retrieveNodeInfos()) %>  </script>
</body>
<html>

一点小问题！<%@page import="treeUtil.*" %>
<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"> </script>
</head>
<body>
come out!!
<div class="dtree">
<script type="text/javascript">
<%=TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos())
%>
document.write(d);
</script>
</div>
</body>
</html>

调试易

求在JSP中显示树形结构（在线等）。。。。。

解决方案 »