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("<!-- ");
    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"> ");
   tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
   tree.append("</script> ");
   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"> ");
   sb.append("<script type="text/javascript"> ");
   sb.append("<!-- ");
   sb.append("createTree(Tree); ");
   sb.append("//--> ");
   sb.append("</script> ");
   sb.append("</div> ");
   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的路径改变，树就有可能不会正确显示。