页面上初始化树

<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:错误的相关数组对象