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的路径改变，树就有可能不会正确显示。