樹寫得不錯，但是樹有二個 bug.
第一：
獲得焦點問題，當我們點擊樹節(jié)點時會獲得焦點，然后將這個焦點存儲到全局對象中。當點擊另一個焦點時，它先判斷全局對象這個焦點是否存在，如果存在，則將焦點釋放，然后將點擊的焦點再次存儲到全局對象中。整個邏輯是對的，但是在IE下，有時候會出現(xiàn)多個焦點情況，可以肯定的說，這不是樹的 bug ，是 IE 對內(nèi)存對象管理的 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
這個對象類型用來創(chuàng)建實際樹根，可用于填充樹與樹項目中從一個xml文件。該 WebFXLoadTree 繼承自WebFXTree， WebFXTree 提供了所有的屬性和方法。
Constructor(構(gòu)造)
new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
Name description
xText 文字標簽樹根。
xXmlSrc XML文件加載的來源。
sAction 任擇，The action (uri) associated with the tree root.
sBehavior 默認值設為：explorer 。
sIcon 任擇，此項目圖象，如果文件夾關(guān)閉，顯示此圖象。
sPenIcon 任擇，項目被打開時，顯示此圖象。
properties 屬性：
所有屬性來自 WebFXTree
name description
src XML文件的來源。注意，這是只讀的XML文件，是唯一有效的裝載前的第一個文件。
loading 只讀。布爾類型，如果是真，表示XML文件已經(jīng)開始裝載和尚未完成。
loaded 只讀，布爾類型，如果是真，表示XML文件已經(jīng)裝載完成。
errorText 只讀字符串。如果載入中顯示失敗的原因。如果沒有錯誤，則返回空字符串。
WebFXLoadTreeItem
這個對象類型用來創(chuàng)建樹項目，可以添加到樹根，或其他樹木的項目創(chuàng)建子文件夾樹中。當WebFXLoadTreeItem擴大XML
文件被加載，然后用來填充項目與子項目。
該WebFXLoadTreeItem 繼承自WebFXTreeItem,WebFXTreeItem提供了所有可用的屬性和方法。
Constructor 構(gòu)造
new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
name description
sText 文字標答樹項目。
sXmlSrc xml文件的消息來源。
sAction 任擇，The action (uri) associated with the tree item.
eParent 任擇，父級的 WebFXTreeItem 或 WebFXTree ，該項目可以增加。
sIcon 任擇，此項目圖象，文件夾關(guān)閉時，顯示此圖象。
sOpenIcon 任擇，此項目打開時，顯示本圖象。
properties
所有屬性來自 WebFXTreeItem
name description
src XML文件的消息來源。只讀的XML文件，是唯一有效的裝載前的第一個文件。
loading 只讀，布爾型，如果是真，表示XML文件已經(jīng)開始裝載并且尚未完成。
loaded 只讀，布爾型，如果是真，表示XML文件已經(jīng)裝載完成。
errorText 只讀字符串，用于顯示失敗的原因，如果沒有錯誤，返回空字符串。
XML格式
唯一有效的組成部分，XML文件是tree項目，該 tree項目可以包含零，一個或多個tree項目。
Attributes（屬性）
有5個有效的屬性，你可以提供一個tree項目。
name description
text 必需的，文字標簽樹項目。
xmlSrc 任擇，xml 文件的消息來源。
action 任擇，The action (uri) associated with the tree item.
icon 任擇，項目圖象，如果文件夾收盤時，顯示本圖象。
openIcon 任擇，用于項目打開時的圖象。僅公用于項目文件夾的 打開/擴大。
DTD
XML文件的類型定義。
<!ELEMENT tree (tree*)>
<!ATTLIST tree
text CDATA #REQUIRED
src CDATA #IMPLIED
action CDATA #IMPLIED
icon CDATA #IMPLIED
openIcon CDATA #IMPLIED>
以下是一個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(自定義圖標)：
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 都是從這個
對象繼承來的。
Construtcto(構(gòu)造）
抽象對象，沒有實例應該建立。
Properties( 屬性）
名字 類型 描述
id（編號) 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é)點是張開(expanded) 或者
關(guān)閉(collapsed).(如果沒有子節(jié)點，將始終返回 false)
icon (圖標) String Image File to use as icon,Uses default if not specified.
openIcon(打開圖標) 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 增加了樹項目目前的項目。 這種方法有兩種說法，
[bNoIdent]) 一是WebFXTreeItem對象添加第二個是一個可選的布爾值，如果指定，并設置為true將防止樹從執(zhí)行Indent方
法自動一旦節(jié)點已添加。此參數(shù)沒有影響調(diào)用Add方法之前，樹呈現(xiàn)，但此標志設置增加節(jié)點時，
樹后，已變得將大大減少所需的時間來完成作業(yè)，這可能是非常有益的，同時增加了一個節(jié)點的時間，
但要求Indent方法是手動執(zhí)行頂部最節(jié)點受影響的變化之后。歸來的參考補充節(jié)點。
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é)點，則屬性返回null）
getPreviousSibling()Reference Returns a reference to the previous sibling.
（返回節(jié)點之前緊跟的同級節(jié)點)
toString String (stree1存在,stree2 不存在）
WebFXTree
該WebFXTree對象是用來創(chuàng)建實際樹根，可后來被填入樹項目。所有屬性和方法從WebFXTreeAbstractNode繼承。
Constructor
new WebFXTree([text], [action], [behavior])
name type description
text String 任擇，文字標簽樹根。
action String 任擇，The action (uri) associated with the tree root.
behavior String 任擇, 名稱使用的方法，檢查 setBehavior() 方法的細節(jié)。
icon String 任擇， 圖像使用的圖標。
openIcon String 任擇， 開放圖標的圖橡。
properties
name type description
rendered Boolean 檢舉，指出任何或沒有樹已產(chǎn)生和提供。
Methods
name Returns description
getSelected() Reference 如果有的話，返回選擇對象的id
setBehavior(sBehavior) void 集行為的樹。描述的行為時，使用開放圖標樹項目
getBehavior() String 返回behavtion （經(jīng)典或Explorer ）是目前描述打開的文件夾的描寫。
WebFXTreeItem
用于創(chuàng)建樹的項目，可以增加（uising 的 Add方法)的 WebTXTree 或另一個WebFXTreeItem 對象。所有屬性和方法從WebFXTreeAbstractNode繼承.
Constructor
new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])
name type description
text String 任擇，文字標簽樹項目
action String 任擇,The action (uri) associated with the tree item.
parent Reference 任擇，父母樹項目。如果該項目提供然后將被作為一個孩子eParent
icon String 任擇。Image to use as the icon.
openIcon String 任擇. Image to use as the open icon.
method
name Returns description
getFirst() Reference 返回提到的第一個孩了節(jié)點，如果有的話。
getLast() Reference 如果有的話，返回提到的最后一個子節(jié)點。
]]>
由 于公司要求做一棵關(guān)于公司員工選擇的JS控件樹，以前我們一直使用的都是dTree,由于沒有采用AJAX,服務器在北京的話，使用起來超慢，于是上面要 求修改此樹，沒想到任務落到了我的頭上，沒辦法，硬著頭皮做吧。正在我想有什么辦法的時候，同事推介用用Xtree,于是我開始去學習這個東東，現(xiàn)在只能 是基本應用，也想共享一下自己的學習必得。
1、下載：http://webfx.eae.net/dhtml/xtree2b/，里面包括了API，和DEMO,都是E文的，不過很容易看懂的。也可以直接在此網(wǎng)站點擊相關(guān)DEMO看效果，很不錯的。
2、就是使用了：可以直接打開下載解壓后的文件中的相關(guān)DEMO看看效果。不過要注意，因為Xtree使用了AJAX,也使用到了XML，不知道什 么原因，在 IE里本地打開動態(tài)加載的樹時會報JS錯誤，也不能正常打開樹（通過服務器器不會出錯），在FireFox中就能本地正常打開。
3、建立自己的樹：Xtree有兩種樹，一種是靜態(tài)樹，一種是動態(tài)樹。也可以將這兩種樹綜合在一起使用。
大家要去參考一下網(wǎng)上的“分析xloadtree, 用ajax實現(xiàn)的動態(tài)目錄樹 ”這篇文章，寫得不錯。
（1）、靜態(tài)樹：
<html>
<head>
<title>測試樹</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("測試樹");//構(gòu)造一棵樹
for (var i = 0; i < 50; i++){
tree.add( new WebFXTreeItem("子結(jié)點 " + i) );//加入結(jié)點
}
tree.write();//輸入樹
</script>
<body>
</html>
(2)、動態(tài)樹
var tree = new WebFXLoadTree("Hello World", "tree.xml");//打開根結(jié)點時，即從tree.xml文件中得到子樹，也可是從服務器返回的XML流
tree.write();
（3）、兩種樹綜合(從XML文件中讀到子樹結(jié)點)：
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
//從tree.xml文件中動態(tài)加載子樹，此處的XML文件可以是從服務器方返回來的XML流，
//如:tree.add(new WebFXLoadTreeItem("從服務器返回", "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"); //這句必須要，只有設置了才是能XML流形式輸出到客戶端
out.println("<tree>");
out.println("<tree text=""Load tree.xml"" src=""
out.println("</tree>");
%>
4、tree.xml說明：
在動態(tài)生成一棵樹時就會用到tree.xml文件，它是一個標準的XML文件。
它由一個外層的tree無屬性元素，再內(nèi)部包括多個子tree元素組成。
使用要注意的是：
如果要使用到中文或漢字的話，最好在文件開始處加入<?xml version="1.0" encoding="gb2312"?>否則會報亂碼的JS錯誤。
另外就是XML文件中的特殊字符處理，這是使用這個很傷腦殼的地方，大家可以查考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>
其實xtree還提供了兩個JS文件：xtree2.js，xloadtree2.js，里面包括了xtree的工作原理和相關(guān)方法及屬性，
沒事大家可以去看看，對操作樹很有用處的，如：選擇/得到指定結(jié)點的信息，得到/修改結(jié)點的圖標等等。
我在使用時由于TOMCAT設置成不允許客戶端緩存，感覺樹大了就有點點慢，所以建議大家使用時允許客戶端緩存，會快很多。
]]>