亚洲国产精品成人综合久久久 ,久久久久久久久无码精品亚洲日韩,亚洲欧洲日韩综合在线

簡單實(shí)用的js樹形導(dǎo)航封裝

Posted on 2011-01-22 09:36 viery 閱讀(1558) 評(píng)論(0) 編輯收藏

......

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

<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,'客戶關(guān)系管理系統(tǒng)');
       d.add(1,0,'營銷管理','example01.html');
           d.add(2,1,'銷售機(jī)會(huì)管理','example01.html');
           d.add(3,1,'客戶開發(fā)計(jì)劃','example01.html');
       d.add(4,0,'客戶管理','example01.html');
           d.add(5,4,'客戶信息管理','example01.html');
           d.add(6,4,'客戶流失管理','example01.html');
       d.add(7,0,'服務(wù)管理','example01.html');
           d.add(8,7,'服務(wù)創(chuàng)建','example01.html');
           d.add(9,7,'服務(wù)分配','example01.html');
           d.add(10,7,'服務(wù)處理','example01.html');
           d.add(11,7,'服務(wù)反饋','example01.html');
           d.add(12,7,'服務(wù)歸檔','example01.html');
       d.add(13,0,'統(tǒng)計(jì)報(bào)表','example01.html');
           d.add(14,13,'客戶貢獻(xiàn)分析','example01.html');
           d.add(15,13,'客戶構(gòu)成分析','example01.html');
           d.add(16,13,'客戶服務(wù)分析','example01.html');
           d.add(17,13,'客戶流失分析','example01.html');
       d.add(18,0,'基礎(chǔ)數(shù)據(jù)','example01.html');
           d.add(19,18,'數(shù)據(jù)字典管理','example01.html');
           d.add(20,18,'查詢產(chǎn)品信息','example01.html');
           d.add(21,18,'查詢庫存','example01.html');
       document.write(d);
   </script>
</div>
</body>
</html>

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

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 ：節(jié)點(diǎn)自身的id

pid ：節(jié)點(diǎn)的父節(jié)點(diǎn)的id

name ：節(jié)點(diǎn)顯示在頁面上的名稱

url ：節(jié)點(diǎn)的鏈接地址

title ：鼠標(biāo)放在節(jié)點(diǎn)上所出現(xiàn)的提示信息

target ：節(jié)點(diǎn)鏈接所打開的目標(biāo)frame（如框架目標(biāo)mainFrame或是_blank,_self之類）

icon ：節(jié)點(diǎn)關(guān)閉時(shí)的顯示圖片的路徑

iconOpen：節(jié)點(diǎn)打開時(shí)的顯示圖片的路徑

open ：布爾型，節(jié)點(diǎn)是否打開（默認(rèn)為false）

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

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,     --節(jié)點(diǎn)編號(hào)
pid int,                              --父節(jié)點(diǎn)
[name] varchar(20),                   --節(jié)點(diǎn)名稱
url varchar(20),                      --連接地址
title varchar(20),                    --節(jié)點(diǎn)描述
target varchar(20),                   --Target
icon varchar(20),                     --圖標(biāo)
iconOpen varchar(20),                 --展開狀態(tài)下的圖標(biāo)路徑
[open] varchar(20)                    --是否展開
)

insert into dtree values('-1','Y106班','index.jsp','班級(jí)','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','學(xué)員','stu.jsp','學(xué)員','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','學(xué)委','index.jsp','學(xué)委','blank','','','')
insert into dtree values('4','學(xué)員1','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員2','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員3','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員4','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員5','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員6','stu.jsp','學(xué)員','blank','','','')
insert into dtree values('4','學(xué)員7','stu.jsp','學(xué)員','blank','','','')
Go
select id,pid,[name],url,title,target,icon,iconOpen,[open] from dtree

編寫一個(gè)數(shù)據(jù)庫訪問類并返回 DTree 表中的數(shù)據(jù)
DBManager.java 數(shù)據(jù)庫訪問類并取得 DTree 表中的所有數(shù)據(jù)

index.jsp 數(shù)據(jù)顯示頁面

<%@ 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>

運(yùn)行結(jié)果

Ok！

到這一步我們只需要在做一個(gè)管理菜單項(xiàng)的頁面就可以實(shí)現(xiàn)動(dòng)態(tài)的菜單，而且頁面不要求發(fā)生任何改變就可以顯示數(shù)據(jù)庫中最新的節(jié)點(diǎn)信息！

現(xiàn)在有一個(gè)問題我們在 jsp 頁面通過循環(huán)顯示出了集合中的值，并將其作為參數(shù)傳遞給 add 方法。能不能我在頁面做的再簡單點(diǎn)呢？接著封裝，我們將實(shí)現(xiàn)的步驟封裝到業(yè)務(wù)類中，業(yè)務(wù)類返回一個(gè) String 之后我們只需要在頁面中顯示這個(gè) String 就 Ok 了！

首先我們要修改業(yè)務(wù)類的方法，需要返回一個(gè) String 類型的字符串
DBManager.java 數(shù)據(jù)庫訪問類并取得 DTree 表中的所有數(shù)據(jù)封裝在一個(gè) 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();
       }
   }
   // 關(guān)閉連接
   public void closeConnection() {
       if (conn != null) {
           try {
               if (!conn.isClosed()) {
                   conn.close();
                   conn = null;
               }
           } catch (SQLException e) {
               e.printStackTrace();
           }
       }
   }
   // 執(zhí)行在查詢
   public static ResultSet executeQuery(String sql) {
       getConnection();
       Statement st;
       try {
           st = conn.createStatement();
           return st.executeQuery(sql);
       } catch (SQLException e) {
           e.printStackTrace();
       }
       return null;
   }
   // 得到所有的節(jié)點(diǎn)
   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 數(shù)據(jù)顯示頁面，現(xiàn)在的頁面就簡潔多了！

<%@ 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>

新用戶注冊刷新評(píng)論列表


只有注冊用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理

redang bay

導(dǎo)航

留言簿

隨筆分類

隨筆檔案

搜索

最新評(píng)論

評(píng)論排行榜

簡單實(shí)用的js樹形導(dǎo)航封裝