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

Java Web 学习开发应用 专栏收录该内容
17 篇文章 0 订阅
核心提示:dtree生成漂亮的动态树型菜单 dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。下载目录: http://www.destroydrop.com/javascripts/tree/
DTree生成漂亮的动态树型菜单
dtree是一个免费的javascript脚本,只需定义有限的几个参数,就可以做出漂亮的树型菜单。
以下是dtree的用法示例:
1)初始化菜单

 

  1. <script type="text/javascript">   
  2.    <!--   
  3.    var Tree = new Array;   
  4.    // nodeId | parentNodeId | nodeName | nodeUrl   
  5.    Tree[0]   = "1|0|Page 1|#";   
  6.    Tree[1]   = "2|1|Page 1.1|#";   
  7.    Tree[2]   = "3|1|Page 1.2|#";   
  8.    Tree[3]   = "4|3|Page 1.2.1|#";   
  9.    Tree[4]   = "5|1|Page 1.3|#";   
  10.    Tree[5]   = "6|2|Page 1.1.1|#";   
  11.    Tree[6]   = "7|6|Page 1.1.1.1|#";   
  12.    Tree[7]   = "8|6|Page 1.1.1.2|#";   
  13.    Tree[8]   = "9|1|Page 1.4|#";   
  14.    Tree[9]   = "10|9|Page 1.4.1|#";   
  15.    Tree[10] = "11|0|Page 2|#";   
  16.    //-->   
  17. </script>   

 

2)调用函数

  1. <div class="tree">   
  2.    <script type="text/javascript">   
  3.    <!--   
  4.     createTree(Tree,1,7);   // starts the tree at the top and open it at node nr. 7  
  5.    //-->   
  6.    </script>   
  7. </div>   


2.jsp动态实现
    分以下步骤实现动态的树型菜单:
    1)在数据库建tree_info表,有nodeId,parentNodeId,nodeName,nodeUrl四个字段,来存储节点信息。
    2)编写java类,用于从数据库找出节点信息,并且生成javascript脚本。
    3)编写tag类。用于封装逻辑,简化jsp的开发。
    4)建一个web程序进行测试。
3.详细过程
    1)在数据库建表,脚本如下:

  1.     CREATE TABLE `test`.`tree_info` (   
  2.     `node_id` INTEGER UNSIGNED NOT NULL DEFAULT -1,   
  3.     `parent_id` INTEGER UNSIGNED NOT NULL DEFAULT -1,   
  4.     `node_name` VARCHAR(45) NOT NULL,   
  5.     `ref_url` VARCHAR(45) NOT NULL,   
  6.     PRIMARY KEY(`node_id`)   
  7. )  


