魚(yú)躍于淵

1。原理簡(jiǎn)介
 dtree是一個(gè)免費(fèi)的javascript腳本，只需定義有限的幾個(gè)參數(shù)，就可以做出漂亮的樹(shù)型菜單。下載目錄：http://www.destroydrop.com/javascripts/tree/
 以下是dtree的用法示例：
 1）初始化菜單
 <script type="text/javascript">
  <!--
  var Tree = new Array;
  // nodeId | parentNodeId | nodeName | nodeUrl
  Tree[0]  = "1|0|Page 1|#";
  Tree[1]  = "2|1|Page 1.1|#";
  Tree[2]  = "3|1|Page 1.2|#";
  Tree[3]  = "4|3|Page 1.2.1|#";
  Tree[4]  = "5|1|Page 1.3|#";
  Tree[5]  = "6|2|Page 1.1.1|#";
  Tree[6]  = "7|6|Page 1.1.1.1|#";
  Tree[7]  = "8|6|Page 1.1.1.2|#";
  Tree[8]  = "9|1|Page 1.4|#";
  Tree[9]  = "10|9|Page 1.4.1|#";
  Tree[10] = "11|0|Page 2|#";
  //-->
 </script>
 2）調(diào)用函數(shù)
 <div class="tree">
  <script type="text/javascript">
  <!--
   createTree(Tree,1,7);  // starts the tree at the top and open it at node nr. 7
  //-->
  </script>
 </div>

 顯然，如果用動(dòng)態(tài)的腳本來(lái)初始化菜單數(shù)組（asp,jsp均可），那就可以很方便的實(shí)現(xiàn)動(dòng)態(tài)的樹(shù)型菜單了。

2。jsp動(dòng)態(tài)實(shí)現(xiàn)
   分以下步驟實(shí)現(xiàn)動(dòng)態(tài)的樹(shù)型菜單：
   1）在數(shù)據(jù)庫(kù)建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四個(gè)字段，來(lái)存儲(chǔ)節(jié)點(diǎn)信息。
   2）編寫(xiě)java類，用于從數(shù)據(jù)庫(kù)找出節(jié)點(diǎn)信息，并且生成javascript腳本。
   3）編寫(xiě)tag類。用于封裝邏輯，簡(jiǎn)化jsp的開(kāi)發(fā)。
   4）建一個(gè)web程序進(jìn)行測(cè)試。

3。詳細(xì)過(guò)程
   1）在數(shù)據(jù)庫(kù)建表，腳本如下：
   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`)
 )
 我使用mysql數(shù)據(jù)庫(kù)，如果腳本細(xì)節(jié)有出入，請(qǐng)自行修改
    按照上面的dTree示例插入數(shù)據(jù)
   2）編寫(xiě)TreeInfo.java，這個(gè)類用于封裝節(jié)點(diǎn)信息
     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;
   }

  }
   編寫(xiě)TreeUtil.java，用于從數(shù)據(jù)庫(kù)得到節(jié)點(diǎn)信息，封裝到TreeInfo對(duì)象，并生成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("<!--\n");
    contents.append("var Tree = new Array;");//create a array in javascript
    TreeInfo info =null;
    for(int max = alist.size(),i=0;i<max;i++){
     info = (TreeInfo)alist.get(i);
     //define elements of array
     contents.append("Tree[");
     contents.append(i);
     contents.append("]=\"");
     contents.append(info.getNodeId());
     contents.append("|");
     contents.append(info.getParentId());
     contents.append("|");
     contents.append(info.getNodeName());
     contents.append("|");
     contents.append(info.getUrl());
     contents.append("\";");
    }

contents.append("docment.writer(Tree);");
    contents.append("http://-->");

    return contents.toString();
   }
   public static void main(String[]args){
    List alist = TreeUtil.retrieveNodeInfos();
  //        TreeInfo info = null;
  //        for(Iterator i = c.iterator();i.hasNext();){
  //            info = (TreeInfo)i.next();
  //            System.out.println("*****" + info.getNodeName());
  //        }
    System.out.println(TreeUtil.createTreeInfo(alist));
   }
  }

 3)編寫(xiě)標(biāo)簽類
 InitTreeTag.java
 package com.diegoyun.web.taglibs;
 import com.diegoyun.web.tree.TreeUtil;
 import javax.servlet.jsp.tagext.TagSupport;
 import javax.servlet.jsp.JspException;
 import java.io.IOException;

 /**
  * @author Diegoyun
  * @version 1.0
  */
 public class InitTreeTag extends TagSupport{

  public int doEndTag() throws JspException {
   StringBuffer tree = new StringBuffer();
   tree.append("<script type=\"text/javascript\">\n");
   tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
   tree.append("</script>\n");
   try{
    pageContext.getOut().println(tree.toString());
   }catch(IOException ioe){
    ioe.printStackTrace();
   }
   return super.doEndTag();
  }
 }

 ShowTreeTag.java :

 package com.diegoyun.web.taglibs;

 import javax.servlet.jsp.tagext.TagSupport;
 import javax.servlet.jsp.JspException;
 import java.io.IOException;

 /**
  * @author Diegoyun
  * @version 1.0
  */
 public class ShowTreeTag extends TagSupport{
  public int doEndTag() throws JspException {
   StringBuffer buffer = showTree();
   try {
    pageContext.getOut().println(buffer.toString());
   }
   catch (IOException ioe) {
    ioe.printStackTrace();
   }
   return super.doEndTag();
  }
  private StringBuffer showTree(){
   StringBuffer sb = new StringBuffer();
   sb.append("<div class=\"tree\">\n");
   sb.append("<script type=\"text/javascript\">\n");
   sb.append("<!--\n");
   sb.append("createTree(Tree);\n");
   sb.append("http://-->\n");
   sb.append("</script>\n");
   sb.append("</div>\n");
   return sb;
  }  
 }

 標(biāo)簽的tld如下：
 <?xml version="1.0" encoding="ISO-8859-1" ?>
 <!DOCTYPE taglib
   PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
   "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
 <taglib>
  <tlib-version>1.0</tlib-version>
  <jsp-version>1.2</jsp-version>
  <short-name>tree</short-name>
  <!--initTreeTag-->
  <tag>
   <name>init</name>
   <tag-class>com.diegoyun.web.taglibs.InitTreeTag</tag-class>
   <body-content>empty</body-content>
  </tag>
  <!--ShowTreeTag-->
  <tag>
   <name>show</name>
   <tag-class>com.diegoyun.web.taglibs.ShowTreeTag</tag-class>
   <body-content>empty</body-content>
  </tag>
 </taglib>

 4）建立web過(guò)程，編寫(xiě)jsp進(jìn)行測(cè)試。

 index.jsp如下：
 <%@ page language="java"%>
 <%@ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree"%>

 <html>
 <head>
  <title>Tree example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="StyleSheet" href="tree.css" type="text/css">
  <script type="text/javascript" src="tree.js"></script>
  <tree:init/>
 </head>

 <body>

 <b>Tree example :</b><br /><br />
 <tree:show/>
 <br /><br />

  </body>
 </html>

 測(cè)試，enjoy yourself！

4。待解決問(wèn)題
 dTree有點(diǎn)小bug，如果把css，img，js的路徑改變，樹(shù)就有可能不會(huì)正確顯示。