Hopes

dhtmlxTree開發指導

專業版1.6下載地址(CSDN) 
http://download.csdn.net/source/1388340 
版本號:dhtmlxTree v.1.6 Professional edition build 71114

dhtmlXTree 指南與實例 
主要特性

多瀏覽器/多平臺支持 
全部由JavaScript控制 
動態加載 
XML支持 
大數據樹動態翻譯(智能XML解析) 
拖拽(同一個樹,不同的樹之間,不同的框架之間) 
帶多選框(CheckBox)的樹(兩態/三態) 
定制圖標(使用JavaScript或xml) 
內容菜單(與dhtmlxMenu集成) 
結點數據為用戶數據 
多行結點 
高穩定性 
支持Macromedia Cold Fusion 
支持Jsp 
支持ASP.NET

支持以下瀏覽器 
IE 5.5或更高版本 
Mac OS X Safari 
Mozilla 1.4 或更高版本 
FireFox 0.9 或更高版本 
Opera (Xml加載支持取決于瀏覽器版本)

使用dhtmlXTree進行開發 
在頁面初始化對象
<div id="treeBox" ); 
    tree.enableCheckBoxes(false); 
    tree.enableDragAndDrop(true); 
</script>
構造器有以下參數: 
加載樹的容器對象(應該在調用構造器之前被加載) 
樹的寬度 
樹的高度 
樹根的父結點的id(超級根)

指定樹的其他參數: 
setImagePath(url) - 設置樹所使用的圖片目錄地址 
enableCheckBoxes(mode) - 打開/關閉多選框(默認打開) 
enableDragAndDrop(mode) - 打開/關閉拖拽模式

設置事件處理 
1.5以上的版本支持一種新的設置事件的方式-使用attachEvent方法.設置一個事件處理方法需要知道事件的名字和所調用的方法.可用的事件名參考這里(以后會翻譯),在事件處理方法中,可以這樣引用樹對象:
<div id="treeBox" ,onNodeSelect)//set function object to call on node select 
    //see other available event handlers in API documentation 
    function onNodeSelect(nodeId){ 
        ... 
    } 
</script>

很多時候函數要從參數中獲取值.關于傳值得詳細信息請參考事件文檔(以后翻譯)

使用腳本增加結點
<script> 
    tree=new dhtmlXTreeObject('treeBox',"100%","100%",0); 
    ... 
    tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED"); 
    tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED"); 
</script>

第4-7的參數都是0(選擇后調用的方法,所使用的圖片)意味著都使用默認值
最后一個使用逗號分隔的參數可以是以下值(只能是大寫): 
SELECT - 插入后選擇此結點 
CALL - 在選擇時調用方法 
TOP - 在最上方插入此結點 
CHILD - 此結點有子結點 
CHECKED - 此結點的多選框被選中(如果有的話)

使用XML加載數據 
<script> 
    tree=new dhtmlXTreeObject('treeBox',"100%","100%",0); 
    tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml"); 
    tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml 
</script>

在調用時,被打開的結點id(就像url參數一樣)將會被增加到初始化XMLAutoLoading(url) 的URL地址上去 
調用loadXML(url)方法不會增加id到url地址上
調用無參的loadXML()將會使用XMLAutoLoading(url)所指定的url地址

XML語法: 
<?xml version='1.0' encoding='iso-8859-1'?> 
<tree id="0"> 
    <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes"> 
        <userdata >

PHP腳本需要在頁面頭添加以下代碼: 
<?php 
    if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) { 
        header("Content-type: application/xhtml+xml"); } else { 
        header("Content-type: text/xml"); 
    } 
    echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"); 
?>

<tree>結點是必須有的.指定加載數據的父結點.這個id參數指定了父結點id.加載根層需要在創建樹的時候指定id:new myObjTree(boxObject,width,height,0) 
<itrem>可以包含(為了一次加載多層結點)或者不包含子結點.并且可以包含<itemtext>標簽,可以為結點標簽(label)增加一些HTML (text屬性將會被忽略) 
<item id="123"> 
    <itemtext><![CDATA[<font color="red">Label</font>]]></itemtext> 
</item>

必要屬性有: 
text - 結點顯示的標簽 
id - 結點id

