FlyPig

在網上發現了一個很不錯的樹的例子。是外國人寫的，可以免費使用和修改（商用或個人使用都成）。
上星期正好沒什么事情，本著拿來主義的精神，就研究了一下，寫了一個使用說明也給原代碼加了點注釋。

Tigra Tree Menu scipt包含三個文件:

tree.js?????????? 構造樹的js代碼
tree_items.js???? 樹結構文件.構造樹的數組及一些配置被定義在此
tree_tpl.js?????? 默認的圖標配置文件-可以被替換為用戶自定義圖標

tree_items.js中的數組是類似:
var TREE_ITEMS = [
? ["A0",null,
??? ["A00",null,
????? ["A000"]
??? ],
??? ["A01",null,
????? ["A010","javascript:alert("A010")"]
??? ],
??? ["A02"]
? ],
? ["A1",null,
??? ["A10"],
??? ["A11",null,
????? ["A110"]
??? ]
? ]
];

一、每個樹節點都是包含一個或多個元素的數組.

1、如果節點是葉子節點,它對應的數組類似:
["A010","javascript:alert("A010")"]
其中第一個元素是節點顯示的text,第二個元素是點擊節點時執行的js代碼,也可以是一個鏈接地址,如果在tree_tpl.js里面有配target的話,點擊節點將會在target所指位置打開這個鏈接地址,
如果不需要點擊時有執行js代碼或有鏈接,第二個元素可以不寫.

2、如果節點是個樹節點,它對應的數組類似:
["A1",null,
? ["A10"],??????????????????????????? <----A1的下級結點,葉子結點
? ["A11",null,??????????????????????? <----A1的下級結點,樹結點
??? ["A110"]
? ]
]
其中第一個元素是節點顯示的text,第二個元素顯示的是點擊節點時執行的js代碼,也可以是一個鏈接地址,如果在tree_tpl.js里面有配target的話,點擊節點將會在target所指位置打開這個鏈接地址,
如果不需要點擊時有執行js代碼或有鏈接,第二個元素必須寫成null(不能不寫),之后的元素是數組,存放這個元素的下級節點信息.

二、trees數組存放每一棵樹的信息.
例,如果頁面上有兩棵樹,則第一棵樹的信息存放在trees[0]中,第二棵樹的信息存放在trees[1]中.

三、每個節點的信息即存放在其上級的a_children數組中,同時也存放在整棵樹a_index數組中.
例如,結點A000,其信息對象即存放在其上級的a_children數組的第0位,也存放在整棵樹的a_index數組的第2位

?

tree.js的代碼：

?

//?Title:?Tigra?Tree
//?Description:?See?the?demo?at?url
//?URL:?http://www.softcomplex.com/products/tigra_menu_tree/
//?Version:?1.1
//?Date:?11-12-2002?(mm-dd-yyyy)
//?Notes:?This?script?is?free.?Visit?official?site?for?further?details.

function?tree?(a_items,?a_template)?{
????this.a_tpl??????=?a_template;
????this.a_config???=?a_items;
????this.o_root?????=?this;
????this.a_index????=?[];
????this.o_selected?=?null;
????this.n_depth????=?-1;
????this.n_id?=?trees.length;
????trees[this.n_id]?=?this;

??//圖像預裝載
????var?o_icone?=?new?Image(),
??o_iconl?=?new?Image();
??//icon_e,和icon_l是一定有配的
????o_icone.src?=?a_template['icon_e'];
????o_iconl.src?=?a_template['icon_l'];
????a_template['im_e']?=?o_icone;
????a_template['im_l']?=?o_iconl;

????for?(var?i?=?0;?i?<?64;?i++)
????????if?(a_template['icon_'?+?i])?{//如果配置文件里面有配圖像地址,則需預裝載
????????????var?o_icon?=?new?Image();
????????????a_template['im_'?+?i]?=?o_icon;
????????????o_icon.src?=?a_template['icon_'?+?i];
????????}
????
??//折疊/展開節點
????this.toggle?=?function?(n_id)?{????var?o_item?=?this.a_index[n_id];?o_item.open(o_item.b_opened)?};

??//選中節點
????this.select?=?function?(n_id)?{?return?this.a_index[n_id].select();?};

??//從節點上移開
????this.mout???=?function?(n_id)?{?this.a_index[n_id].upstatus(true)?};

??//移到節點上
????this.mover??=?function?(n_id)?{?this.a_index[n_id].upstatus()?};

????this.a_children?=?[];

????for?(var?i?=?0;?i?<?a_items.length;?i++)
????????new?tree_item(this,?i);


??//開始生成結點
????for?(var?i?=?0;?i?<?this.a_children.length;?i++)?{
????????document.write(this.a_children[i].init());?//根結點
????????this.a_children[i].open();//展開,如果希望折疊到根結點調用this.a_children[i].open(true);

????//需要全部展開節點時,調用以下這一段代碼,add?by?linxf
????if(this.a_children[i].a_children.length?>?0){
??????openChildNode(this.a_children[i]);
????}
????}
}

