頁面上初始化樹

<div id="treeBox"
style="width:200;height:200"></div>

<script>

tree=new
dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);


tree.setImagePath("gfx/");

tree.enableCheckBoxes(false);

tree.enableDragAndDrop(true);

</script>

構造器的參數如下:

1.應該將樹放置的位置,在調用構造器之前應當為初始化

2.樹的寬度

3.樹的高度

4.標明父節點到樹根節點的深度

特殊參數:

1.setImagePath(url):指明了樹圖標的路徑

2.enableCheckBoxes(mode):多選框是否有效,默認顯示多選框

3.enableDragAndDrop(mode):是否允許拖放動作

設置Event
Handlers

<div id="treeBox"
style="width:200;height:200"></div>

<script>

tree=new
dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);


...

tree.setOnClickHandler(onNodeSelect);//set function object to call
on node select

//see other available event handlers in API documentation

function onNodeSelect(nodeId){

...

}

</script>

大多數情況下制定event
handlers的參數會得到一些值.關于被傳遞的變量細節部分請參考API
documentation.

用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>

1.參數0將會被傳遞給函數的參數4-7(調用select,image功能)的作用是使用他們的默認值.


2.第8個參數使用','分割

3.SELECT:在插入后移動光標到該節點

4.TOP:在TOP位置加入節點

5:CHIld:節點為兒子

6.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>

1.被打開節點的ID將會被加入到initXMLAutoLoading(url)中去

2.當被調用的時候沒有額外的ID加入到loadXML(url)中

3.當調用沒有參數loadXML()時,你將會使用initXMLAutoLoading(url)中的url


XML Syntax:

<?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 name="system">true</userdata>

<item text="Floppy (A:)" id="11" child="0" im0="flop.gif"
im1="flop.gif" im2="flop.gif"/>

<item text="Local Disk (C:)" id="12" child="0" im0="drv.gif"
im1="drv.gif" im2="drv.gif"/>

</item>

<item text="Recycle Bin" id="4" child="0" im0="recyc.gif"
im1="recyc.gif" im2="recyc.gif"/>

</tree>

在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參數指定他的父親.引導root的時候你需要指定tree對象:new
myObjTree(boxObject,width,height,0)

<item>可以包含子元素(為了一次load更多),該標簽的強制參數如下:


1.text:節點的名稱

2.id:節點的id

可選參數如下:

3tooltip:節點的提示

4im0:沒有兒子的節點圖片(節點依靠setImagePath(url)中指定的路徑來得到圖片)


5.im1:打開有兒子節點時的圖片

6.im2:關閉有兒子節點的圖片

7:acolor:沒有選擇元素的顏色

8:scolor:選擇元素后的顏色

9:select:在導入節點的時候選擇

10:open:將節點展開

11:call:調用函數在選擇節點的時候

12:checked:如果多選框存在的時候選擇

13:child:如果節點有兒子的時候為1否則為0

14:imheight:圖標的高度

15:imwidth:圖標的寬度

在xml中直接設定userdata<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:沒有兒子的節點圖片

im1:打開節點的圖片

im2:關閉節點的圖片

構建動態的樹:

如果你的樹中包含大量的節點(或者你并不想花費時間來導入隱藏的節點).那么會有更好一點的方法來導入節點.針對這個效果我們使用xml創建動態導入節點的深度.


察看章節:"使用XML導入數據"

或者更多的細節:在我的知識庫中的文章"在dhtmltree
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表達式中得到樹.依靠反射直接序列化生成樹

<script>

tree.setSerializationLevel(userDataFl,itemDetailsFl);

var myXmlStr = tree.serializeTree();

</script>

1.沒有參數:id,open,select,text,child

2.userDataFI true-userdata

3.itemDetailsFI true
-im0,im1,im2,acolor,scolor,checked,open

Tooltips:

這里有三種方法來給節點設置tooltips:

1.使用node label(text屬性)作為tooltip-enableAutoTooltips(mode)
-默認為false

2.使用tooltip屬性

3.setItemText(itemId,newLabel,newTooltip)

移動節點:

依靠程序來移動節點可以采用下列方法:

移動upp/down/left

tree.moveItem(nodeId,mode)

1."down":向下移動節點(不需要注意層次)

2."up":向上移動節點

3:"left":向上一層移動

直接移動到某個位置:(在樹內)


tree.moveItem(nodeId,mode,targetId)

1."item_child":將節點置為第三個參數的子節點

2:"item_sibling":將節點置為第三個參數的兄弟姐妹

3.targetId:目標節點的id

移動節點到某個位置(另外一個樹)


tree.moveItem(nodeId,mode,targetId,targetTree)

targetId:目標節點的id

