js 動態樹形控制項 xtree

xtree.js是web開發中運用較多的一個樹型控制項。其入門簡單，功能強大，很多人在它的基礎上開發出了自己的

樹型控制項。目前xtree好像是2.0版本，與1.0版本比較該版本的改動還是很大的。

(請發郵件到
allsaver@126.com 獲得翻強軟體。)

一般來講xtree有兩種使用模式

，顯示構造樹和運用xml資料來源。

   第一種方式指定資料來源和構造樹的過程是同時的。這也是大家經常採用的方式，過程如下：

   var tree = new WebFXTree('-test-');///樹的根節點顯示文字為：test
    tree.setBehavior('classic');/////設定樹的現用模式

   var child1 = new WebFXTreeItem('child1','',null,null,null,'Y',null,'value_of_this_node');/////

建立一個節點項

  xtree.js源碼中節點項的建構函式如下：

function WebFXTreeItem(sText, sAction, eParent, sIcon,

sOpenIcon,sRadio,sCheckBox,sValue,sChecked)/////其中sText指定節點顯示的值；sAction指定節點點擊時所

觸發的js函數，如：sAction="javascript:alert('0')"或sAction="javascript:function_A('param')"(你可以

自定以function_A函數)；eParent指定該節點的父節點，通常為空白，實際中經常用tree.add(child1)的方式來指

定父子關係；sIcon和sOpenIcon用以指定節點關閉和展開時的表徵圖；sRadio,sCheckBox分別指定節點前是否有

radio按鈕或是一個複選框；sValue指定該節點所代表的值，如當radio鈕選中，樹形控制項返回的值，這個功能經

常用在標註上；sChecked指定該節點的選中狀態。

該方式下，我們邊構建樹邊指定資料來源，使用簡單，但效率很低。特別是資料來源很多時，樹的顯示很慢。

  第二種方式運功用xml資料來源，動態載入樹，顯示的效率較高。實際中xml資料來源的片段如下：

 <?xml version="1.0"?>

<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>/////根節點對應WebFXLoadTree中指定的樹狀結構根節點，該根有三個直接子結點
 <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 &quot;tree1.xml&quot;" src="tree1.xml" />
</tree>

xtree的xml資料來源需遵循的dtd如下：<!ELEMENT tree (tree*)>
<!ATTLIST tree
   text  CDATA #REQUIRED  ////節點顯示名稱，必選
   src   CDATA #IMPLIED  /////節點對應的資料來源，可遞迴構造
   action  CDATA #IMPLIED/////節點點擊時所觸發的js動作
   icon  CDATA #IMPLIED////節點表徵圖
   openIcon CDATA #IMPLIED////展開時對應的表徵圖
   target  CDATA #IMPLIED>

頁面中使用該樹的代碼如下：var tree = new WebFXLoadTree("root", “<%=filename%>.xml");
                                                        tree.write();

此種方式使用xtree效率較高，具有動態載入節點的功能，節點之間的父子關係通過tree的嵌套來表示。但好像

不能構造諸如含有單選鈕或是複選框的節點。