/*
?*?生成并打開o_parent的所有子節點
?*?add?by?linxf
?*/
function?openChildNode(o_parent){
??for?(var?i?=?0;?i?<?o_parent.a_children.length;?i++)?{
????o_parent.a_children[i].open();
????if(o_parent.a_children[i].a_children.length?>?0){
??????openChildNode(o_parent.a_children[i]);
????}
??}
}

function?tree_item?(o_parent,?n_order)?{
????this.n_depth??=?o_parent.n_depth?+?1;//節點的深度
????this.a_config?=?o_parent.a_config[n_order?+?(this.n_depth???2?:?0)];//每個節點對應的數組
????if?(!this.a_config)?return;

????this.o_root????=?o_parent.o_root;?//trees數組中放置這棵樹信息的對應元素,trees[x]
????this.o_parent??=?o_parent;
????this.n_order???=?n_order;
????this.b_opened??=?!this.n_depth;

??//在整棵樹的a_index數組的最末位放置自身
????this.n_id?=?this.o_root.a_index.length;
????this.o_root.a_index[this.n_id]?=?this;

??//在上級的a_children數組的相應位置(n_order)放置自身
????o_parent.a_children[n_order]?=?this;

????this.a_children?=?[];
??//遞歸構造
????for?(var?i?=?0;?i?<?this.a_config.length?-?2;?i++)
????????new?tree_item(this,?i);

????this.get_icon?=?item_get_icon;
????this.open?????=?item_open;
????this.select???=?item_select;
????this.init?????=?item_init;
????this.upstatus?=?item_upstatus;
????this.is_last??=?function?()?{//是否是(父結點的所有子結點中的)最后一個結點
????return?this.n_order?==?this.o_parent.a_children.length?-?1?
??};
}

/*
?*?展開/折壘節點
?*/
function?item_open?(b_close)?{
????var?o_idiv?=?get_element('i_div'?+?this.o_root.n_id?+?'_'?+?this.n_id);
????if?(!o_idiv)?return;
????
????if?(!o_idiv.innerHTML)?{//下級結點(用div圈起來的),如果里面沒有內容,生成內容,如果有內容,則展開(折疊)div
????????var?a_children?=?[];
????????for?(var?i?=?0;?i?<?this.a_children.length;?i++)
????????????a_children[i]=?this.a_children[i].init();
????????o_idiv.innerHTML?=?a_children.join('');
????}

????o_idiv.style.display?=?(b_close???'none'?:?'block');
????
????this.b_opened?=?!b_close;
????var?o_jicon?=?document.images['j_img'?+?this.o_root.n_id?+?'_'?+?this.n_id],
????????o_iicon?=?document.images['i_img'?+?this.o_root.n_id?+?'_'?+?this.n_id];
????if?(o_jicon)?o_jicon.src?=?this.get_icon(true);
????if?(o_iicon)?o_iicon.src?=?this.get_icon();
????this.upstatus();
}

