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 t