DHTMLX Tree中文開發指導

最近開發項目使用到了dhtmlXtree作權限設置,看了網上相關的中文資料不多,就把官方的資料翻譯了下,一共分2部分,API能夠參考官方文檔:http://dhtmlx.com/docs/download.shtml  

效果圖以下(三態樹):

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