可選屬性有: 
tooltip - 鼠標放在結點上提示的信息
im0 - 沒有子結點的結點顯示的圖片(將會從setImagePath(url)方法指定的路徑去獲取圖片)
im1 - 包含子結點的結點展開時顯示的圖片 
im2 - 包含子結點的結點關閉時顯示的圖片
aCo1 - 沒有選中的結點的顏色 
sCol - 選中的結點的顏色 
select - 在加載時選擇此結點(可以為任意值) 
style - 結點文本風格 
open - 展開此結點(可以為任意值) 
call - 選擇時調用函數(可以為任意值) 
checked - 如果存在的話,選擇此結點的多選框(可以為任意值) 
child - 指定結點是否有子結點(1:有,0:無)
imheight - 圖標的高度 
imwidth - 圖標的寬度 
topoffset - 設置結點和上層結點間的偏移量 
radio - 如果非空 則此結點的子結點會有單選按鈕

直接在XML里面設置用戶數據可以使用<userdata>標簽,此標簽只有一個參數: 
name

和 value 去指定用戶數據值  

為結點定制圖標 
有兩種方法去定制結點圖標,這取決于增加結點的方式.注意:樹將會從setImagePath(url)方法指定的路徑去獲取結點圖片.
Javascript的方式:使用insertNewChild(...)或者insertNewNext(...)方法的參數指定
<script> 
    var im0 = "doc.gif";//icon to show if node contains no children 
    var im1 = "opened.gif";//if node contains children and opened 
    var im2 = "closed.gif";//if node contains children and closed 
    tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2); 
    tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif"); 
</script>

XML的方式.使用<item>標簽的屬性:
<?xml version='1.0' encoding='iso-8859-1'?> 
<tree id="0"> 
    <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif"> 
</tree>

im0 - 沒有子結點的結點顯示的圖片(將會從setImagePath(url)方法指定的路徑去獲取圖片)
im1 - 包含子結點的結點展開時顯示的圖片 
im2 - 包含子結點的結點關閉時顯示的圖片

構建動態樹
如果樹包含很大數量的結點(或者你只是不想浪費時間去加載隱藏的結點),按照需要去加載他們似乎是更好的選擇,而不是一次性的全部加載進來.因此我們使用XML動態加載樹.請參考"使用XML加載數據"或者查閱"Dynamical Loading in dhtmlxTree v.1.x"

操作結點
一些使用樹的方法來操作結點的例子:
<script> 
    tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0); 
    ... 
    var sID = tree.getSelectedItemId();//get id of selected node 
    tree.setLabel(sID,"New Label");//change label of selecte node 
    tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state) 
    tree.openItem(sID);//expand selected node 
    tree.closeItem(sID);//close selected node 
    tree.changeItemId(sID,100);//change id of selected node to 100 
    alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children 
</script>

序列化樹
序列化方法允許從xml表現形式(xml字符串)中獲取樹.不同程度的序列化會在生成的XML字符串的屬性上面反映出來
<script> 
    tree.setSerializationLevel(userDataFl,itemDetailsFl); 
    var myXmlStr = tree.serializeTree();

</script>

沒有參數的序列化- id,open,select,text,child 
參數userDataFl true - userdata 
參數itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open

Tooltips (鼠標放在結點上所提示的內容)
有三種方法去設置tooltip :
使用結點的label("text"item結點的text屬性)作為tooltip - enableAutoTooltips(mode) - 默認為false 
使用item結點的"tooltip"屬性作為tooltip(如果此屬性被設置了則默認使用此方法)
使用setItemText(itemId,newLabel,newTooltip) 方法

移動結點
編程式的移動可以使用以下方法:
向上/下/左移動:
tree.moveItem(nodeId,mode)

mode 可以是以下值:
"down" - 把結點移動到下方(不用再意層次關系)
"up" - 把結點移動到上方 
"left" - 把結點直接移動到上層位置

直接移動到指定位置(在樹內部) 
tree.moveItem(nodeId,mode,targetId)

mode 可以是以下值: 
"item_child" - 把結點移動到第三個參數子結點的位置作為子結點 
"item_sibling" -把結點移動到第三個參數兄弟結點的位置作為兄弟結點