/*
?*?選擇結點
?*/
function?item_select?(b_deselect)?{
????if?(!b_deselect)?{
????????var?o_olditem?=?this.o_root.o_selected;//取上一次被選中的節點
????????this.o_root.o_selected?=?this;//把當前被選中的節點存入this.o_root.o_selected
????????if?(o_olditem)?o_olditem.select(true);//將上次選中的節點字體變為normal
????}

????var?o_iicon?=?document.images['i_img'?+?this.o_root.n_id?+?'_'?+?this.n_id];
????if?(o_iicon)?o_iicon.src?=?this.get_icon();
????get_element('i_txt'?+?this.o_root.n_id?+?'_'?+?this.n_id).style.fontWeight?=?b_deselect???'normal'?:?'bold';
????
????this.upstatus();
????return?Boolean(this.a_config[1]);
}

function?item_upstatus?(b_clear)?{
????window.setTimeout('window.status="'?+?(b_clear???''?:?this.a_config[0]?+?(this.a_config[1]???'?('+?this.a_config[1]?+?')'?:?''))?+?'"',?10);
}

/*
?*?結點初始化
?*/
function?item_init?()?{
????var?a_offset?=?[],
????????o_current_item?=?this.o_parent;
????for?(var?i?=?this.n_depth;?i?>?1;?i--)?{
????????a_offset[i]?=?'<img?src="'?+?this.o_root.a_tpl[o_current_item.is_last()???'icon_e'?:?'icon_l']?+?'"?border="0"?align="absbottom">';
????????o_current_item?=?o_current_item.o_parent;
????}

??//返回構造的html語句,this.a_config[1]為href的值,this.a_config[0]為節點的內容
????return?'<table?cellpadding="0"?cellspacing="0"?border="0"><tr><td?nowrap>'?+?(this.n_depth???a_offset.join('')?+?(this.a_children.length
??????????'<a?href="javascript:?trees['?+?this.o_root.n_id?+?'].toggle('?+?this.n_id?+?')"?onmouseover="trees['?+?this.o_root.n_id?+?'].mover('?+?this.n_id?+?')"?onmouseout="trees['?+?this.o_root.n_id?+?'].mout('?+?this.n_id?+?')"><img?src="'?+?this.get_icon(true)?+?'"?border="0"?align="absbottom"?name="j_img'?+?this.o_root.n_id?+?'_'?+?this.n_id?+?'">a>'
????????:?'<img?src="'?+?this.get_icon(true)?+?'"?border="0"?align="absbottom">')?:?'')?
????????+?'<a?href="'?+?this.a_config[1]?+?'"?target="'?+?this.o_root.a_tpl['target']?+?'"?onclick="return?trees['?+?this.o_root.n_id?+?'].select('?+?this.n_id?+?')"?ondblclick="trees['?+?this.o_root.n_id?+?'].toggle('?+?this.n_id?+?')"?onmouseover="trees['?+?this.o_root.n_id?+?'].mover('?+?this.n_id?+?')"?onmouseout="trees['?+?this.o_root.n_id?+?'].mout('?+?this.n_id?+?')"?class="t'?+?this.o_root.n_id?+?'i"?id="i_txt'?+?this.o_root.n_id?+?'_'?+?this.n_id?+?'"><img?src="'?+?this.get_icon()?+?'"?border="0"?align="absbottom"?name="i_img'?+?this.o_root.n_id?+?'_'?+?this.n_id?+?'"?class="t'?+?this.o_root.n_id?+?'im">'?+?this.a_config[0]?+?'a>td>tr>table>'?
????+?(this.a_children.length???'<div?id="i_div'?+?this.o_root.n_id?+?'_'?+?this.n_id?+?'"?style="display:none">div>'?:?'');
??//節點this.a_config[0]所有的下級都被此層包圍起來
}

