<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        


    
	
    
		
			


    

    posts - 68, comments - 19, trackbacks - 0, articles - 1
    


    		
	
    
	
    
		
			
		
		
			
    
				
					
	
    
		
    
			
    
				簡單實用的js樹形導航封裝
			
    
 			Posted on 2011-01-22 09:36 viery 閱讀(1558) 評論(0)  編輯  收藏  
			
			


		
    
		
    
    
        
    
              ......    
        
    
        

    
要實現上面的導航樹我們不需要做太多的東西就可以完成
    
首先我們需要從官網上下載 js 文件 http://destroydrop.com/javascripts/tree/
    
之后新建一個 html 文件 引入下載文件中的 css 樣式 和 js 文件 調用方法即可！
    

    
    
        
    
            <html>
    
            <head>
    
                <title>js樹 ant</title>
    
                <link rel="StyleSheet" href="dtree.css" type="text/css" />
    
                <script type="text/javascript" src="dtree.js"></script>
    
            </head>
    
            <body>
    
            <div class="dtree">
    
                <p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
    
                <script type="text/javascript">
    
                    d = new dTree('d');
    
                    d.add(0,-1,'客戶關系管理系統');
    
                    d.add(1,0,'營銷管理','example01.html');
    
                        d.add(2,1,'銷售機會管理','example01.html');
    
                        d.add(3,1,'客戶開發計劃','example01.html');
    
                    d.add(4,0,'客戶管理','example01.html');
    
                        d.add(5,4,'客戶信息管理','example01.html');
    
                        d.add(6,4,'客戶流失管理','example01.html');
    
                    d.add(7,0,'服務管理','example01.html');
    
                        d.add(8,7,'服務創建','example01.html');
    
                        d.add(9,7,'服務分配','example01.html');
    
                        d.add(10,7,'服務處理','example01.html');
    
                        d.add(11,7,'服務反饋','example01.html');
    
                        d.add(12,7,'服務歸檔','example01.html');
    
                    d.add(13,0,'統計報表','example01.html');
    
                        d.add(14,13,'客戶貢獻分析','example01.html');
    
                        d.add(15,13,'客戶構成分析','example01.html');
    
                        d.add(16,13,'客戶服務分析','example01.html');
    
                        d.add(17,13,'客戶流失分析','example01.html');
    
                      d.add(18,0,'基礎數據','example01.html');
    
                        d.add(19,18,'數據字典管理','example01.html');
    
                        d.add(20,18,'查詢產品信息','example01.html');
    
                        d.add(21,18,'查詢庫存','example01.html');
    
                    document.write(d);
    
                </script>
    
            </div>
    
            </body>
    
            </html>
    
                		
        
    
        

    
這樣做的好處是我們不需要自己寫 js 代碼框架已經為我們封裝好了！我們只需要調用存在的方法即可！
    
對于 tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 方法中的參數這里有必要說一下
    

    

    Parameters
    

    

    
    
        
    
             Name
             Type
             Description
        
    
        
    
             id
             Number
             Unique identity number.
        
    
        
    
             pid
             Number
            Number refering to the parent node. The value for the root node has to   be -1.
        
    
        
    
             name
             String
             Text label for the node.
        
    
        
    
             url
             String
             Url for the node.
        
    
        
    
             title
             String
             Title for the node.
        
    
        
    
             target
             String
             Target for the node.
        
    
        
    
             icon
             String
             Image file to use as the icon. Uses default if not specified.
        
    
        
    
             iconOpen
             String
             Image file to use as the open icon. Uses default if not specified
        
    
        
    
             open
             Boolean
             Is the node open.
        
    
        

    

    

    
Example
    
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
    

    
上面是引自 dtree api 中的描述
    
下面是翻譯后的描述：
    

    

    id ：節點自身的id
    

    pid ：節點的父節點的id
    

    name ：節點顯示在頁面上的名稱
    

    url ：節點的鏈接地址
    

    title ：鼠標放在節點上所出現的提示信息
    

    target ：節點鏈接所打開的目標frame（如框架目標mainFrame或是_blank,_self之類）
    

    icon ：節點關閉時的顯示圖片的路徑
    

    iconOpen：節點打開時的顯示圖片的路徑
    

    open ：布爾型，節點是否打開（默認為false）
    

    
===========================================================================================
    
