空間站

          北極心空

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            15 Posts :: 393 Stories :: 160 Comments :: 0 Trackbacks
          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>
           
          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("http://-->");
              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("http://-->\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>
          posted on 2007-09-30 09:48 蘆葦 閱讀(3517) 評論(6)  編輯  收藏 所屬分類: HTML & Script

          Feedback

          # re: 使用dtree構建動態樹型菜單 2008-09-25 12:41 SS
          完全綠春不對馬嘴,轉帖吧,沒測試過吧  回復  更多評論
            

          # re: 使用dtree構建動態樹型菜單 2008-10-10 11:21 蘆葦
          @SS

          的確是轉貼的,沒看到最下面的說明嗎?這是我的收藏,覺得沒用就請你離開  回復  更多評論
            

          # re: 使用dtree構建動態樹型菜單 [未登錄] 2009-07-02 11:42 a
          根本就不行  回復  更多評論
            

          # re: 使用dtree構建動態樹型菜單 [未登錄] 2010-01-20 11:08 billy
          還有這種不要臉的人專門收集別人的垃圾文章騙人。  回復  更多評論
            

          # re: 使用dtree構建動態樹型菜單 2010-02-23 11:32 蘆葦
          我知道這些代碼是有問題的,而且也是我轉別人的文章,但是我使用的時候就是參考這個弄出來的,一個正常的代碼,你拷貝過去完全正常使用,你還能學到什么?只有出錯了,你自己解決了,你才學到了東西.
          另外:這里是我的私人博客,是我收集一些資料的地方,沒有你想要的東西很正常啊,請不要出口傷人!
            回復  更多評論
            

          # <tree:init/>語句沒有執行 2010-02-28 12:02 garyme
          請問<tree:init/>語句沒有執行,而<tree:show/>正常,該怎么解決?謝謝  回復  更多評論
            

          主站蜘蛛池模板: 德兴市| 高平市| 广宁县| 高尔夫| 乌兰浩特市| 博白县| 丹东市| 芜湖市| 广南县| 库伦旗| 越西县| 陕西省| 麻阳| 比如县| 正安县| 清镇市| 嘉祥县| 化州市| 天等县| 永嘉县| 瓦房店市| 莫力| 巴南区| 泸溪县| 木兰县| 米林县| 富民县| 曲沃县| 西城区| 那坡县| 彰化县| 凤翔县| 抚顺市| 眉山市| 沧州市| 尤溪县| 攀枝花市| 察隅县| 木里| 房产| 樟树市|