DTree生成漂亮的动态树型菜单

核心提示：dtree生成漂亮的动态树型菜单 dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。下载目录： http://www.destroydrop.com/javascripts/tree/

DTree生成漂亮的动态树型菜单
dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。
以下是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>

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("//-->");
      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，1，7);\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>