我使用mysql数据库,如果脚本细节有出入,请自行修改
     按照上面的dTree示例插入数据
    2)编写TreeInfo.java,这个类用于封装节点信息
 

  1.   package com.diegoyun.web.tree;   
  2. /**  
  3.  * @author Diegoyun  
  4.  * @version 1.0  
  5.  */  
  6. public class TreeInfo {   
  7.  private int nodeId = -1;//node id   
  8.  private int parentId = -1;//parentId   
  9.  private String nodeName = null;//node name   
  10.  private String url = null;//url references   
  11.  public int getNodeId() {   
  12.   return nodeId;   
  13.  }   
  14.  public void setNodeId(int nodeId) {   
  15.   this.nodeId = nodeId;   
  16.  }   
  17.  public int getParentId() {   
  18.   return parentId;   
  19.  }   
  20.  public void setParentId(int parentId) {   
  21.   this.parentId = parentId;   
  22.  }   
  23.  public String getNodeName() {   
  24.   return nodeName;   
  25.  }   
  26.  public void setNodeName(String nodeName) {   
  27.   this.nodeName = nodeName;   
  28.  }   
  29.  public String getUrl() {   
  30.   return url;   
  31.  }   
  32.  public void setUrl(String url) {   
  33.   this.url = url;   
  34.  }   
  35. }   

    编写TreeUtil.java,用于从数据库得到节点信息,封装到TreeInfo对象,并生成javascript脚本
   

  1. TreeUtil.java   
  2.     package com.diegoyun.web.tree;   
  3.    import java.util.Collection;   
  4.    import java.util.ArrayList;   
  5.    import java.util.Iterator;   
  6.    import java.util.List;   
  7.    import java.sql.PreparedStatement;   
  8.    import java.sql.ResultSet;   
  9.    import java.sql.Connection;   
  10.    import java.sql.DriverManager;   
  11.    /**  
  12.     * @author Diegoyun  
  13.     * @version 1.0  
  14.     */  
  15.    public class TreeUtil {   
  16.     public static List retrieveNodeInfos(){   
  17.      List coll = new ArrayList();   
  18.      String driverName = "com.mysql.jdbc.Driver";   
  19.      String host = "localhost";   
  20.      String port = ":3306";   
  21.      String serverID = "test";   
  22.      String userName = "root";   
  23.      String userPwd = "root";   
  24.      String url = "jdbc:mysql://" + host + port + "/" + serverID ;   
  25.      Connection conn = null ;   
  26.      PreparedStatement ps = null;   
  27.      ResultSet rs = null;   
  28.      try{   
  29.       Class.forName(driverName).newInstance();   
  30.       conn = DriverManager.getConnection(url , userName , userPwd);   
  31.       String sql = "select * from tree_info";   
  32.       ps = conn.prepareStatement(sql);   
  33.       rs = ps.executeQuery();   
  34.       TreeInfo info = null;   
  35.       while(rs!=null && rs.next()){   
  36.        info = new TreeInfo();   
  37.        info.setNodeId(rs.getInt(1));   
  38.        info.setParentId(rs.getInt(2));   
  39.        info.setNodeName(rs.getString(3));   
  40.        info.setUrl(rs.getString(4));   
  41.        coll.add(info);   
  42.       }   
  43.    //             if(rs!=null){   
  44.    //                 rs.close();   
  45.    //                 rs=null;   
  46.    //             }   
  47.    //             if(ps!=null){   
  48.    //                 ps.close();   
  49.    //                 ps=null;   
  50.    //             }   
  51.      }catch(Exception e){   
  52.       System.out.println(e);   
  53.      }   
  54.   
  55.      return coll;   
  56.     }   
  57.     public static String createTreeInfo(List alist){   
  58.      StringBuffer contents = new StringBuffer();   
  59.      contents.append("<!--\n");   
  60.      contents.append("var Tree = new Array;");//create a array in javascript   
  61.      TreeInfo info =null;   
  62.      for(int max = alist.size(),i=0;i<max;i++){   
  63.       info = (TreeInfo)alist.get(i);   
  64.       //define elements of array   
  65.       contents.append("Tree[");   
  66.       contents.append(i);   
  67.       contents.append("]=\"");   
  68.       contents.append(info.getNodeId());   
  69.       contents.append("|");   
  70.       contents.append(info.getParentId());   
  71.       contents.append("|");   
  72.       contents.append(info.getNodeName());   
  73.       contents.append("|");   
  74.       contents.append(info.getUrl());   
  75.       contents.append("\";");   
  76.      }   
  77.      contents.append("//-->");   
  78.      return contents.toString();   
  79.     }   
  80.     public static void main(String[]args){   
  81.      List alist = TreeUtil.retrieveNodeInfos();   
  82.    //         TreeInfo info = null;   
  83.    //         for(Iterator i = c.iterator();i.hasNext();){   
  84.    //             info = (TreeInfo)i.next();   
  85.    //             System.out.println("*****" + info.getNodeName());   
  86.    //         }   
  87.      System.out.println(TreeUtil.createTreeInfo(alist));   
  88.     }   
  89.    }   
  90.   


