頁面上初始化樹
<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>
構(gòu)造器的參數(shù)如下:
1.應(yīng)該將樹放置的位置,在調(diào)用構(gòu)造器之前應(yīng)當(dāng)為初始化
2.樹的寬度
3.樹的高度
4.標(biāo)明父節(jié)點(diǎn)到樹根節(jié)點(diǎn)的深度
特殊參數(shù):
1.setImagePath(url):指明了樹圖標(biāo)的路徑
2.enableCheckBoxes(mode):多選框是否有效,默認(rèn)顯示多選框
3.enableDragAndDrop(mode):是否允許拖放動(dòng)作
設(shè)置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>
大多數(shù)情況下制定event handlers的參數(shù)會(huì)得到一些值.關(guān)于被傳遞的變量細(xì)節(jié)部分請(qǐng)參考API documentation.
用Script加入節(jié)點(diǎn):
<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.參數(shù)0將會(huì)被傳遞給函數(shù)的參數(shù)4-7(調(diào)用select,image功能)的作用是使用他們的默認(rèn)值.
2.第8個(gè)參數(shù)使用','分割
3.SELECT:在插入后移動(dòng)光標(biāo)到該節(jié)點(diǎn)
4.TOP:在TOP位置加入節(jié)點(diǎn)
5:CHIld:節(jié)點(diǎn)為兒子
6.CHECKED:多選框被選中(如果存在的話)
從XML中引導(dǎo)數(shù)據(jù):
<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.被打開節(jié)點(diǎn)的ID將會(huì)被加入到initXMLAutoLoading(url)中去
2.當(dāng)被調(diào)用的時(shí)候沒有額外的ID加入到loadXML(url)中
3.當(dāng)調(diào)用沒有參數(shù)loadXML()時(shí),你將會(huì)使用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>節(jié)點(diǎn)是強(qiáng)制的,他表明引導(dǎo)數(shù)據(jù)塊的父親.按照ID參數(shù)指定他的父親.引導(dǎo)root的時(shí)候你需要指定tree對(duì)象:new myObjTree(boxObject,width,height,0)
<item>可以包含子元素(為了一次load更多),該標(biāo)簽的強(qiáng)制參數(shù)如下:
1.text:節(jié)點(diǎn)的名稱
2.id:節(jié)點(diǎn)的id
可選參數(shù)如下:
3tooltip:節(jié)點(diǎn)的提示
4im0:沒有兒子的節(jié)點(diǎn)圖片(節(jié)點(diǎn)依靠setImagePath(url)中指定的路徑來得到圖片)
5.im1:打開有兒子節(jié)點(diǎn)時(shí)的圖片
6.im2:關(guān)閉有兒子節(jié)點(diǎn)的圖片
7:acolor:沒有選擇元素的顏色
8:scolor:選擇元素后的顏色
9:select:在導(dǎo)入節(jié)點(diǎn)的時(shí)候選擇
10:open:將節(jié)點(diǎn)展開
11:call:調(diào)用函數(shù)在選擇節(jié)點(diǎn)的時(shí)候
12:checked:如果多選框存在的時(shí)候選擇
13:child:如果節(jié)點(diǎn)有兒子的時(shí)候?yàn)?否則為0
14:imheight:圖標(biāo)的高度
15:imwidth:圖標(biāo)的寬度
在xml中直接設(shè)定userdata<userdata>
他有一個(gè)參數(shù):name,value來指定他的值
給節(jié)點(diǎn)設(shè)定自定義圖標(biāo):
這里有兩種方法來給節(jié)點(diǎn)設(shè)定自定義圖標(biāo).它依賴欲你加元素的方式
注:依靠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>標(biāo)簽
<?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:沒有兒子的節(jié)點(diǎn)圖片
im1:打開節(jié)點(diǎn)的圖片
im2:關(guān)閉節(jié)點(diǎn)的圖片
構(gòu)建動(dòng)態(tài)的樹:
如果你的樹中包含大量的節(jié)點(diǎn)(或者你并不想花費(fèi)時(shí)間來導(dǎo)入隱藏的節(jié)點(diǎn)).那么會(huì)有更好一點(diǎn)的方法來導(dǎo)入節(jié)點(diǎn).針對(duì)這個(gè)效果我們使用xml創(chuàng)建動(dòng)態(tài)導(dǎo)入節(jié)點(diǎn)的深度.
察看章節(jié):"使用XML導(dǎo)入數(shù)據(jù)"
或者更多的細(xì)節(jié):在我的知識(shí)庫中的文章"在dhtmltree V.1.x動(dòng)態(tài)導(dǎo)入數(shù)據(jù)"
操作節(jié)點(diǎn):
在樹對(duì)象的方法中很少的操作樹節(jié)點(diǎn)的例子
<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表達(dá)式中得到樹.依靠反射直接序列化生成樹
<script>
tree.setSerializationLevel(userDataFl,itemDetailsFl);
var myXmlStr = tree.serializeTree();
</script>
1.沒有參數(shù):id,open,select,text,child
2.userDataFI true-userdata
3.itemDetailsFI true -im0,im1,im2,acolor,scolor,checked,open
Tooltips:
這里有三種方法來給節(jié)點(diǎn)設(shè)置tooltips:
1.使用node label(text屬性)作為tooltip-enableAutoTooltips(mode) -默認(rèn)為false
2.使用tooltip屬性
3.setItemText(itemId,newLabel,newTooltip)
移動(dòng)節(jié)點(diǎn):
依靠程序來移動(dòng)節(jié)點(diǎn)可以采用下列方法:
移動(dòng)upp/down/left
tree.moveItem(nodeId,mode)
1."down":向下移動(dòng)節(jié)點(diǎn)(不需要注意層次)
2."up":向上移動(dòng)節(jié)點(diǎn)
3:"left":向上一層移動(dòng)
直接移動(dòng)到某個(gè)位置:(在樹內(nèi))
tree.moveItem(nodeId,mode,targetId)
1."item_child":將節(jié)點(diǎn)置為第三個(gè)參數(shù)的子節(jié)點(diǎn)
2:"item_sibling":將節(jié)點(diǎn)置為第三個(gè)參數(shù)的兄弟姐妹
3.targetId:目標(biāo)節(jié)點(diǎn)的id
移動(dòng)節(jié)點(diǎn)到某個(gè)位置(另外一個(gè)樹)
tree.moveItem(nodeId,mode,targetId,targetTree)
targetId:目標(biāo)節(jié)點(diǎn)的id
targetTree:目標(biāo)樹
剪切/粘貼
使用doCut(),doPaste(id):但是只可以使用到選擇的item中
開發(fā)者可以在某個(gè)位置刪除節(jié)點(diǎn)然后在另外一個(gè)位置創(chuàng)建他
而用戶盡可能的使用拖放功能來移動(dòng)元素
節(jié)點(diǎn)計(jì)數(shù)器:
也有可能在節(jié)點(diǎn)的標(biāo)簽上顯示兒子的個(gè)數(shù),可以使用以下方法激活它:
<script>
tree.setChildCalcMode(mode);
</script>
可能的mode為:
1."child":在該深度所有的兒子
2."leafs":在該深度所有的葉子
3:"childrec":所有的兒子
4:"leafsrec":所有的葉子
5:"disabled":什么也沒有
其他相關(guān)的方法:
_getChildCounterValue(itemId) - 得到當(dāng)前計(jì)數(shù)器的值
setChildCalcHTML(before,after) - 改變計(jì)數(shù)器的值
當(dāng)你在動(dòng)態(tài)導(dǎo)入數(shù)據(jù)時(shí)如果你要使用計(jì)數(shù),請(qǐng)?jiān)趚ml中使用child屬性
smart xml解析:
smart xml解析很簡(jiǎn)單:在客戶端完整的樹結(jié)構(gòu)被導(dǎo)入,但是僅僅顯示被指定應(yīng)該顯示的.
這個(gè)將會(huì)減少導(dǎo)入時(shí)間和大樹的性能.與動(dòng)態(tài)導(dǎo)入相反,完整的樹結(jié)構(gòu)在大多數(shù)的script方法中是可行的.
例如對(duì)所有節(jié)點(diǎn)的搜索.激活smart xml parsing使用以下方法:
<script>
tree.enableSmartXMLParsing(true);//false to disable
</script>
smart xml parsing如果在數(shù)被完全展開的時(shí)候不會(huì)執(zhí)行.
多選框:
dhtmlxTree支持三種狀態(tài)的多選框.
三種狀態(tài)為:選擇/不選擇/一些子被選擇(不是全部),激活多選框使用以下方法:
<script>
tree.enableThreeStateCheckboxes(true)//false為失效
</script>
多選框失效:disableCheckbox(id,state)
一些節(jié)點(diǎn)可以隱藏checkboxes:showItemCheckbox(id,state)(nocheckbox xml屬性)
拖放技巧:
有三種拖放模式setDragBehavior(mode)
1.拖為兒子:"child"
2.拖為姐妹:"sibling"
3.混合模式(previous要激活):"complex"
加兩個(gè)模式:
1.公用的拖放多個(gè)
2.拷貝多個(gè):tree.enableMercyDrag(1/0)
事件處理:Event handlers
在進(jìn)行拖放多個(gè)前使用onDrug事件:setDragHandler(func)
如果func不能返回true,那么放將會(huì)被取消
當(dāng)放發(fā)生的時(shí)候會(huì)觸發(fā)另外一個(gè)事件onDrop:使用setDropHandler(func)
在所有的event handlers中會(huì)有5個(gè)參數(shù)傳給func對(duì)象
1.被拖的節(jié)點(diǎn)id
2.目標(biāo)節(jié)點(diǎn)的id
3.如果放為姐妹時(shí),前一個(gè)節(jié)點(diǎn)的id
4.被拖節(jié)點(diǎn)所屬樹
5.目標(biāo)節(jié)點(diǎn)所屬樹
在iframes中的拖放:
在iframes中的拖放多個(gè)默認(rèn)是可以的.
所有你需要額外做的就是在沒有樹存在的地方插入下列代碼
<script src="js/dhtmlXCommon.js"></script>
<script>
new dhtmlDragAndDropObject();
</script>
考慮到dhtml的性能低下問題,我們介紹兩種方式來提高性能
1.動(dòng)態(tài)導(dǎo)入
2.smart XML 解析
確認(rèn)你的樹有良好的組織.在同一個(gè)深度插入大量的元素會(huì)導(dǎo)致可見性的提升和性能的降低
菜單上下文:
這里是在dhtmltree中創(chuàng)建上下文菜單
菜單的內(nèi)容可以在XML/script中設(shè)定.
因?yàn)楦淖兩舷挛牡牟藛蝺?nèi)容依靠樹元素
所以開發(fā)者可以實(shí)現(xiàn)相同菜單或者不同元素使用不同菜單的隱藏/顯示
菜單上下文的開啟如下:
<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>
刷新節(jié)點(diǎn)
1.refreems(itemIdList,source)僅僅刷新節(jié)點(diǎn)列表(不包括他們的兒子)
2.refreem(itemId) ,刷新元素的兒子.在這里自動(dòng)導(dǎo)入將會(huì)被激活
節(jié)點(diǎn)排序:
你可以排序在dhtmlTree pro(必須使用dhtmlXTree_sb.js),使用以下方法:
tree.sortTree(nodeId,order,all_levels);
1.nodeId:開始排序的父節(jié)點(diǎn)(可以對(duì)整棵樹排序)
2.order:ASC/DES
3.all_levles:如果為true,則所有子都會(huì)執(zhí)行
自定義排序:
//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);
比較兩個(gè)節(jié)點(diǎn)IDs,如果自定義比較被指定,則sortTree(...)方法將會(huì)使用它
搜索功能:
dhtmlTree允許使用節(jié)點(diǎn)的lable來做查詢?nèi)蝿?wù)
也對(duì)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模式.推薦使用關(guān)閉lines
tree.enableTreeLines(false);
tree.enableMultiLineItems(true);
樹的Icon:
使用setItemImage,setItemImage2或者xml(im0,im1,im2 )
設(shè)定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中的錯(cuò)誤處理
function myErrorHandler(type, desc, erData){
alert(erData[0].status)
}
dhtmlxError.catchError("ALL",myErrorHandler);
支持錯(cuò)誤類型:
1."ALL"
2."LoadXML"
處理下列參數(shù)
type:string
desc:錯(cuò)誤描述
erData:錯(cuò)誤的相關(guān)數(shù)組對(duì)象