由
于公司要求做一棵關于公司員工選擇的JS控件樹，以前我們一直使用的都是dTree,由于沒有采用AJAX,服務器在北京的話，使用起來超慢，于是上面要
求修改此樹，沒想到任務落到了我的頭上，沒辦法，硬著頭皮做吧。正在我想有什么辦法的時候，同事推介用用Xtree,于是我開始去學習這個東東，現在只能
是基本應用，也想共享一下自己的學習必得。
1、下載：http://webfx.eae.net/dhtml/xtree2b/，里面包括了API，和DEMO,都是E文的，不過很容易看懂的。也可以直接在此網站點擊相關DEMO看效果，很不錯的。
2、就是使用了：可以直接打開下載解壓后的文件中的相關DEMO看看效果。不過要注意，因為Xtree使用了AJAX,也使用到了XML，不知道什
么原因，在 IE里本地打開動態加載的樹時會報JS錯誤，也不能正常打開樹（通過服務器器不會出錯），在FireFox中就能本地正常打開。
3、建立自己的樹：Xtree有兩種樹，一種是靜態樹，一種是動態樹。也可以將這兩種樹綜合在一起使用。
大家要去參考一下網上的“分析xloadtree, 用ajax實現的動態目錄樹 ”這篇文章，寫得不錯。
（1）、靜態樹：
<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("測試樹");//構造一棵樹
for (var i = 0; i < 50; i++){
tree.add( new WebFXTreeItem("子結點 " + i) );//加入結點
}
tree.write();//輸入樹
</script>
<body>
</html>
(2)、動態樹
var tree = new WebFXLoadTree("Hello World", "tree.xml");//打開根結點時，即從tree.xml文件中得到子樹，也可是從服務器返回的XML流
tree.write();
（3）、兩種樹綜合(從XML文件中讀到子樹結點)：
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
//從tree.xml文件中動態加載子樹，此處的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說明：
在動態生成一棵樹時就會用到tree.xml文件，它是一個標準的XML文件。
它由一個外層的tree無屬性元素，再內部包括多個子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的工作原理和相關方法及屬性，
沒事大家可以去看看，對操作樹很有用處的，如：選擇/得到指定結點的信息，得到/修改結點的圖標等等。
我在使用時由于TOMCAT設置成不允許客戶端緩存，感覺樹大了就有點點慢，所以建議大家使用時允許客戶端緩存，會快很多。