目錄樹控件簡介
I. 概述：
目錄樹控件程序完全採用面向對象的方法設計，整個程序封裝一個函數tree()裏面，另外隨目錄樹程序提供了一個圖片列表imagelist控件。使用目錄樹控件程序構建目錄樹一般遵循以下三個步驟：
一、建立imagelist實例對象，並向控件添加建目錄樹所需的圖片；
二、新建一個目錄樹控件實例，將上述imagelist實例對象作爲第一個參數傳遞；
三、調用目錄樹控件的各種對象、方法，添加節點，定義事件處理程序等。
當然我們有更便捷的方法，就是使用現有的目錄樹模板程序以更簡化的步驟來構建目錄樹，關於模板程序擱後再談。在建立目錄樹前我先來理解目錄樹控件的三個核心對象：
（1）目錄樹控件實例對象（tree），如下：
var tree=new tree()
這樣就新建了一個樹對象。
（2）根(root)對象：tree.root，可以看出它是tree的一個成員，它是沒有外觀表現的，用於構建目錄樹第一級的節點，是第一級節點的父對象(parent)。
（3）節點(node)對象，對應於目錄樹上的一個節點，如下：
var node=tree.add(...) //添加節點，參數先省略不談
上面調用目錄添加節點的方法，生成了一個新的節點對象：node
這三個對象各自擁有很多的成員對象（屬性、方法和事件）。
II. 示例程序：
var images=new aimagelist() //建立imagelist實例對象
images.path="images/" //圖片路徑
images.add("file.gif","default") //添加圖片，第二個參數是鍵值(key)
images.add("folder") //添加圖片，文件後綴".gif"省了，鍵值缺省取文件名："folder"
images.add("html","link") //添加html.gif，鍵值爲link
var tree1=new alai_tree(images,16,divTree1) //注意參數divTree1是目錄樹放置的地方，
//網頁上有這樣的代碼：<div id="divTree1"></div>，生成的目錄樹就插到這裏面了。
var root=tree.root
var n1=root.add("節點一","default","js","alert('節點一')")
//等效代碼：var n1=tree1.add(root,"last","節點一","n1","","js","alert('節點一')")
/* 下面代碼演示各種添加節點的方法 */
var n2=root.add("節點二","folder")
var n23=n2.add("2-3") //添加n2的子節點
var n22=tree1.add(n23,"prev","2-2","n22") //將節點n22添加到n23之前
var n20=tree1.add(n2,"first","2-0","n20","file",) //由於"first"參數，這個節點作爲n2的第一個子節點
var n3=tree1.add(root,"last","節點三","folder")
var n31=n3.addLink("http://www.163.com") //添加n2的子節點
var n32=tree1.add(n3,"last","www.163.com","n32","page","url","http://www.163.com") //添加n2的子節點
var colNode=tree.pathParse("/節點四/4-1;/節點四/4-2;/節點四/4-3;/節點五/")
var n4=root.addLink(www.163.com,"歡迎訪問163.NET")
III. 添加節點的方法：
在上面的示例中我們總共接觸到了五種添加目錄樹節點的方法，先看它們的語法原型：
1.tree.add(toNode,relation,text,key,ico,exeCategory,exeArg)
2.root.add(text,ico,exeCategory,exeArg)
3.root.addLink(url,text,target,ico)
4.node.add(text,ico,exeCategory,exeArg)
5.node.addLink(url,text,target,ico)
6.tree.pathParse(path,pathSeparator,listSeparator)
方法1的功能最全面，涵蓋了方法2-5，但部分參數我們很少用到，所以用的較多的還是方法2-5。root對象的add方法總是添加第一級的節點，節點node對象的add方法用於添加節點的子節點。addLink方法方便我們添加有網址鏈接的節點。pathParse方法可解釋一個路徑列表生成對應的樹結構。
IV. 節點關係：
目錄樹控件程序對於樹結構有一個明晰的邏輯表述，這一點表現在樹節點對象的下面幾種關係上：
node.first -- 節點的第一個子節點，若無子節點則爲null
node.last -- 節點的最後一個子節點，若無子節點則爲null
node.next -- 節點下一個相鄰的子節點，若node是該層上最後一個結點則爲null
node.prev -- 節點上一個相鄰的子節點，若node是該層上第一個結點則爲null
node.parent -- 節點的父節點
node.chidren -- 節點的子節點（它是一個的集合數組，第個元素是一個節點對象）
對於根對象root：
root.first是第一級節點的第一個節點，root.last是第一級節點的最後一個節點，root.chidren是第一級節點的集合，第一級節點的parent等於root。
V. 節點對象的成員對象:
節點對象node包含了一些成員對象（屬性），爲了方便說明和理解，截了一張圖放大後加上標註。如下：
數字所標示的對象依次爲：
1.node.exIcon
2.node.icon
3.node.label
4.node.lineIcon[0]
5.node.body
6.node.container
VI. 訪問節點對象：
1.從上面的示例中我們已經看到add方法會返回新添加的節點對象，將之賦予一個變量，以後隨時可以訪問。
2.所有添加的節點保存在tree.nodes集合數組中，如對於第一個添加的節點：
var n0=tree1.add(root,"last","節點一","node0")
除了n0指向該節點外，tree.nodes[0]也指向該節點，另外我們還指定了一個鍵值："node0"，因此tree.nodes["node0"]也指向了該節點，因此n0、tree.nodes[0]和tree.nodes["node0"]引用的都是同一個對象。
3.執行目錄樹節點遍歷的方法：可以從root.first開始根據節點關係可按多種方法進行遍歷，在此不作深究。如果不關心樹的邏輯結構進行遍歷推薦的方法是：
for(var i=1;i<tree.count()-1;i++){tree.nodes[i]}
可能你會想到另一種方法：
for(var i=0;i<tree.nodes.length;i++){tree.nodes[i]}
也是可行的，但要注意如果有節點設了鍵值的話，該節點會被訪問兩次！
4.其它獲得節點對象的方法：
(1)樹對象的方法：getNodeByPath、getNodeByTier、getSelectNode、getActiveNode
(1)節點對象的方法： getSibling、節點關係（next,first,last,prev,parent,children）
VII. 節點的操作：
1.刪除節點:node.remove() 或 tree.removeNode(node)
2.子節點的展開與收縮：
展開：node.expand(true)，收縮：node.expand(false)，自動：node.expand()
展開一個分枝(展開子節點孫子節點)：node.expand(true,true)
展開所有節點：tree.expandAll(true)，收縮所有節點：tree.expandAll(false)
展開至第二層：tree.expandToTier(2)
IX. imagelist控件與目錄樹控件的關係：
imagelist用於向目錄樹控件提供構建目錄樹的各種圖片（圖標），在目錄樹控件中這些圖片是如何被使用的呢？在添加節點的方法中ico參數是用於設置節點圖標的，如上例中n1節點ico爲"default"，這就是添加節點時指定的鍵值，除了用鍵值我們還可以用索引值，因爲"default"是第一個添加的圖標其索引值爲0，用0來代替"default"也是可以的。可見目錄樹控件是通過鍵值(字符串)或索引值(正整數)來引用imagelist控件中的圖片的。
我們還注意到有些節點添加時ico參數是缺省的，但是該節點還是有圖標顯示的，這就是要談的另一個議題－－約定鍵值。約定鍵值是指imagelist控件中具有這些鍵值的元素在目錄樹控件會有特殊的用途，約定鍵值有以下幾種：
1、default -- 默認圖標，在ico參數缺省時節點使用默認圖標，圖例：
2、expand 和 collapse -- 用於控制子節點展開和收縮，
常用圖例：
3、expand_top、expand_end、collapse_top、collapse_end，在使用上面第一組圖例時提供首尾不同的圖片
圖例：
4、leaf 和 twig -- 用於指示樹葉節點和末稍節點的圖標，圖例：
5、line和blank -- 用於畫目錄樹支幹連線。圖例：(blank是一張空白的圖片)
6、link -- 特別用於addLink方法，ico參數缺省時使用，圖例：
按照這種約定，如果你要顯示控制節點展開/收縮的圖片，應該在向imaglist添加expand和collapse鍵值的圖片，同理要顯示枝幹連線就要添加line和blank鍵值的圖片。如果你提供了default圖標且添加節點時沒有指定的ico參數，default圖標就被派上用場了。這是一種非強制的約定，你甚至可以不向imagelist添加任何圖片，這樣你構建的就是沒有圖片的樹。正是因爲這種約定關係使得阿賴目錄樹程序擁有超強的靈活性，你可以使用各種的組合，選取各種的圖標，構建出各式各樣的目錄樹來！
XI. 事件處理：
一、事件處理機制：
樹對象的事件有：onclick , ondblclick , onmousemove , onmouseover , onmouseout , onmouseup , onmousedown , onkeypress , onkeydown , onkeyup , oncollapse , onexpand , afteradd , onblur , onfocus , onselect
節點對象的事件有：onclick , ondblclick , onmouseover , onmouseout , onmousemove , onmousedown , onmouseup , onkeypress , onkeydown , onkeyup , oncollapse , onexpand , onfocus , onblur , onselect
樹對象的事件用於響應所有節點的相應事件，節點對象是針對個別的節點進行處理。有一個很重要的特點：樹對象的事件處理程序的第一個參數都是引發該事件的節點對象，節點對象的事件均沒有參數。我們注意到兩者的事件名幾乎相同(tree.afteradd事件例外)，對於onclick事件它是這樣執行的：當鼠標點擊節點時，將會執行node.onclick的事件處理程序，如果處理程序返回值爲true，接着執行tree.onclick事件，反之如果node.onclick的處理程序返回值爲false(或沒有返回值)，則tree.onclcik事件不會被執行。其它事件都是類同於此，這就是事件處理機制，有點類似DOM（文檔對象模型）的事件冒泡(bubble)。
添加節點add方法的兩個參數：exeCategory和exeArgv是用來設置節點要執行的動作，例如：
n1=tree.root.add("test","","js","alert('hello')")
n2=tree.root.add("9499.net","","url","http://www.9499.net")
則單擊n1將彈出"hello",單擊n2將打開網址www.9499.net。如果缺省這兩個參數默認動作是執行expand方法展開或收縮子節點（如果有的話）。單擊節點執行的動作實際上是調用node.execute()方法，面execute()方法執行的動作又取決於exeCategory和exeArgv兩個參數。node.execute()和onclick事件的聯繫是這樣的：如果tree.onclick事件處理程序返回值爲true，將接着調用node.execute()方法，若返回值爲false或無返回值，則node.execute()方法不會被執行，這是事件處理機制的別一個方面。
二、事件處理程序：
事件處理程序一般用來控制節點的行爲。
示例：如果我們想讓節點有類似超鏈接的效果，即當鼠標移過時文字變藍，加下劃線，但對於節點n11卻不想讓它如此，可以用下面的事件處理程序實現：
//鼠標移入時
tree.οnmοuseοver=function(srcNode)
{
srcNode.label.style.color="blue"
srcNode.label.textDecoration="underline"
srcNode.label.cursor="hand"
}
//鼠標移出時
tree.οnmοuseοut=function(srcNode)
{
srcNode.label.style.color="black"
srcNode.label.textDecoration="none"
}
//對節點11特別處理
n11.οnmοuseοver=n11.οnmοuseοut=function(){return false}
另外點擊節點時默認動作是讓節點獲得焦點選擇加亮顯示，如果不想讓節點被選擇可以讓tree.onselect事件處理程序返回值爲false，就可以屏蔽這個行爲，如下：
tree.οnselect=function(srcNode){return false}
XII.使用模板程序：
目錄樹控件程序具有設計多樣化樹狀菜單的能力，爲了更方便廣大使用者，我們將一些設計好的菜單封裝成模板程序，這樣用戶就可以順手拈來，省去樣式設計的麻煩。模板程序爲我們選好了使用的圖片，設計了一些基本的事件處理程序，用戶只須寫添加節點的代碼就行了，可謂快速高效，多快好省！在示例目前提供瞭如下幾種常用的模板程序，(以後會有更多更酷的！)：
alai_tree_win2k.js -- win2000 explorer風格模板
alai_tree_winxp.js -- winxp explorer風格模板
alai_tree_help.js -- chm幫助風格模板
alai_tree_pretty.js -- 一個很靚的目錄樹模板
alai_tree_qq.js -- QQ面板模板
alai_tree_cool.js -- COOL面板模板 （真的很酷）
現在我們以win2k模板爲例，說明模板程序的使用：
一、首先加載控件程序和模板程序到網頁，代碼：
<script src="alai_tree.js" language="JScript"></sript>
<script src="alai_tree_win2k.js" language="JScript"></sript>
二、調用模板，添加節點：
//實例化目錄樹模板程序，將返回一個樹對象。
var tree2=new alai_tree_win2k(divTree) //divTree是目錄樹放置的地方，如果缺省目錄樹會放到網頁的最前面。
tree2.root.add("節點一")
tree2.root.add("節點二")
看，用這樣的方法建目錄樹多省事！！其實這些模板程序並不複雜，你可以研究一下這些程序然後DIY出屬於自己的模板，做出來別忘了跟我分享你的成果！
XIII. 目錄樹控件功能擴展:
目錄樹控件的功能到目前爲止已經相當完美，相信你在網上找不到比這功能更強大的目錄樹程序了，但是它的功能還是不止於此，我們可以根據需要擴充它的功能。alai_tree_check.js是目前提供的一個擴展程序，加載目錄樹程序後再加載alai_tree_check，目錄樹控件就會增加具有添加多選按扭checkbox的節點的功能。加載alai_tree_check後目錄樹將增加如下成員對象：
tree.addChkNode(toNode,text,ico,exeCategory,exeArg,checked) 方法添加具有checkbox的節點(參數用途可參考tree.add方法)
tree.colChkNode 屬性，保存具有checkbox的節點的集合數組
tree.oncheck 和 node.oncheck事件 點擊checkbox時觸發該事件
node.isCheck 屬性，用於判斷節點是否有checkbox
node.checkBox 屬性，節點的checkbox對象
下面結合另一具模板程序pretty的使用來說明該擴展程序的使用：
一、首先加載控件程序，模板程序和擴展程序到網頁（注意：擴展程序的加載一定要置後於控件程序），代碼：
<script src="alai_tree.js" language="JScript"></sript>
<script src="alai_tree_pretty.js" language="JScript"></sript>
<script src="alai_tree_check.js" language="JScript"></sript>
二、調用模板，添加節點：
var tree3=new alai_tree_pretty(divTree) //divTree是目錄樹放置的地方，如果缺省目錄樹會放到網頁的最前面。
tree3.root.add("節點一") //添加普通節點
tree3.addChkNode(tree3.root,"節點二") //添加有checkbox的節點