targetId - 目標結點的Id   To move node into position (to another tree) 移動結點到指定位置(另一個樹) 
tree.moveItem(nodeId,mode,targetId,targetTree)

mode 的值參考以上兩個例子 targetId - 目標結點的Id(在targetTree里面的id). targetTree - 目標樹對象   剪切/粘貼的方式 另一種方式是使用doCut()和doPaste(id)函數-但是這種方法只能對選中的結點有效.程序員也可以從一個位置刪除一個結點然后再另外一個地方再創建一個(也是個辦法:-)).提供給用戶拖拽功能去移動結點  

結點計數器

可以顯示指定結點標簽(label)的結點子元素的數量.激活此方法使用以下代碼:
<script> 
    tree.setChildCalcMode(mode); 
</script>

mode 可以是以下值: 
"child" - 這層的所有子結點
"leafs" - 這層的所有沒有子結點的子結點 
"childrec" - 所有子結點 
"leafsrec" -沒有子結點的所有子結點 
"disabled" - 什么都沒有

其他相關方法: _getChildCounterValue(itemId) - 得到當前的記數值 setChildCalcHTML(before,after) - 包含計數器的html代碼 如果在動態加載中需要設定計數器的值,請在xml中使用child屬性

智能XML解析

智能XML解析的概念很簡單-整個樹結構是從客戶端加載的,但是只有應該被顯示的結點才會被展示出來.很有效的減少了加載時間和大數據量樹的性能.另外-與動態加載相反的是-腳本方法可以使用整個樹結構(比如搜索整個樹-而不是只有被顯示出來的)
用以下方法激活智能XML解析:
<script> 
    tree.enableSmartXMLParsing(true);//false to disable 
</script>

在樹被完全展開的時候只能XML解析不會產生作用

樹的多選框

dhtmlxTree支持兩態和三態樹.三態樹有三種狀態:選中/未選中/某些子結點被選中(不是全部)
用以下方法激活三態樹:
<script> 
    tree.enableThreeStateCheckboxes(true)//false to disable 
</script>

使用智能XML解析的話需要手工設置第三種狀態(checked="-1");
    <item checked="-1" ...> 
        <item checked="1" .../> 
        <item .../> 
    </item>

Checkboxes可以被禁用-disableCheckbox(id,state)
一些結點可以隱藏checkboxes - showItemCheckbox(id,state) (nocheckbox xml 屬性)
版本1.4以后 showItemCheckbox可以對整棵樹使用(第一個參數使用0或者null)

樹的單選框

dhtmlxTree支持但選按鈕 使用以下代碼對整棵樹進行設置
<script> 
    tree.enableRadiobuttons(true); 
</script>
對某些特定的結點使用單選按鈕(代替多選框)
<script> 
    tree.enableCheckboxes(true); 
    tree.enableRadiobuttons(nodeId,true); 
</script>

默認情況下單選按鈕是根據層次分組的,但是版本1.4以后可以對整棵樹進行設置:
tree.enableRadiobuttons(true)

Checkboxs相關的API和XML屬性也適用于radiobuttons(參考radiobuttons方法描述)

拖拽技術

拖拽有三種模式(使用setDragBehavior(mode)方法進行設置) 
當作子結點拖拽-"child" 
當作兄弟結點拖拽-"sibling"
復合模式(前兩種模式一起)- "complex" 每一種模式還有兩種子模式: 
1. 普通拖拽 
2. 復制拖拽 - tree.enableMercyDrag(1/0)

所有模式都可以在運行時改變  

事件處理

在處理結點放下之前的事件使用-attachEvent("onDrag",func)如果func沒有返回true,將會取消拖拽.將結點放下后會有另一個事件-onDrop-使用attachEvent("OnDrop",func)進行處理.兩種方法都會傳給func對象5個參數 
被拖拽結點的id 
目標結點的id 
前目標結點(如果拖拽的是兄弟結點) 
源樹對象
目標樹對象

兩個框架之間的拖拽

默認情況下框架間的拖拽是開啟的.只需要把下列代碼加在頁面上沒有樹的地方
<script src="codebase/dhtmlxcommon.js"></script> 
<script> 
    new dhtmlDragAndDropObject(); 
</script>

提高性能

