樹寫得不錯(cuò)，但是樹有二個(gè) bug.
第一：
獲得焦點(diǎn)問題，當(dāng)我們點(diǎn)擊樹節(jié)點(diǎn)時(shí)會(huì)獲得焦點(diǎn)，然后將這個(gè)焦點(diǎn)存儲(chǔ)到全局對(duì)象中。當(dāng)點(diǎn)擊另一個(gè)焦點(diǎn)時(shí)，它先判斷全局對(duì)象這個(gè)焦點(diǎn)是否存在，如果存在，則將焦點(diǎn)釋放，然后將點(diǎn)擊的焦點(diǎn)再次存儲(chǔ)到全局對(duì)象中。整個(gè)邏輯是對(duì)的，但是在IE下，有時(shí)候會(huì)出現(xiàn)多個(gè)焦點(diǎn)情況，可以肯定的說，這不是樹的 bug ，是 IE 對(duì)內(nèi)存對(duì)象管理的 bug.
第二：
<tree>
<tree text="Load "tree1.xml"" src="tree1.xml" />
<tree text="Loaded Item 1" action="http://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
</tree>
<tree text="Loaded Item 3 (with target)" action="http://www.google.com" target="_new" />
<tree text="Load "tree1.xml"">
<tree text="Load "tree1.xml"">
</tree>
</tree>
</tree>
2 tree.add(new WebFXTreeItem("Tree Item 1"));
3 tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
4 tree.add(new WebFXTreeItem("Tree Item 3"));
5 document.write(tree);
6
XML 格式:
2
3 <tree>
4 <tree text="Loaded Item 1" action="href://webfx.eae.net" />
5 <tree text="Loaded Item 2">
6 <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
7 <tree text="Load "tree1.xml"" src="tree1.xml" />
8 </tree>
9 <tree text="Loaded Item 3" />
10 </tree>
11
API
WebFXLoadTree
這個(gè)對(duì)象類型用來創(chuàng)建實(shí)際樹根，可用于填充樹與樹項(xiàng)目中從一個(gè)xml文件。該 WebFXLoadTree 繼承自WebFXTree， WebFXTree 提供了所有的屬性和方法。
Constructor(構(gòu)造)
new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
Name description
xText 文字標(biāo)簽樹根。
xXmlSrc XML文件加載的來源。
sAction 任擇，The action (uri) associated with the tree root.
sBehavior 默認(rèn)值設(shè)為：explorer 。
sIcon 任擇，此項(xiàng)目圖象，如果文件夾關(guān)閉，顯示此圖象。
sPenIcon 任擇，項(xiàng)目被打開時(shí)，顯示此圖象。
properties 屬性：
所有屬性來自 WebFXTree
name description
src XML文件的來源。注意，這是只讀的XML文件，是唯一有效的裝載前的第一個(gè)文件。
loading 只讀。布爾類型，如果是真，表示XML文件已經(jīng)開始裝載和尚未完成。
loaded 只讀，布爾類型，如果是真，表示XML文件已經(jīng)裝載完成。
errorText 只讀字符串。如果載入中顯示失敗的原因。如果沒有錯(cuò)誤，則返回空字符串。
WebFXLoadTreeItem
這個(gè)對(duì)象類型用來創(chuàng)建樹項(xiàng)目，可以添加到樹根，或其他樹木的項(xiàng)目創(chuàng)建子文件夾樹中。當(dāng)WebFXLoadTreeItem擴(kuò)大XML
文件被加載，然后用來填充項(xiàng)目與子項(xiàng)目。
該WebFXLoadTreeItem 繼承自WebFXTreeItem,WebFXTreeItem提供了所有可用的屬性和方法。
Constructor 構(gòu)造
new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
name description
sText 文字標(biāo)答樹項(xiàng)目。
sXmlSrc xml文件的消息來源。
sAction 任擇，The action (uri) associated with the tree item.
eParent 任擇，父級(jí)的 WebFXTreeItem 或 WebFXTree ，該項(xiàng)目可以增加。
sIcon 任擇，此項(xiàng)目圖象，文件夾關(guān)閉時(shí)，顯示此圖象。
sOpenIcon 任擇，此項(xiàng)目打開時(shí)，顯示本圖象。
properties
所有屬性來自 WebFXTreeItem
name description
src XML文件的消息來源。只讀的XML文件，是唯一有效的裝載前的第一個(gè)文件。
loading 只讀，布爾型，如果是真，表示XML文件已經(jīng)開始裝載并且尚未完成。
loaded 只讀，布爾型，如果是真，表示XML文件已經(jīng)裝載完成。
errorText 只讀字符串，用于顯示失敗的原因，如果沒有錯(cuò)誤，返回空字符串。
XML格式
唯一有效的組成部分，XML文件是tree項(xiàng)目，該 tree項(xiàng)目可以包含零，一個(gè)或多個(gè)tree項(xiàng)目。
Attributes（屬性）
有5個(gè)有效的屬性，你可以提供一個(gè)tree項(xiàng)目。
name description
text 必需的，文字標(biāo)簽樹項(xiàng)目。
xmlSrc 任擇，xml 文件的消息來源。
action 任擇，The action (uri) associated with the tree item.
icon 任擇，項(xiàng)目圖象，如果文件夾收盤時(shí)，顯示本圖象。
openIcon 任擇，用于項(xiàng)目打開時(shí)的圖象。僅公用于項(xiàng)目文件夾的 打開/擴(kuò)大。
DTD
XML文件的類型定義。
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED>
以下是一個(gè)tree.dtd.xml文件。
<?xml version="1.0"?>
<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
</tree>
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
文件： xtree.js
Usage(用法):
var tree = new WebFXTree('Root');
tree.add(new WebFXTreeItem('Tree Item 1'));
tree.add(new WebFXTreeItem('Tree Item 2'));
tree.add(new WebFXTreeItem('Tree Item 3'));
document.write(tree);
Folders(可折疊的):
var tree = new WebFXTree('Root');
/* Add tree item to tree */
tree.add(new WebFXTreeItem('1'));
/* Create a new folder and add it to tree */
var folder = new WebFXTreeItem('2')
tree.add(folder);
/* Add tree items to folder */
folder.add(new WebFXTreeItem('2.1'));
folder.add(new WebFXTreeItem('2.2'));
folder.add(new WebFXTreeItem('2.3'));
/* Add another tree item to tree */
tree.add(new WebFXTreeItem('3'));
document.write(tree);
Explorer behavior (管理瀏覽器)
var tree = new WebFXTree('Root');
/* Change the behavior of the tree */
tree.setBehavior('explorer');
/* Add tree item to tree */
tree.add(new WebFXTreeItem('1'));
/* Create a new folder and add it to tree */
var folder = new WebFXTreeItem('2')
tree.add(folder);
/* Add tree items to folder */
folder.add(new WebFXTreeItem('2.1'));
folder.add(new WebFXTreeItem('2.2'));
folder.add(new WebFXTreeItem('2.3'));
/* Add another tree item to tree */
tree.add(new WebFXTreeItem('3'));
document.write(tree);
Custom Icons(自定義圖標(biāo))：
var tree = new WebFXTree('Root');
tree.setBehavior('explorer');
tree.icon = 'http://webfx.eae.net/images/notepad.gif';
tree.add(new WebFXTreeItem('1'));
var folder = new WebFXTreeItem('2')
tree.add(folder);
var t21 = new WebFXTreeItem('2.1');
/* Change the icon */
t21.icon = webFXTreeConfig.fileIcon;
folder.add(t21);
var t22 = new WebFXTreeItem('2.2');
/* Change the icon */
t22.icon = webFXTreeConfig.fileIcon;
folder.add(t22);
var t23 = new WebFXTreeItem('2.3');
/* Change the icon */
t23.icon = webFXTreeConfig.fileIcon;
folder.add(t23);
tree.add(new WebFXTreeItem('3'));
document.write(tree);
xTree API
WebFXTreeAbstractNode
WebFXTree和WebFXTreeItem 的Abstract Object 、common function and methods 都是從這個(gè)
對(duì)象繼承來的。
Construtcto(構(gòu)造）
抽象對(duì)象，沒有實(shí)例應(yīng)該建立。
Properties( 屬性）
名字 類型 描述
id（編號(hào)) Number 只讀屬性，可以用來找相關(guān) HTMLElement。
如果您知道id HTMLElement，你可以在webFXTreeHandler.all中尋找
JS Object
text(文字) String The text lable for the node.
action(uri) String The action (uri) associated with the node.
open （打開） Boolean 只讀，布爾屬性，它告訴節(jié)點(diǎn)是張開(expanded) 或者
關(guān)閉(collapsed).(如果沒有子節(jié)點(diǎn)，將始終返回 false)
icon (圖標(biāo)) String Image File to use as icon,Uses default if not specified.
openIcon(打開圖標(biāo)) String Image File to use as the open icon(if child nodes only).
Uses default if not (指定)specified.
parentNode Reference(參考) A reference（提及） to the parent node.
childNodes Array Connection(收集) of references(提及) to all child nodes;
Methods (方法)
name Returns description
add(oNode, reference 增加了樹項(xiàng)目目前的項(xiàng)目。 這種方法有兩種說法，
[bNoIdent]) 一是WebFXTreeItem對(duì)象添加第二個(gè)是一個(gè)可選的布爾值，如果指定，并設(shè)置為true將防止樹從執(zhí)行Indent方
法自動(dòng)一旦節(jié)點(diǎn)已添加。此參數(shù)沒有影響調(diào)用Add方法之前，樹呈現(xiàn)，但此標(biāo)志設(shè)置增加節(jié)點(diǎn)時(shí)，
樹后，已變得將大大減少所需的時(shí)間來完成作業(yè)，這可能是非常有益的，同時(shí)增加了一個(gè)節(jié)點(diǎn)的時(shí)間，
但要求Indent方法是手動(dòng)執(zhí)行頂部最節(jié)點(diǎn)受影響的變化之后。歸來的參考補(bǔ)充節(jié)點(diǎn)。
indent() void (xtree1存在,xtree2不存在) Redraws the traces between nodes and makes sure the tree is properly layed out.
toggle() void 切換展開/拆疊
expand() void Expands the node
collapse() void Collapses the node
expandAll() void Expands the node and all its descendants
collapseAll() void Collapses the node and all its descendants
expandChildren() void Expands all the descendants of the node
collapseChildren() voie Collapse all the descendants of the node
getNextSibling() Reference Returns a reference to the next sibling.
（返回元素后緊跟的元素，如果無此節(jié)點(diǎn)，則屬性返回null）
getPreviousSibling()Reference Returns a reference to the previous sibling.
（返回節(jié)點(diǎn)之前緊跟的同級(jí)節(jié)點(diǎn))
toString String (stree1存在,stree2 不存在）
WebFXTree
該WebFXTree對(duì)象是用來創(chuàng)建實(shí)際樹根，可后來被填入樹項(xiàng)目。所有屬性和方法從WebFXTreeAbstractNode繼承。
Constructor
new WebFXTree([text], [action], [behavior])
name type description
text String 任擇，文字標(biāo)簽樹根。
action String 任擇，The action (uri) associated with the tree root.
behavior String 任擇, 名稱使用的方法，檢查 setBehavior() 方法的細(xì)節(jié)。
icon String 任擇， 圖像使用的圖標(biāo)。
openIcon String 任擇， 開放圖標(biāo)的圖橡。
properties
name type description
rendered Boolean 檢舉，指出任何或沒有樹已產(chǎn)生和提供。
Methods
name Returns description
getSelected() Reference 如果有的話，返回選擇對(duì)象的id
setBehavior(sBehavior) void 集行為的樹。描述的行為時(shí)，使用開放圖標(biāo)樹項(xiàng)目
getBehavior() String 返回behavtion （經(jīng)典或Explorer ）是目前描述打開的文件夾的描寫。
WebFXTreeItem
用于創(chuàng)建樹的項(xiàng)目，可以增加（uising 的 Add方法)的 WebTXTree 或另一個(gè)WebFXTreeItem 對(duì)象。所有屬性和方法從WebFXTreeAbstractNode繼承.
Constructor
new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])
name type description
text String 任擇，文字標(biāo)簽樹項(xiàng)目
action String 任擇,The action (uri) associated with the tree item.
parent Reference 任擇，父母樹項(xiàng)目。如果該項(xiàng)目提供然后將被作為一個(gè)孩子eParent
icon String 任擇。Image to use as the icon.
openIcon String 任擇. Image to use as the open icon.
method
name Returns description
getFirst() Reference 返回提到的第一個(gè)孩了節(jié)點(diǎn)，如果有的話。
getLast() Reference 如果有的話，返回提到的最后一個(gè)子節(jié)點(diǎn)。
由 于公司要求做一棵關(guān)于公司員工選擇的JS控件樹，以前我們一直使用的都是dTree,由于沒有采用AJAX,服務(wù)器在北京的話，使用起來超慢，于是上面要 求修改此樹，沒想到任務(wù)落到了我的頭上，沒辦法，硬著頭皮做吧。正在我想有什么辦法的時(shí)候，同事推介用用Xtree,于是我開始去學(xué)習(xí)這個(gè)東東，現(xiàn)在只能 是基本應(yīng)用，也想共享一下自己的學(xué)習(xí)必得。
1、下載：http://webfx.eae.net/dhtml/xtree2b/，里面包括了API，和DEMO,都是E文的，不過很容易看懂的。也可以直接在此網(wǎng)站點(diǎn)擊相關(guān)DEMO看效果，很不錯(cuò)的。
2、就是使用了：可以直接打開下載解壓后的文件中的相關(guān)DEMO看看效果。不過要注意，因?yàn)閄tree使用了AJAX,也使用到了XML，不知道什 么原因，在 IE里本地打開動(dòng)態(tài)加載的樹時(shí)會(huì)報(bào)JS錯(cuò)誤，也不能正常打開樹（通過服務(wù)器器不會(huì)出錯(cuò)），在FireFox中就能本地正常打開。
3、建立自己的樹：Xtree有兩種樹，一種是靜態(tài)樹，一種是動(dòng)態(tài)樹。也可以將這兩種樹綜合在一起使用。
大家要去參考一下網(wǎng)上的“分析xloadtree, 用ajax實(shí)現(xiàn)的動(dòng)態(tài)目錄樹 ”這篇文章，寫得不錯(cuò)。
（1）、靜態(tài)樹：
<html>
<head>
<title>測(cè)試樹</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/xtree2.css">
<script type="text/javascript" src="js/xtree2.js"></script>
</head>
<body>
<script type="text/javascript">
var tree = new WebFXTree("測(cè)試樹");//構(gòu)造一棵樹
for (var i = 0; i < 50; i++){
tree.add( new WebFXTreeItem("子結(jié)點(diǎn) " + i) );//加入結(jié)點(diǎn)
}
tree.write();//輸入樹
</script>
<body>
</html>
(2)、動(dòng)態(tài)樹
var tree = new WebFXLoadTree("Hello World", "tree.xml");//打開根結(jié)點(diǎn)時(shí)，即從tree.xml文件中得到子樹，也可是從服務(wù)器返回的XML流
tree.write();
（3）、兩種樹綜合(從XML文件中讀到子樹結(jié)點(diǎn))：
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
//從tree.xml文件中動(dòng)態(tài)加載子樹，此處的XML文件可以是從服務(wù)器方返回來的XML流，
//如:tree.add(new WebFXLoadTreeItem("從服務(wù)器返回", "tree.jsp"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 4"));
tree.write();
tree.jsp文件如下：
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8" %>
<%
response.setContentType("text/xml"); //這句必須要，只有設(shè)置了才是能XML流形式輸出到客戶端
out.println("<tree>");
out.println("<tree text=""Load tree.xml"" src=""
out.println("</tree>");
%>
4、tree.xml說明：
在動(dòng)態(tài)生成一棵樹時(shí)就會(huì)用到tree.xml文件，它是一個(gè)標(biāo)準(zhǔn)的XML文件。
它由一個(gè)外層的tree無屬性元素，再內(nèi)部包括多個(gè)子tree元素組成。
使用要注意的是：
如果要使用到中文或漢字的話，最好在文件開始處加入<?xml version="1.0" encoding="gb2312"?>否則會(huì)報(bào)亂碼的JS錯(cuò)誤。
另外就是XML文件中的特殊字符處理，這是使用這個(gè)很傷腦殼的地方，大家可以查考xtree所附帶的TREE.XML文件，講得很清楚。
<?xml version="1.0" encoding="gb2312"?>
<tree>
<tree text="Load "tree1.xml" (Should raise error)" src="tree1.xml" toolTip="Tool Tip"/>
<tree text="Load "tree2.xml" (Should raise error)" src="tree2.xml"
onerror="this.setText('Load "tree2.xml" (Raised error)')"/>
<tree text="Loaded Item 1" action="
<tree text="Loaded Item 2" expanded="true">
<tree text="Loaded Item 2.1" action="javascript:alert( tree.getSelected().getId() )" id="custom-id"/>
</tree>
<tree text="Loaded Item 3 (click to set src)" onaction="this.setSrc(this.getSrc() ? null : 'tree3.xml')"
onload="this.setText('Loaded Item 3 (changed onload)')"/>
<tree text="Load treeLARGE.xml" src="treeLARGE.xml" toolTip="XML file with 500 items"/>
<tree text="Deep nesting" src="nest.xml.pl" />
</tree>
其實(shí)xtree還提供了兩個(gè)JS文件：xtree2.js，xloadtree2.js，里面包括了xtree的工作原理和相關(guān)方法及屬性，
沒事大家可以去看看，對(duì)操作樹很有用處的，如：選擇/得到指定結(jié)點(diǎn)的信息，得到/修改結(jié)點(diǎn)的圖標(biāo)等等。
我在使用時(shí)由于TOMCAT設(shè)置成不允許客戶端緩存，感覺樹大了就有點(diǎn)點(diǎn)慢，所以建議大家使用時(shí)允許客戶端緩存，會(huì)快很多。