99久久精品99国产精品,久久久久久欧美,欧美亚洲综合视频

簡單實用的js樹形導航封裝

Posted on 2011-01-22 09:36 viery 閱讀(1562) 評論(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 表中的所有數據

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>

新用戶注冊刷新評論列表


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




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

redang bay

導航

留言簿

隨筆分類

隨筆檔案

搜索

最新評論

評論排行榜

簡單實用的js樹形導航封裝