如果生成DHTML樹的性能很低,有兩種途徑去改進大數據樹的性能:
1.Dynamical Loading(動態加載)
2.Smart XML Parsing(智能XML解析)
3.Distributed Parsing(分布式解析)
4.Smart Rendering(動態顯示)
另外確保你的樹組織的很好-把很多個結點放在同一層很不美觀并且降低性能,雖然分布式解析或者智能顯示可以解決這個問題

上下文菜單

在dhtmlxTree里面可以構建上下文菜單.菜單的上下文可以使用XML或者腳本進行設置.改變上下文菜單內容取決于樹結點開發人員可以實現函數隱藏/顯示同一個菜單的結點或者不同菜單的不同結點.下面的代碼激活上下文菜單
<script> 
//init menu 
        aMenu=new dhtmlXContextMenuObject('120',0,"../codebase/imgs/"); 
        aMenu.menu.loadXML("menu/_context.xml");                 
        aMenu.setContextMenuHandler(onMenuClick); 
         
//init tree 
        tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); 
        ... 
        tree.enableContextMenu(aMenu); //link context menu to tree 
function onMenuClick(id){ 
    alert("Menu item "+id+" was clicked"); 
}
HTTPS 兼容

為了兼容HTTPS,我們需要為上下文菜構造器增加兩個參數
Images URL 
Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https) 
<script> 
//init menu compatible with sHTML 
    aMenu=new dhtmlXContextMenuObject('120',0,"imgs/","empty.html"); 
    ... 
</script>
刷新結點

refreshItems(itemIdList,source) 僅刷新itemIdList里面的結點(不包含它們的子結點)
refreshItem(itemId) - 刷新itemId指定的子結點.自動加載會被激活

結點排序

專業版本中可以對結點進行排序(需要dhtmlxtree_sb.js)使用以下方式:根據標簽(label)文本(如果沒有定制比較描述符)
tree.sortTree(nodeId,order,all_levels);

nodeId - 開始排序層的父結點id(如果是超級根Id,排序整棵樹)
order - 排序方向:"升序"/"降序" 
all_levels - 如果為true,則所有子層都會被排序
    //define your comparator (in our case it compares second words in label) 
    function mySortFunc(idA,idB){ 
        a=(tree.getItemText(idA)).split(" ")[1]||""; 
        b=(tree.getItemText(idB)).split(" ")[1]||""; 
        return ((a>b)?1:-1); 
    } 
    tree = new ... 
    //attach your comparator to the tree 
    tree.setCustomSortFunction(mySortFunc);

比較函數有兩個結點id,使用樹對象和id返回一個比較結果.如果定制比較函數被指定.則tree.sortTree(...)方法使用此函數排序  

查找功能

dhtmlxTree的查找功能允許開發人員把注意力從匹配標簽(label)搜索碼中解脫出來,支持智能XML解析腳本語法
    tree.findItem(searchString); //find item next to current selection 
    tree.findItem(searchString,1,1)//find item previous to current selection 
    tree.findItem(searchString,0,1)//search from top

例子包含在專業版中-samples/treeExPro2.html

多行結點

允許在多行顯示樹結點.建議關掉避免影響外觀.開啟多行功能需要以下代碼:
    tree.enableTreeLines(false); 
    tree.enableMultiLineItems(true);

例子包含在專業版中-samples/treeExPro6.html

樹的圖標

設置圖標

有一種方法可以使用腳本設置圖標(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node): 
im0 - 沒有子結點的結點
im1 - 有子結點的關閉結點 
im2 - 有子結點的打開結點

設置圖標大小

有一種方法可以使用腳本或者xml為整棵樹或者每個結點設置圖標大小: XML設置每個結點的圖標大小(可選): 
<item ... imheight="Xpx" imwidth="Xpx"></item>

腳本語法: 
    tree.setIconSize(w,h);//set global icon size 
    tree.setIconSize(w,h,itemId)//set icon size for particular item

鍵盤導航

默認情況下dhtmlxTree沒有支持鍵盤功能,但是可以在頁面中增加dhtmlxtree_kn.js 文件去開啟鍵盤支持,只需要下面一條指令:
<script src="../codebase/ext/dhtmlxtree_kn.js"></script> 
<script> 
    tree.enableKeyboardNavigation(true); 