targetTree:目標樹

剪切/粘貼

使用doCut(),doPaste(id):但是只可以使用到選擇的item中

開發者可以在某個位置刪除節點然后在另外一個位置創建他

而用戶盡可能的使用拖放功能來移動元素

節點計數器:

也有可能在節點的標簽上顯示兒子的個數,可以使用以下方法激活它:

<script>

tree.setChildCalcMode(mode);

</script>

可能的mode為:

1."child":在該深度所有的兒子

2."leafs":在該深度所有的葉子

3:"childrec":所有的兒子

4:"leafsrec":所有的葉子

5:"disabled":什么也沒有

其他相關的方法:

_getChildCounterValue(itemId) - 得到當前計數器的值

setChildCalcHTML(before,after) - 改變計數器的值

當你在動態導入數據時如果你要使用計數,請在xml中使用child屬性

smart
xml解析:

smart
xml解析很簡單:在客戶端完整的樹結構被導入,但是僅僅顯示被指定應該顯示的.


這個將會減少導入時間和大樹的性能.與動態導入相反,完整的樹結構在大多數的script方法中是可行的.


例如對所有節點的搜索.激活smart xml parsing使用以下方法:

<script>

tree.enableSmartXMLParsing(true);//false to disable

</script>

smart xml parsing如果在數被完全展開的時候不會執行.

多選框:

dhtmlxTree支持三種狀態的多選框.

三種狀態為:選擇/不選擇/一些子被選擇(不是全部),激活多選框使用以下方法:


<script>

tree.enableThreeStateCheckboxes(true)//false為失效

</script>

多選框失效:disableCheckbox(id,state)

一些節點可以隱藏checkboxes:showItemCheckbox(id,state)(nocheckbox
xml屬性)

拖放技巧:

有三種拖放模式setDragBehavior(mode)

1.拖為兒子:"child"

2.拖為姐妹:"sibling"

3.混合模式(previous要激活):"complex"

加兩個模式:

1.公用的拖放多個

2.拷貝多個:tree.enableMercyDrag(1/0)

事件處理:Event handlers

在進行拖放多個前使用onDrug事件:setDragHandler(func)

如果func不能返回true,那么放將會被取消

當放發生的時候會觸發另外一個事件onDrop:使用setDropHandler(func)


在所有的event handlers中會有5個參數傳給func對象

1.被拖的節點id

2.目標節點的id

3.如果放為姐妹時,前一個節點的id

4.被拖節點所屬樹

5.目標節點所屬樹

在iframes中的拖放:

在iframes中的拖放多個默認是可以的.

所有你需要額外做的就是在沒有樹存在的地方插入下列代碼

<script src="js/dhtmlXCommon.js"></script>

<script>

new dhtmlDragAndDropObject();

</script>

考慮到dhtml的性能低下問題,我們介紹兩種方式來提高性能


1.動態導入

2.smart XML 解析

確認你的樹有良好的組織.在同一個深度插入大量的元素會導致可見性的提升和性能的降低


菜單上下文:

這里是在dhtmltree中創建上下文菜單

菜單的內容可以在XML/script中設定.

因為改變上下文的菜單內容依靠樹元素

所以開發者可以實現相同菜單或者不同元素使用不同菜單的隱藏/顯示

菜單上下文的開啟如下:

<script>

//init menu

aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");

aMenu.menu.setGfxPath("../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");

}

</script>

刷新節點

1.refreems(itemIdList,source)僅僅刷新節點列表(不包括他們的兒子)


2.refreem(itemId) ,刷新元素的兒子.在這里自動導入將會被激活

節點排序:

你可以排序在dhtmlTree
pro(必須使用dhtmlXTree_sb.js),使用以下方法:

tree.sortTree(nodeId,order,all_levels);

1.nodeId:開始排序的父節點(可以對整棵樹排序)

2.order:ASC/DES

3.all_levles:如果為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);

比較兩個節點IDs,如果自定義比較被指定,則sortTree(...)方法將會使用它

搜索功能:

dhtmlTree允許使用節點的lable來做查詢任務

也對Smart 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

Multiline
樹元素

允許顯示在multiline模式.推薦使用關閉lines

tree.enableTreeLines(false);

tree.enableMultiLineItems(true);

樹的Icon:

使用setItemImage,setItemImage2或者xml(im0,im1,im2 )

設定ICON的大小:

<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

在dhtmlTree中的錯誤處理

function myErrorHandler(type, desc, erData){

alert(erData[0].status)

}

dhtmlxError.catchError("ALL",myErrorHandler);

支持錯誤類型:

1."ALL"

2."LoadXML"

處理下列參數

type:string

desc:錯誤描述

erData:錯誤的相關數組對象