function?item_get_icon?(b_junction)?{
????return?this.o_root.a_tpl['icon_'?+?((this.n_depth???0?:?32)?+?(this.a_children.length???16?:?0)?+?(this.a_children.length?&&?this.b_opened???8?:?0)?+?(!b_junction?&&?this.o_root.o_selected?==?this???4?:?0)?+?(b_junction???2?:?0)?+?(b_junction?&&?this.is_last()???1?:?0))];
}

var?trees?=?[];
get_element?=?document.all??
????function?(s_id)?{?return?document.all[s_id]?}?:
????function?(s_id)?{?return?document.getElementById(s_id)?};


function?expand_or_collapse_all?(o_tree,?b_collapse)?{
??for?(var?i?=?0;?i?<?o_tree.a_index.length;?i++)?{
????var?o_item?=?o_tree.a_index[i];
????o_item.open(b_collapse);
??}
}

?

?

tree_tpl.js的代碼：

var?TREE_TPL?=?{
??//超鏈接的target,可能的值有:_blank,?_parent,?_search,?_self?and?_top
????'target'??:?'frameset',????

??//空的圖標和豎線圖標
????'icon_e'??:?'icons/empty.gif',?//?empty?image
????'icon_l'??:?'icons/line.gif',??//?vertical?line

???//以4疊加
??'icon_32'?:?'icons/base.gif',???//?root?leaf?icon?normal
??'icon_36'?:?'icons/base.gif',???//?root?leaf?icon?selected
????
????'icon_48'?:?'icons/base.gif',???//?root?icon?normal
????'icon_52'?:?'icons/base.gif',???//?root?icon?selected
????'icon_56'?:?'icons/base.gif',???//?root?icon?opened
????'icon_60'?:?'icons/base.gif',???//?root?icon?selected
????
????'icon_16'?:?'icons/folder.gif',?//?node?icon?normal
????'icon_20'?:?'icons/folderopen.gif',?//?node?icon?selected
????'icon_24'?:?'icons/folderopen.gif',?//?node?icon?opened
????'icon_28'?:?'icons/folderopen.gif',?//?node?icon?selected?opened

????'icon_0'??:?'icons/page.gif',?//?leaf?icon?normal
????'icon_4'??:?'icons/page.gif',?//?leaf?icon?selected
????
??//以bottom結尾的圖標都有一個向下的豎線尾巴
????'icon_2'??:?'icons/joinbottom.gif',?//?junction?for?leaf
????'icon_3'??:?'icons/join.gif',???????//?junction?for?last?leaf
????'icon_18'?:?'icons/plusbottom.gif',?//?junction?for?closed?node
????'icon_19'?:?'icons/plus.gif',???????//?junctioin?for?last?closed?node
????'icon_26'?:?'icons/minusbottom.gif',//?junction?for?opened?node
????'icon_27'?:?'icons/minus.gif'???????//?junctioin?for?last?opended?node

<html>
<head>
??<style>
????a,?A:link,?a:visited,?a:active,?A:hover
??????{}{color:?#000000;?text-decoration:?none;?font-family:?Tahoma,?Verdana;?font-size:?12px}
??style>
??<script?language="JavaScript"?src="tree.js">script>
??<script?language="JavaScript"?src="tree_items.js">script>
??<script?language="JavaScript"?src="tree_tpl.js">script>
??<script?language="JavaScript"?src="strUtil.js">script>
head>

<body>??
??<SCRIPT?LANGUAGE="JavaScript">
????new?tree?(TREE_ITEMS,?TREE_TPL);
??SCRIPT>
??<button?onClick="expand_or_collapse_all(trees[0],true)">Collapse?Tree1button> 
??<button?onClick="expand_or_collapse_all(trees[0],false)">Expand?Tree1button><br>

??<SCRIPT?LANGUAGE="JavaScript">
????new?tree?(TREE_ITEMS,?TREE_TPL);
??SCRIPT>
??<button?onClick="expand_or_collapse_all(trees[1],true)">Collapse?Tree2button> 
??<button?onClick="expand_or_collapse_all(trees[1],false)">Expand?Tree2button>

body>
html>