</script>

默認按鍵: 
Up arrow - 選擇上面的結點 
Down arrow - 選擇下面的結點 
Right arrow - 打開結點 
Left arrow - 關閉結點 
Enter - 調用結點方法

也可以指定自己的按鍵如下: 
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);

"up"/"down"/"open"/"close"/"call" 是可用的動作,數字是按鍵代碼  

分布式解析

另一種增加大數據樹(每層100-200個結點)性能的方法是分布式解析,這個是企業版才有的功能.最大的好處是可以在樹完全被解析之前看到樹的層次并準備使用.使用以下命令激活這個功能:
<script> 
    tree.enableDistributedParsing(mode,count,timeout); 
</script>

參數: 
mode - 必要參數- true/false - 開啟/關閉分布解析 
count - 可選參數- 分配結點的數量 
timeout - 可選參數- 兩部分結點之間延遲的毫秒數,這個功能完全和智能XML解析兼容

錯誤處理

一些dhtmlxTree異常可以被捕獲并且處理
function myErrorHandler(type, desc, erData){ 
    alert(erData[0].status) 
} 
dhtmlxError.catchError("ALL",myErrorHandler);

支持錯誤類型:
"All" 
"LoadXML"

處理函數參數: 
type - 字符串(如上) 
desc - 錯誤描述(硬編碼)
erData - 錯誤相關對象數組(如下).

Type Object(s) 
LoadXML [0] - response object

Cold Fusion 標簽 
<cf_dhtmlXTree 
    > 
        ...configuration xml... 
    </cf_dhtmlXTree>

name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated 
width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%) 
height - [optional] height of the tree 
JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default 
CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default 
iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default 
xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically 
checkboxes - [optional] show checkboxes (none, twoState, threeState) 
dragndrop - [optional] activate drag-&-drop (true,false) 
style - [optional] style for the tree box 
onSelect - [optional] javascript function to call on node selection 
oncheck - [optional] javascript function to call on node (un)checking 
onDrop - [optional] javascript function to call on node drop 
im1 - [optional] default image used for child nodes 
im2 - [optional] default image used for opened branches 
im3 - [optional] default image used for closed branches For description of optional configuration xml - see chapter "Loading data with XML"

Minimal possible tag syntax with on-page xml: 
<cf_dhtmlXTree> 
    <item text="Top node" id="t1" > 
        <item text="Child node 1" id="c1" ></item> 
        <item text="Child node 2" id="c2" ></item> 
    </item> 
</cf_dhtmlXTree>

Minimal possible tag syntax with server-side xml: 
<cf_dhtmlXTree xmldoc="tree.xml"> 
</cf_dhtmlXTree>

With images specified:   
<cf_dhtmlXTree   
    im1="book.gif" 
    im2="books_open.gif" 
    im3="books_close.gif"> 
    <item text="Mystery " id="mystery" open="yes" > 
        <item text="Lawrence Block" id="lb" > 
            <item text="All the Flowers Are Dying" id="lb_1" /> 
            <item text="The Burglar on the Prowl" id="lb_2" /> 
            <item text="The Plot Thickens" id="lb_3" /> 
            <item text="Grifters Game" id="lb_4" /> 
            <item text="The Burglar Who Thought He Was Bogart" id="lb_5" /> 
        </item> 
        <item text="Robert Crais" id="rc" > 
            <item text="The Forgotten Man" id="rc_1" /> 
            <item text="Stalking the Angel" id="rc_2" /> 
            <item text="Free Fall" id="rc_3" /> 
            <item text="Sunset Express" id="rc_4" /> 
            <item text="Hostage" id="rc_5" /> 
        </item> 
        <item text="Ian Rankin" id="ir" ></item> 
        <item text="James Patterson" id="jp" ></item> 
        <item text="Nancy Atherton" id="na" ></item> 
    </item> 
</cf_dhtmlXTree>