3)编写标签类

  1. InitTreeTag.java   
  2. package com.diegoyun.web.taglibs;   
  3. import com.diegoyun.web.tree.TreeUtil;   
  4. import javax.servlet.jsp.tagext.TagSupport;   
  5. import javax.servlet.jsp.JspException;   
  6. import java.io.IOException;   
  7. /**  
  8.    * @author Diegoyun  
  9.    * @version 1.0  
  10.    */  
  11. public class InitTreeTag extends TagSupport{   
  12.    public int doEndTag() throws JspException {   
  13.     StringBuffer tree = new StringBuffer();   
  14.     tree.append("<script type=\"text/javascript\">\n");   
  15.     tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));   
  16.     tree.append("</script>\n");   
  17.     try{   
  18.      pageContext.getOut().println(tree.toString());   
  19.     }catch(IOException ioe){   
  20.      ioe.printStackTrace();   
  21.     }   
  22.     return super.doEndTag();   
  23.    }   
  24. }   
  25. ShowTreeTag.java :    
  26. package com.diegoyun.web.taglibs;   
  27. import javax.servlet.jsp.tagext.TagSupport;   
  28. import javax.servlet.jsp.JspException;   
  29. import java.io.IOException;   
  30. /**  
  31.    * @author Diegoyun  
  32.    * @version 1.0  
  33.    */  
  34. public class ShowTreeTag extends TagSupport{   
  35.    public int doEndTag() throws JspException {   
  36.     StringBuffer buffer = showTree();   
  37.     try {   
  38.      pageContext.getOut().println(buffer.toString());   
  39.     }   
  40.     catch (IOException ioe) {   
  41.      ioe.printStackTrace();   
  42.     }   
  43.     return super.doEndTag();   
  44.    }   
  45.    private StringBuffer showTree(){   
  46.     StringBuffer sb = new StringBuffer();   
  47.     sb.append("<div class=\"tree\">\n");   
  48.     sb.append("<script type=\"text/javascript\">\n");   
  49.     sb.append("<!--\n");   
  50.     sb.append("createTree(Tree,1,7);\n");   
  51.     sb.append("//-->\n");   
  52.     sb.append("</script>\n");   
  53.     sb.append("</div>\n");   
  54.     return sb;   
  55.    }      
  56. }   

标签的tld如下:

  1. <?xml version="1.0" encoding="ISO-8859-1" ?>  
  2. <!DOCTYPE taglib   
  3.     PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"   
  4.     "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">  
  5. <taglib>  
  6.    <tlib-version>1.0</tlib-version>  
  7.    <jsp-version>1.2</jsp-version>  
  8.    <short-name>tree</short-name>  
  9.    <!--initTreeTag-->  
  10.    <tag>  
  11.     <name>init</name>  
  12.     <tag-class>com.diegoyun.web.taglibs.InitTreeTag</tag-class>  
  13.     <body-content>empty</body-content>  
  14.    </tag>  
  15.    <!--ShowTreeTag-->  
  16.    <tag>  
  17.     <name>show</name>  
  18.     <tag-class>com.diegoyun.web.taglibs.ShowTreeTag</tag-class>  
  19.     <body-content>empty</body-content>  
  20.    </tag>  
  21. </taglib>  


4)建立web过程,编写jsp进行测试。
index.jsp如下:

  1. <%@ page language="java"%>  
  2. <%@ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree"%>  
  3.   
  4. <html>  
  5. <head>  
  6.    <title>Tree example</title>  
  7.    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  8.    <link rel="StyleSheet" href="tree.css" type="text/css">  
  9.    <script type="text/javascript" src="tree.js"></script>  
  10.    <tree:init/>  
  11. </head>  
  12. <body>  
  13.   
  14. <b>Tree example :</b><br /><br />  
  15. <tree:show/>  
  16. <br /><br />  
  17. </body>  
  18. </html>    
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

Java漂亮菜单制作实例(源码),森林状的关系图,文本域,用于显示点击的节点名称,使用了JTree,可以看作是一个jTree的用法演示实例。菜单应用广泛,这个Tree制作漂亮,相信会让很多朋友从中学习到实现的方法,效果如演示截图所示。下面是相关的代码片段:   DefaultMutableTreeNode root = new DefaultMutableTreeNode("设置"); //生成根节点   DefaultMutableTreeNode node1=new DefaultMutableTreeNode("常规"); //生成节点一   node1.add(new DefaultMutableTreeNode("默认路径")); //增加新节点到节点一上   node1.add(new DefaultMutableTreeNode("保存选项"));   root.add(node1); //增加节点一到根节点上   root.add(new DefaultMutableTreeNode("界面"));   root.add(new DefaultMutableTreeNode("提示声音"));   root.add(new DefaultMutableTreeNode("打印"));   JTree tree = new JTree(root); //得到JTree的实例   DefaultTreeCellRenderer renderer = (DefaultTreeCellRenderer)tree.getCellRenderer(); //得到JTreeRenderer   renderer.setLeafIcon(null); //设置叶子节点图标为空   renderer.setClosedIcon(null); //设置关闭节点的图标为空   renderer.setOpenIcon(null); //设置打开节点的图标为空   tree.addTreeSelectionListener(new TreeSelectionListener() {//选择节点的事件处理   public void valueChanged(TreeSelectionEvent evt) {   TreePath path = evt.getPath(); //得到选择路径   String info=path.getLastPathComponent().toString(); //得到选择的节点名称   jtfInfo.setText(info); //在文本域中显示名称   }
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

nasida

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值