DHTMLX Tree中文开发指导(装载)
  DHTMLX Tree中文开发指导 收藏

最近开发项目使用到了dhtmlXtree做权限设置,看了网上相关的中文资料很少,就把官方的资料翻译了下,一共分2部分,API可以参考官方文档:http://dhtmlx.com/docs/download.shtml  

效果图如下(三态树):





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

可选属性