With Events Handlers,Checkboxes and Drag-n-drop: 
<cf_dhtmlXTree    
    dragndrop="true"   
    checkboxes="twoState" 
    onSelect="onClick" 
    onCheck="onCheck" 
    onDrop="onDrag"> 
        <item text="Mystery " id="mystery" open="yes" > 
            <item text="Lawrence Block" id="lb" > 
                <item text="All the Flowers Are Dying" id="lb_1" /> 
                <item text="The Burglar on the Prowl" id="lb_2" /> 
                <item text="The Plot Thickens" id="lb_3" /> 
                <item text="Grifters Game" id="lb_4" /> 
                <item text="The Burglar Who Thought He Was Bogart" id="lb_5" /> 
            </item> 
            <item text="Robert Crais" id="rc" > 
                <item text="The Forgotten Man" id="rc_1" /> 
                <item text="Stalking the Angel" id="rc_2" /> 
                <item text="Free Fall" id="rc_3" /> 
                <item text="Sunset Express" id="rc_4" /> 
                <item text="Hostage" id="rc_5" /> 
            </item> 
            <item text="Ian Rankin" id="ir" ></item> 
            <item text="James Patterson" id="jp" ></item> 
            <item text="Nancy Atherton" id="na" ></item> 
        </item> 
</cf_dhtmlXTree>

可編輯結點

1.3版本后dhtmlxTree專業版可以使用可編輯結點.只須在頁面中引用dhtmlxtree_ed.js 去開啟這個功能:
<script src="../codebase/ext/dhtmlxtree_ed.js"></script> 
<script> 
    tree.enableItemEditor(mode); 
</script>

參數如下: 
mode - 必要參數- true/false - 開啟/關閉可編輯結點
Event: 使用事件處理可以處理可編輯結點的不同階段的事件,可以使用attachEvent("onEdit",handlerFunc)來設置. 在編輯過程中有4個不同的階段:開始編輯前(可取消),編輯開始后,編輯結束前(可取消),編輯結束后 處理方法的4個參數如下: 
state - 0 開始編輯前, 1 編輯開始后, 2 編輯結束前, 3 編輯結束后 
id - 可編輯結點的id 
tree - 樹對象 
value - 只有2階段可以使用,編輯的值

同步與服務器更新

通常的樹操作-比如拖拽(包括不同樹間的),刪除結點,插入結點,更新結點標簽(label)-在1.3版本后可以使用數據處理模型(dataProcessor module)與服務器上的數據庫進行同步更新.主要特性如下:
更新/插入結點,使用黑體字,刪除結點-使用一條橫線穿過
可以定義數據處理模式(自動/手動).更新/刪除結點的數據發送到指定的服務器URL(我們叫它服務器處理器).服務器處理器應該可以返回普通的xml和自定的格式化格式(如下),讓樹知道服務器是否成功進行處理,所有存儲后的過程都會被自動處理
使用以下步驟開啟此功能: 
頁面中包含dhtmlxdataprocessor.js 
為樹創建數據處理(dataProcessor)對象
<script src="../codebase/dhtmlxdataprocessor.js"></script> 
<script> 
    ... 
    tree.init(); 
    myDataProcessor = new dataProcessor(serverProcessorURL); 
    myDataProcessor.init(treeObj); 
</script>

dataProcessor構造器參數如下: 
serverProcessorURL - 必要參數- 處理接收數據文件的Url地址.如果使用服務器端運行.那么就是"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree"
myDataProcessor.init方法的參數是: 
treeObj - 必要參數- 分配數據處理器(dataProcessor )的樹對象
如果不需要使用built-in服務器處理器(serverProcessor)而是使用自己的文件處理數據,需要知道以下幾點: 
所有數據從Get域中獲取
- tr_id - 結點ID - tr_order - 同層結點順序 - tr_pid - 父結點 - tr_text -結點文字(label) - 用戶數據塊和名字一起傳來 - !nativeeditor_status - 如果存在并且值是"inserted"則為插入操作,值為"deleted"為刪除操作,不存在或者值為"updated"是更新操作   
服務器處理器(serverProcessor )應該返回以下格式的XML數據:
    <data> 
        <action type='insert/delete/update' sid='incomming_node_ID' tid='outgoing_node_ID'/> 
    </data>

