dhtmlXTree 指南与实例
dhtmlXTree 指南与实例
　　主要特征
　　多浏览器/多平台支持
　　全部由JavaScript节制
　　动态加载
　　XML支持
　　大数据树动态翻译(智能XML解析)
　　拖拽(同1个树,差别的树之间,差别的框架之间)
　　带多选框(CheckBox)的树(两态/三态)
　　定制图标(使用JavaScript或xml)
　　内容菜单(与dhtmlxMenu集成)
　　结点数据为用户数据
　　多行结点
　　高不改变性别
　　支持Macromedia Cold Fusion
　　转自:http://blog.csdn.net/Colin_Bin/archellove/2008/10/29 /3166205.aspx
　　支持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方法.设置1个事务处理方法需要懂得事务的名字和所挪用的方法.可用的事务名参考这里(往后会翻译),在事务处理方法中,可以这样引用树对象:
　　<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.insertNewChellold(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(选择后挪用的方法,所使用的图片)意味着都使用默许值
　　最后1个使用逗号分开的参数可以是以下值(只能是大写):
　　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" chellold="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 - 如果存在的话,选择此结点的多选框(可以为任意值)
　　chellold - 指定结点是否有子结点(1:有,0:无)
　　imheight - 图标的高度
　　imwidth - 图标的宽度
　　topoffset - 设置结点和上层结点间的偏移量
　　radio - 如果非空 则此结点的子结点会有单选按钮
　　直接在XML里面设置用户数据可使用<userdata>标签,此标签只有1个