jsp與樹形菜單

1。原理簡介
dtree是一個免費的javascript指令碼，只需定義有限的幾個參數，就可以做出漂亮的樹型菜單。下載目錄：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）調用函數
<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>

顯然，如果用動態指令碼來初始化菜單數組（asp,jsp均可），那就可以很方便的實現動態樹型菜單了。

2。jsp動態實現
   分以下步驟實現動態樹型菜單：
   1）在資料庫建tree_info表，有nodeId，parentNodeId，nodeName，nodeUrl四個欄位，來儲存節點資訊。
   2）編寫java類，用於從資料庫找出節點資訊，並且產生javascript指令碼。
   3）編寫tag類。用於封裝邏輯，簡化jsp的開發。
   4）建一個web程式進行測試。

3。詳細過程
   1）在資料庫建表，指令碼如下：
   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資料庫，如果指令碼細節有出入，請自行修改
    按照上面的dTree樣本插入資料
   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("<!--\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("//-->");

     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)編寫標籤類
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("//-->\n");
    sb.append("</script>\n");
    sb.append("</div>\n");
    return sb;
   }  
}

標籤的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過程，編寫jsp進行測試。

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>

測試，enjoy yourself！

4。待解決問題
dTree有點小bug，如果把css，img，js的路徑改變，樹就有可能不會正確顯示。