只有對于插入結點來說incomming_node_ID和outgoing_node_ID 是兩個不同的值.其他操作這兩個值時一樣的.對于統一服務器端運行時(PHP5/mySQLk可用)使用以下步驟: 
yourTree.loadXML(url) 使用 "dhtmlxDataProcessor/server_code/PHP/get.php?ctrl=tree" 為參數 
new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 為參數 
在dhtmlxDataProcessor/server_code/PHP/db.php 中配置連接 
在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相應列值

從HTML初始化

可以使用html List或者內聯XML來創建一個樹.無論哪種方法都要在放置在一個DIV元素里面,DIV元素當作樹的容器(XML應該包含XMP標簽-見下面代碼)任何樹以set或者enable開頭的方法可以當作DIV元素的屬性使用去設置樹的屬性.可以自動轉換或者調用腳本函數

自動轉換
在頁面中包含 dhtmlxtree_start.js 
把DIV元素的class屬性設置為dhtmlxTree

使用腳本方法轉換 
在頁面中包含 dhtmlxtree_start.js 
調用dhtmlXTreeFromHTML函數,把DIV元素的id當作第一個參數傳進去 
var myTree = dhtmlXTreeFromHTML('listBox');

使用html List初始化 
    <div 
        class="dhtmlxTree" 
        id="treeboxbox_tree" 
        setImagePath="../codebase/imgs/" 
         > 
         
        <ul> 
            <li>Root</li> 
            <ul> 
                <li>Child1 
                <ul> 
                    <li>Child 1-1</li> 
                </ul> 
                </li> 
                <li>Child2</li> 
                <li>Bold Italic </li> 
            </ul> 
            </li> 
        </ul> 
    </div>

使用內聯XML初始化 
關于dhtmlxTree XML結構的詳細內容清參照 Loading data with XML   
    <div id="treeboxbox_tree2" setImagePath="../codebase/imgs/" class="dhtmlxTree" > 
    <xmp> 
        <item text="Root" open="1" id="11"> 
            <item text="Child1" select="1" open="1" id="12"> 
                <item text="Child1-1" id="13"/> 
            </item> 
            <item text="Child2" id="14"/> 
            <item id="15" text="Text"/> 
        </item> 
    < /xmp> 
    </div>

Version/Edition: v1.4/Professional/Standard Required js file:dhtmlxtree_start.js

動態顯示(Smart Rendering)

如果樹的每層都有很大數量的結點(500或者更多),可以嘗試使用動態(Smart Rendering)顯示來增加性能.數據結構不需要做任何變化-只需要使用enableSmartRendering打開此功能.注意:此方法和分布解析和三態樹不兼容. Version/Edition: v1.5/Professional Required js file:dhtmlxtree_srnd.js

從JSON加載

從JSON加載樹需要有JSON對象或者文件,并且使用以下方法加載:
    tree.loadJSONObject(JSON_OBJECT);//for loading from script object 
    tree.loadJSON(FILE);//for loading from file 
兩個方法都有第二個可選參數-當數據被加載后執行的方法.JSON格式:結構類似樹的XML結構,標簽被翻譯成對象,屬性被翻譯成字段
    {id:0, 
        item:[ 
            {id:1,text:"first"}, 
            {id:2, text:"middle", 
                item:[ 
                    {id:"21", text:"child"} 
                ]}, 
            {id:3,text:"last"} 
        ]
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js

從CSV加載數據
需要使用CSV格式的字符串或者文件,使用以下方法加載:
tree.loadCSV(FILE);//for loading from file 
    tree.loadCSVString(CSVSTRING);//for loading from string

兩個方法都有第二個可選參數-當數據被加載后執行的方法.CSV格式:樹結點被三個值所表示-id,parent_id,text.比如:
    1,0,node 1 
    2,1,node 1.1 
    3,2,node 1.1.1 
    4,0,node 2

Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js

從JS數組加載

執行以下方法從javascript對象或者javascript文件加載:
    tree.loadJSArrayFile(FILE);//for loading from file 
    tree.loadJSArray(ARRAY);//for loading from array object

兩個方法都有第二個可選參數-當數據被加載后執行的方法.ARRAY格式:樹結點被三個值所組成的子數組所表示-id,parent_id,text.比如:
    var treeArray = new Array( 
    ["1","0","node 1"], 
    ["2","1","node 1.1"], 
    ["3","2","node 1.1.1"], 
    ["4","0","node 2"] 
    )

Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js