Ok  按照上面的方式我們就可以很快的創建一個樹形目錄，但是如果管理員想增加一個功能或者移除一個功能的話，那么就需要更改頁面中 js 中的代碼。能不能將所有的節點信息存放在數據庫中，在加載這個 jsp/html 頁面的時候讀取出數據呢 ？
    
為此我們需要設計一個數據庫和表，建一張 DTree 表，表中有九列沒分別為 add  方法中的參數
    
下面是數據庫的腳本 不想自己寫了 在網上找了一個
    

    
    
        
    
            use master
    
            go
    
            if exists (select * from sysdatabases where name = 'tree')
    
             drop database tree
    
            go
    
            create database tree
    
            go
    
            use tree
    
            go
    
            
    
            create table dtree
    
            (
    
             id int identity(1,1) primary key,     --節點編號
    
             pid int,                              --父節點
    
             [name] varchar(20),                   --節點名稱
    
             url varchar(20),                      --連接地址
    
             title varchar(20),                    --節點描述
    
             target varchar(20),                   --Target
    
             icon varchar(20),                     --圖標
    
             iconOpen varchar(20),                 --展開狀態下的圖標路徑
    
             [open] varchar(20)                    --是否展開
    
            )
    
            
    
            insert into  dtree values('-1','Y106班','index.jsp','班級','blank','','','')
    
            insert into  dtree values('1','教師','teacher.jsp','教師','blank','','','')
    
            insert into  dtree values('1','班干部','depater.jsp','班干','blank','','','')
    
            insert into  dtree values('1','組長','lady.jsp','組員','blank','','','')
    
            insert into  dtree values('1','學員','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('1','班主任','leader.jsp','班主任','blank','','','')
    
            insert into  dtree values('1','教員','teacher.jsp','教員','blank','','','')
    
            insert into  dtree values('2','班長','index.jsp','班長','blank','','','')
    
            insert into  dtree values('2','學委','index.jsp','學委','blank','','','')
    
            insert into  dtree values('4','學員1','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員2','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員3','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員4','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員5','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員6','stu.jsp','學員','blank','','','')
    
            insert into  dtree values('4','學員7','stu.jsp','學員','blank','','','')
    
            Go
    
            select id,pid,[name],url,title,target,icon,iconOpen,[open] from dtree
    
                		
        
    
        

    

    
編寫一個數據庫訪問類 并返回 DTree 表中的數據
    
DBManager.java  數據庫訪問類 并取得 DTree 表中的所有數據
    

    
    
        
    
            package com.ant.dao;
    
            import java.sql.Connection;
    
            import java.sql.DriverManager;
    
            import java.sql.ResultSet;
    
            import java.sql.SQLException;
    
            import java.sql.Statement;
    
            import java.util.ArrayList;
    
            import com.ant.po.DTree;
    
            public class DBManager {
    
                private static final String DRIVER="com.microsoft.sqlserver.jdbc.SQLServerDriver";
    
                private static final String URL="jdbc:sqlserver://localhost:1433;databaseName=tree";
    
                private static final String SA="sa";
    
                private static final String PWD="sqlpwd";
    
                    static private Connection conn;
    
                public DBManager() {
    
                    getConnection();
    
                }
    
                //打開連接
    
                public static void getConnection(){
    
                    try {
    
                        Class.forName(DRIVER);
    
                        conn=DriverManager.getConnection(URL,SA,PWD);
    
                    } catch (ClassNotFoundException e) {
    
                        e.printStackTrace();
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }
    
                }
    
                //關閉連接
    
                public static void closeConnection(){
    
                    if(conn!=null){
    
                        try {
    
                            if(!conn.isClosed()){
    
                                conn.close();
    
                                conn=null;
    
                            }
    
                        } catch (SQLException e) {
    
                            e.printStackTrace();
    
                        }
    
                    }
    
                }
    
                //執行查詢
    
                public static ResultSet executeQuery(String sql){
    
                    getConnection();
    
                    Statement st;
    
                    try {
    
                        st = conn.createStatement();
    
                        return st.executeQuery(sql);
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }
    
                    return null;
    
                }
    
                //得到所有的節點
    
                public static java.util.List<DTree> getAll(){
    
                    ResultSet rs=executeQuery("select * from dtree");
    
                    DTree d=null;
    
                    java.util.List<DTree> li=new ArrayList<DTree>();
    
                    try {
    
                        while (rs.next()) {
    
                            d=new DTree();
    
                                d.setId(rs.getInt("id"));
    
                             d.setPid(rs.getInt("pid"));
    
                             d.setName(rs.getString("name"));
    
                             d.setUrl(rs.getString("url"));
    
                             d.setTitle(rs.getString("title"));
    
                             d.setTarget(rs.getString("target"));
    
                             d.setIcon(rs.getString("icon"));
    
                             d.setIconOpen(rs.getString("iconOpen"));
    
                             d.setOpen(rs.getString("open"));
    
                             li.add(d);
    
                        }
    
                        return li;
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }finally{
    
                        closeConnection();
    
                    }
    
                    return li;
    
                }
    
            }
    
                		
        
    
        

    

    
index.jsp  數據顯示頁面
    

    
    
        
    
            <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
    
            <%@page import="com.ant.po.DTree"%>
    
            <%@page import="com.ant.dao.DBManager"%>
    
            <script type="text/javascript" src="script/dtree.js"></script>
    
            <link rel="StyleSheet" href="script/dtree.css" type="text/css" />
    
            <title>My JSTree</title>
    
            <%
    
                DBManager db = new DBManager();
    
                List<DTree> li = db.getAll();
    
            %>
    
            <script type="text/javascript">
    
                    d = new dTree('d');
    
                    <% for(int i=0;i<li.size();i++){
    
                             DTree d=(DTree)li.get(i);
    
                    %>
    
                    d.add(<%=d.getId()%>,<%=d.getPid()%>,'<%=d.getName()%>','<%=d.getUrl()%>','<%=d.getTitle()%>');
    
                <%}%>
    
                    document.write(d);
    
                </script>
    
                <head>
    
                </head>
    
                <body>
    
                </body>
    
            </html>
    
                		
        
    
        

    

    

    
運行結果
    

    
    
        
    
             
        
    
        

    

    
Ok！
    

    
到這一步我們只需要在做一個管理菜單項的頁面就可以實現動態的菜單，而且頁面不要求發生任何改變就可以顯示數據庫中最新的節點信息！
    
 
    
現在有一個問題我們在 jsp  頁面通過循環顯示出了集合中的值，并將其作為參數傳遞給 add 方法。能不能我在頁面做的再簡單點呢？接著封裝，我們將實現的步驟封裝到業務類中，業務類返回一個 String 之后我們只需要在頁面中顯示這個 String 就 Ok 了！
    

    
首先我們要修改業務類的方法，需要返回一個 String 類型的字符串
    
DBManager.java  數據庫訪問類 并取得 DTree 表中的所有數據封裝在一個 StringBuffer 中
    

    
    
        
    
            package com.ant.dao;
    
            import java.sql.Connection;
    
            import java.sql.DriverManager;
    
            import java.sql.ResultSet;
    
            import java.sql.SQLException;
    
            import java.sql.Statement;
    
            import java.util.ArrayList;
    
            import java.util.List;
    
            import com.accp.po.DTree;
    
            public class DBManager {
    
                private static final String DRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    
                private static final String URL = "jdbc:sqlserver://localhost:1433;databaseName=tree";
    
                private static final String SA = "sa";
    
                private static final String PWD = "sqlpwd";
    
                private static Connection conn=null;
    
                // 打開連接
    
                public static void getConnection() {
    
                    try {
    
                        Class.forName(DRIVER);
    
                        conn = DriverManager.getConnection(URL, SA, PWD);
    
                    } catch (ClassNotFoundException e) {
    
                        e.printStackTrace();
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }
    
                }
    
                // 關閉連接
    
                public void closeConnection() {
    
                    if (conn != null) {
    
                        try {
    
                            if (!conn.isClosed()) {
    
                                conn.close();
    
                                conn = null;
    
                            }
    
                        } catch (SQLException e) {
    
                            e.printStackTrace();
    
                        }
    
                    }
    
                }
    
                // 執行在查詢
    
                public static ResultSet executeQuery(String sql) {
    
                    getConnection();
    
                    Statement st;
    
                    try {
    
                        st = conn.createStatement();
    
                        return st.executeQuery(sql);
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }
    
                    return null;
    
                }
    
                // 得到所有的節點
    
                public static String getAll() {
    
                    ResultSet rs = executeQuery("select * from dtree");
    
                    List<DTree> li = new ArrayList<DTree>();
    
                    DTree d = new DTree();
    
                    try {
    
                        //這里可以直接封裝到 StringBuffer 中
    
                        while (rs.next()) {
    
                            d = new DTree();
    
                            d.setId(rs.getInt("id"));
    
                            d.setPid(rs.getInt("pid"));
    
                            d.setName(rs.getString("name"));
    
                            d.setUrl(rs.getString("url"));
    
                            d.setTitle(rs.getString("title"));
    
                            d.setTarget(rs.getString("target"));
    
                            d.setIcon(rs.getString("icon"));
    
                            d.setIconOpen(rs.getString("iconOpen"));
    
                            d.setOpen(rs.getString("open"));
    
                            li.add(d);
    
                        }
    
                        StringBuffer contents = new StringBuffer();
    
                        contents.append("d = new dTree('d');");
    
                        for (DTree tn : li) {
    
                            contents.append("\n");
    
                            contents.append("d.add('");
    
                            contents.append(tn.getId());
    
                            contents.append("','");
    
                            contents.append(tn.getPid());
    
                            contents.append("','");
    
                            contents.append(tn.getName());
    
                            contents.append("','");
    
                            contents.append(tn.getUrl());
    
                            contents.append("','");
    
                            contents.append(tn.getTitle());
    
                            contents.append("','");
    
                            contents.append(tn.getTarget());
    
                            contents.append("','");
    
                            contents.append(tn.getIcon());
    
                            contents.append("','");
    
                            contents.append(tn.getIconOpen());
    
                            contents.append("','");
    
                            contents.append(tn.getOpen());
    
                            contents.append("');");
    
                            contents.append("\n");                
    
                        }
    
                        contents.append("document.write(d);");        
    
                        return contents.toString();
    
                    } catch (SQLException e) {
    
                        e.printStackTrace();
    
                    }
    
                    return null;
    
                }
    
            }
    
                		
        
    
        

    
index.jsp  數據顯示頁面，現在的頁面就簡潔多了！

    
    
        
    
            <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
    
            <%@page import="com.ant.dao.DBManager"%>
    
            <script type="text/javascript" src="script/dtree.js"></script>
    
            <link rel="StyleSheet" href="script/dtree.css" type="text/css" />
    
            <script type="text/javascript">
    
                 <%=DBManager.getAll() %>
    
            </script>    		
        
    
        

    

    
	
    


    
	    
    




    





    


    

	
    
		
    
				
		
	
		
    
		
		
    只有注冊用戶登錄后才能發表評論。
    
		
    
			
		
    
			
		
    
		
		
    
		


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網站導航:
		
		
    
		
    
			
		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				
			
    
		    		
	
    
	
    
		
			

		
	
    

    


    







    
        
	



主站蜘蛛池模板：
亚洲成年人电影网站|
亚洲第一福利视频|
亚洲爆乳少妇无码激情|
国产精品成人免费视频网站京东|
91亚洲国产成人精品下载|
最近2022中文字幕免费视频|
久久丫精品国产亚洲av不卡|
成人在线免费看片|
亚洲精品国产精品国自产网站
|
免费看又黄又爽又猛的视频软件|
国产精品久久香蕉免费播放|
久久久久久亚洲精品|
免费一级毛片在线播放视频|
国产精品亚洲精品日韩已满|
baoyu777永久免费视频|
久久久久亚洲精品无码系列|
日本xxxx色视频在线观看免费|
亚洲乱码一区av春药高潮|
天天拍拍天天爽免费视频
|
亚洲视频一区在线观看|
2019中文字幕在线电影免费|
ASS亚洲熟妇毛茸茸PICS|
国产一级一片免费播放i|
香蕉免费看一区二区三区|
亚洲嫩草影院久久精品|
一二三四免费观看在线电影
|
亚洲色欲啪啪久久WWW综合网|
浮力影院第一页小视频国产在线观看免费
|
麻豆国产VA免费精品高清在线
|
久久99毛片免费观看不卡|
亚洲系列国产精品制服丝袜第|
国产妇乱子伦视频免费|
日韩在线观看免费|
亚洲一区二区三区日本久久九|
毛片在线看免费版|
久久久受www免费人成|
亚洲区视频在线观看|
亚洲爽爽一区二区三区|
69式互添免费视频|
成年大片免费视频播放一级
|
WWW亚洲色大成网络.COM|