DHTMLX Tree中文开发指导

 专业版1.6下载地址(CSDN) 

 

最近开发项目使用到了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进行开发

1. 1. <div id="treeBox"  );
   2.     tree.enableCheckBoxes(false);
   3.     tree.enableDragAndDrop(true);
   4. </script>

• 加载树的容器对象(应该在调用构造器之前被加载)
• 树的宽度 
• 树的高度
• 树根的父结点的id(超级根)

指定树的其他参数:

• setImagePath(url) - 设置树所使用的图片目录地址
• enableCheckBoxes(mode) - 打开/关闭多选框(默认打开)
• enableDragAndDrop(mode) - 打开/关闭拖拽模式

设置事件处理

1. 1. <div id="treeBox"  ,onNodeSelect)//set function object to call on node select
   2.     //see other available event handlers in API documentation
   3.     function onNodeSelect(nodeId){
   4.         ...
   5.     }
   6. </script>

1. 1. <script>
   2.     tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
   3.     ...
   4.     tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
   5.     tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
   6. </script>

• 第4-7的参数都是0(选择后调用的方法,所使用的图片)意味着都使用默认值
• 最后一个使用逗号分隔的参数可以是以下值(只能是大写):
• SELECT - 插入后选择此结点
• CALL - 在选择时调用方法
• TOP - 在最上方插入此结点
• CHILD - 此结点有子结点
• CHECKED - 此结点的多选框被选中(如果有的话)

  
使用XML加载数据

1. 1. <script>
   2.     tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
   3.     tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
   4.     tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
   5. </script>

• 在调用时,被打开的结点id(就像url参数一样)将会被增加到初始化XMLAutoLoading(url) 的URL地址上去
• 调用loadXML(url)方法不会增加id到url地址上
• 调用无参的loadXML()将会使用XMLAutoLoading(url)所指定的url地址

XML语法:

1. 1. <?xml version='1.0' encoding='iso-8859-1'?>
   2. <tree id="0">
   3.     <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
   4.         <userdata >

PHP脚本需要在页面头添加以下代码:
<tree>结点是必须有的.指定加载数据的父结点.这个id参数指定了父结点id.加载根层需要在创建树的时候指定id:new myObjTree(boxObject,width,height,0) 
<itrem>可以包含(为了一次加载多层结点)或者不包含子结点.并且可以包含<itemtext>标签,可以为结点标签(label)增加一些HTML (text属性将会被忽略)

1. 1. <item id="123">
   2.     <itemtext><![CDATA[<font color="red">Label</font>]]></itemtext>
   3. </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 去指定用户数据值   
  
为结点定制图标

1. 1. <script>
   2.     var im0 = "doc.gif";//icon to show if node contains no children
   3.     var im1 = "opened.gif";//if node contains children and opened
   4.     var im2 = "closed.gif";//if node contains children and closed
   5.     tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
   6.     tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
   7. </script>

1. 1. <?xml version='1.0' encoding='iso-8859-1'?>
   2. <tree id="0">
   3.     <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
   4. </tree>

• im0 - 没有子结点的结点显示的图片(将会从setImagePath(url)方法指定的路径去获取图片)
• im1 - 包含子结点的结点展开时显示的图片
• im2 - 包含子结点的结点关闭时显示的图片

  
 

1. 1. <script>
   2.     tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
   3.     ...
   4.     var sID = tree.getSelectedItemId();//get id of selected node
   5.     tree.setLabel(sID,"New Label");//change label of selecte node
   6.     tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
   7.     tree.openItem(sID);//expand selected node
   8.     tree.closeItem(sID);//close selected node
   9.     tree.changeItemId(sID,100);//change id of selected node to 100
   10.     alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
   11. </script>

• 没有参数的序列化- id,open,select,text,child
• 参数userDataFl true - userdata
• 参数itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open

• 使用结点的label("text"item结点的text属性)作为tooltip - enableAutoTooltips(mode)  - 默认为false
• 使用item结点的"tooltip"属性作为tooltip(如果此属性被设置了则默认使用此方法)
• 使用setItemText(itemId,newLabel,newTooltip) 方法

1. 1. tree.moveItem(nodeId,mode) 

• "down" -  把结点移动到下方(不用再意层次关系)
• "up" - 把结点移动到上方
• "left" - 把结点直接移动到上层位置

直接移动到指定位置(在树内部)

1. 1. tree.moveItem(nodeId,mode,targetId) 

mode  可以是以下值:

• "item_child" - 把结点移动到第三个参数子结点的位置作为子结点
• "item_sibling" -把结点移动到第三个参数兄弟结点的位置作为兄弟结点

targetId  - 目标结点的Id   To move node into position (to another tree)  移动结点到指定位置(另一个树)

1. 1. tree.moveItem(nodeId,mode,targetId,targetTree) 

mode  的值参考以上两个例子  targetId  - 目标结点的Id(在targetTree里面的id).  targetTree  - 目标树对象   剪切/粘贴的方式 另一种方式是使用doCut()和doPaste(id)函数-但是这种方法只能对选中的结点有效.程序员也可以从一个位置删除一个结点然后再另外一个地方再创建一个(也是个办法:-)).提供给用户拖拽功能去移动结点   
  
结点计数器 
 

1. 1. <script>
   2.     tree.setChildCalcMode(mode);
   3. </script>

• "child" - 这层的所有子结点
• "leafs" - 这层的所有没有子结点的子结点
• "childrec" - 所有子结点
• "leafsrec" -没有子结点的所有子结点
• "disabled" - 什么都没有

其他相关方法: _getChildCounterValue(itemId) - 得到当前的记数值 setChildCalcHTML(before,after) - 包含计数器的html代码 如果在动态加载中需要设定计数器的值,请在xml中使用child属性  
 

1. 1. <script>
   2.     tree.enableSmartXMLParsing(true);//false to disable
   3. </script>

1. 1. <script>
   2.     tree.enableThreeStateCheckboxes(true)//false to disable
   3. </script>

1. 1.     <item checked="-1" ...>
   2.         <item checked="1" .../>
   3.         <item .../>
   4.     </item>

1. 1. <script>
   2.     tree.enableRadiobuttons(true);
   3. </script>

1. 1. <script>
   2.     tree.enableCheckboxes(true);
   3.     tree.enableRadiobuttons(nodeId,true);
   4. </script>

1. 1. tree.enableRadiobuttons(true)

• 当作子结点拖拽-"child"
• 当作兄弟结点拖拽-"sibling"
• 复合模式(前两种模式一起)- "complex" 每一种模式还有两种子模式:
• 1. 普通拖拽
• 2. 复制拖拽 - tree.enableMercyDrag(1/0)

所有模式都可以在运行时改变   
  
事件处理 
  
在处理结点放下之前的事件使用-attachEvent("onDrag",func)如果func没有返回true,将会取消拖拽.将结点放下后会有另一个事件-onDrop-使用attachEvent("OnDrop",func)进行处理.两种方法都会传给func对象5个参数

• 被拖拽结点的id
• 目标结点的id
• 前目标结点(如果拖拽的是兄弟结点)
• 源树对象
• 目标树对象

  
两个框架之间的拖拽 
 

1. 1. <script src="codebase/dhtmlxcommon.js"></script>
   2. <script>
   3.     new dhtmlDragAndDropObject();
   4. </script>

1. 1. <script>
   2. //init menu
   3.         aMenu=new dhtmlXContextMenuObject('120',0,"../codebase/imgs/");
   4.         aMenu.menu.loadXML("menu/_context.xml");                
   5.         aMenu.setContextMenuHandler(onMenuClick);
   6.         
   7. //init tree 
   8.         tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
   9.         ...
   10.         tree.enableContextMenu(aMenu); //link context menu to tree
   11. function onMenuClick(id){
   12.     alert("Menu item "+id+" was clicked");
   13. }

• Images URL
• Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https)

1. 1. <script>
   2. //init menu compatible with sHTML
   3.     aMenu=new dhtmlXContextMenuObject('120',0,"imgs/","empty.html");
   4.     ...
   5. </script>

• refreshItems(itemIdList,source) 仅刷新itemIdList里面的结点(不包含它们的子结点)
• refreshItem(itemId) - 刷新itemId指定的子结点.自动加载会被激活

  

1. 1. tree.sortTree(nodeId,order,all_levels);

• nodeId -  开始排序层的父结点id(如果是超级根Id,排序整棵树)
• order - 排序方向:"升序"/"降序"
• all_levels - 如果为true,则所有子层都会被排序

比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序   
 

1. 1.     tree.findItem(searchString); //find item next to current selection
   2.     tree.findItem(searchString,1,1)//find item previous to current selection
   3.     tree.findItem(searchString,0,1)//search from top

1. 1.     tree.enableTreeLines(false);
   2.     tree.enableMultiLineItems(true);

• im0 - 没有子结点的结点
• im1 - 有子结点的关闭结点
• im2 - 有子结点的打开结点

  
设置图标大小 
  
有一种方法可以使用脚本或者xml为整棵树或者每个结点设置图标大小: XML设置每个结点的图标大小(可选):

1. 1. <item ... imheight="Xpx" imwidth="Xpx"></item>

脚本语法:

1. 1.     tree.setIconSize(w,h);//set global icon size
   2.     tree.setIconSize(w,h,itemId)//set icon size for particular item

1. 1. <script  src="../codebase/ext/dhtmlxtree_kn.js"></script>
   2. <script>
   3.     tree.enableKeyboardNavigation(true);
   4. </script>

• Up arrow - 选择上面的结点
• Down arrow - 选择下面的结点
• Right arrow - 打开结点
• Left arrow - 关闭结点
• Enter - 调用结点方法

也可以指定自己的按键如下:

1. 1. tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);

"up"/"down"/"open"/"close"/"call" 是可用的动作,数字是按键代码   
 

1. 1. <script>
   2.     tree.enableDistributedParsing(mode,count,timeout);
   3. </script>

• mode - 必要参数- true/false - 开启/关闭分布解析
• count - 可选参数- 分配结点的数量
• timeout - 可选参数- 两部分结点之间延迟的毫秒数,这个功能完全和智能XML解析兼容

  

1. 1. function myErrorHandler(type, desc, erData){
   2.     alert(erData[0].status)
   3. }
   4. dhtmlxError.catchError("ALL",myErrorHandler);

• "All"
• "LoadXML"

处理函数参数:

• type - 字符串(如上)
• desc - 错误描述(硬编码)
• erData - 错误相关对象数组(如下).

Type	Object(s)
LoadXML	[0] - response object

  
  
  
Cold Fusion 标签

1. 1. <cf_dhtmlXTree
   2.     >
   3.         ...configuration xml...
   4.     </cf_dhtmlXTree>

• name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated
• width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)
• height - [optional] height of the tree
• JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default
• CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default
• iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default
• xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically
• checkboxes - [optional] show checkboxes (none, twoState, threeState)
• dragndrop - [optional] activate drag-&-drop (true,false)
• style - [optional] style for the tree box
• onSelect - [optional] javascript function to call on node selection
• oncheck - [optional] javascript function to call on node (un)checking
• onDrop - [optional] javascript function to call on node drop
• im1 - [optional] default image used for child nodes
• im2 - [optional] default image used for opened branches
• im3 - [optional] default image used for closed branches For description of optional configuration xml - see chapter  "Loading data with XML"

Minimal possible tag syntax with on-page xml:

1. 1. <cf_dhtmlXTree> 
   2.     <item text="Top node" id="t1" >
   3.         <item text="Child node 1" id="c1" ></item>
   4.         <item text="Child node 2" id="c2" ></item>
   5.     </item>
   6. </cf_dhtmlXTree>

Minimal possible tag syntax with server-side xml:
With images specified:  

1. 1. <cf_dhtmlXTree  
   2.     im1="book.gif" 
   3.     im2="books_open.gif" 
   4.     im3="books_close.gif">
   5.     <item text="Mystery " id="mystery"  open="yes" >
   6.         <item text="Lawrence Block" id="lb" >
   7.             <item text="All the Flowers Are Dying" id="lb_1" />
   8.             <item text="The Burglar on the Prowl" id="lb_2" />
   9.             <item text="The Plot Thickens" id="lb_3" />
   10.             <item text="Grifters Game" id="lb_4" />
   11.             <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
   12.         </item>
   13.         <item text="Robert Crais" id="rc" >
   14.             <item text="The Forgotten Man" id="rc_1" />
   15.             <item text="Stalking the Angel" id="rc_2" />
   16.             <item text="Free Fall" id="rc_3" />
   17.             <item text="Sunset Express" id="rc_4" />
   18.             <item text="Hostage" id="rc_5" />
   19.         </item>
   20.         <item text="Ian Rankin" id="ir" ></item>
   21.         <item text="James Patterson" id="jp" ></item>
   22.         <item text="Nancy Atherton" id="na" ></item>
   23.     </item>
   24. </cf_dhtmlXTree>

With Events Handlers,Checkboxes and Drag-n-drop:

1. 1. <cf_dhtmlXTree   
   2.     dragndrop="true"  
   3.     checkboxes="twoState" 
   4.     onSelect="onClick" 
   5.     onCheck="onCheck" 
   6.     onDrop="onDrag">
   7.         <item text="Mystery " id="mystery"  open="yes" >
   8.             <item text="Lawrence Block" id="lb" >
   9.                 <item text="All the Flowers Are Dying" id="lb_1" />
   10.                 <item text="The Burglar on the Prowl" id="lb_2" />
   11.                 <item text="The Plot Thickens" id="lb_3" />
   12.                 <item text="Grifters Game" id="lb_4" />
   13.                 <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
   14.             </item>
   15.             <item text="Robert Crais" id="rc" >
   16.                 <item text="The Forgotten Man" id="rc_1" />
   17.                 <item text="Stalking the Angel" id="rc_2" />
   18.                 <item text="Free Fall" id="rc_3" />
   19.                 <item text="Sunset Express" id="rc_4" />
   20.                 <item text="Hostage" id="rc_5" />
   21.             </item>
   22.             <item text="Ian Rankin" id="ir" ></item>
   23.             <item text="James Patterson" id="jp" ></item>
   24.             <item text="Nancy Atherton" id="na" ></item>
   25.         </item>
   26. </cf_dhtmlXTree>

可编辑结点 
 

1. 1. <script  src="../codebase/ext/dhtmlxtree_ed.js"></script>
   2. <script>
   3.     tree.enableItemEditor(mode);
   4. </script>

• mode - 必要参数- true/false - 开启/关闭可编辑结点
• Event: 使用事件处理可以处理可编辑结点的不同阶段的事件,可以使用attachEvent("onEdit",handlerFunc)来设置. 在编辑过程中有4个不同的阶段:开始编辑前(可取消),编辑开始后,编辑结束前(可取消),编辑结束后 处理方法的4个参数如下:
• state - 0 开始编辑前, 1 编辑开始后, 2 编辑结束前, 3 编辑结束后
• id - 可编辑结点的id
• tree - 树对象
• value -  只有2阶段可以使用,编辑的值

  
同步与服务器更新 
 

• 更新/插入结点,使用黑体字,删除结点-使用一条横线穿过
• 可以定义数据处理模式(自动/手动).更新/删除结点的数据发送到指定的服务器URL(我们叫它服务器处理器).服务器处理器应该可以返回普通的xml和自定的格式化格式(如下),让树知道服务器是否成功进行处理,所有存储后的过程都会被自动处理
•   使用以下步骤开启此功能:
• 页面中包含 dhtmlxdataprocessor.js
• 为树创建数据处理(dataProcessor)对象

1. 1. <script  src="../codebase/dhtmlxdataprocessor.js"></script>
   2. <script>
   3.     ...
   4.     tree.init();
   5.     myDataProcessor = new dataProcessor(serverProcessorURL);
   6.     myDataProcessor.init(treeObj);
   7. </script>

dataProcessor构造器参数如下:

• serverProcessorURL - 必要参数- 处理接收数据文件的Url地址.如果使用服务器端运行.那么就是"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree"
• myDataProcessor.init方法的参数是:
• treeObj - 必要参数- 分配数据处理器(dataProcessor )的树对象
• 如果不需要使用built-in服务器处理器(serverProcessor)而是使用自己的文件处理数据,需要知道以下几点:
• 所有数据从Get域中获取
• -  tr_id - 结点ID -  tr_order - 同层结点顺序 -  tr_pid - 父结点 -  tr_text -结点文字(label) - 用户数据块和名字一起传来 - !nativeeditor_status - 如果存在并且值是"inserted"则为插入操作,值为"deleted"为删除操作,不存在或者值为"updated"是更新操作  
• 服务器处理器(serverProcessor )应该返回以下格式的XML数据:

1. 1.     <data>
   2.         <action type='insert/delete/update' sid='incomming_node_ID' tid='outgoing_node_ID'/>
   3.     </data>

只有对于插入结点来说 incomming_node_ID 和 outgoing_node_ID  是两个不同的值.其他操作这两个值时一样的.对于统一服务器端运行时(PHP5/mySQLk可用)使用以下步骤:

• yourTree.loadXML(url) 使用 "dhtmlxDataProcessor/server_code/PHP/get.php?ctrl=tree" 为参数
• new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 为参数
• 在dhtmlxDataProcessor/server_code/PHP/db.php 中配置连接
• 在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相应列值

  
从HTML初始化 
 

• 在页面中包含 dhtmlxtree_start.js
• 把DIV元素的class属性设置为dhtmlxTree

  
使用脚本方法转换

• 在页面中包含 dhtmlxtree_start.js
• 调用dhtmlXTreeFromHTML函数,把DIV元素的id当作第一个参数传进去

使用html List初始化
使用内联XML初始化 
关于dhtmlxTree  XML结构的详细内容清参照 Loading data with XML  

1. 1.     <div id="treeboxbox_tree2" setImagePath="../codebase/imgs/" class="dhtmlxTree" >
   2.     <xmp>
   3.         <item text="Root" open="1" id="11">
   4.             <item text="Child1" select="1" open="1" id="12">
   5.                 <item text="Child1-1" id="13"/>
   6.             </item>
   7.             <item text="Child2" id="14"/>
   8.             <item id="15" text="Text"/>
   9.         </item>
   10.     < /xmp>
   11.     </div>

Version/Edition: v1.4/Professional/Standard Required js file:dhtmlxtree_start.js 
  
动态显示(Smart Rendering) 
  
如果树的每层都有很大数量的结点(500或者更多),可以尝试使用动态(Smart Rendering)显示来增加性能.数据结构不需要做任何变化-只需要使用 enableSmartRendering 打开此功能.注意:此方法和分布解析和三态树不兼容. Version/Edition: v1.5/Professional Required js file:dhtmlxtree_srnd.js

1. 1.     tree.loadJSONObject(JSON_OBJECT);//for loading from script object
   2.     tree.loadJSON(FILE);//for loading from file

1. 1.     {id:0, 
   2.         item:[
   3.             {id:1,text:"first"},
   4.             {id:2, text:"middle", 
   5.                 item:[
   6.                     {id:"21", text:"child"}
   7.                 ]},
   8.             {id:3,text:"last"}
   9.         ]

1. 1. tree.loadCSV(FILE);//for loading from file
   2.     tree.loadCSVString(CSVSTRING);//for loading from string

1. 1.     1,0,node 1
   2.     2,1,node 1.1
   3.     3,2,node 1.1.1
   4.     4,0,node 2

1. 1.     tree.loadJSArrayFile(FILE);//for loading from file
   2.     tree.loadJSArray(ARRAY);//for loading from array object

1. 1.     var treeArray = new Array(
   2.     ["1","0","node 1"],
   3.     ["2","1","node 1.1"],
   4.     ["3","2","node 1.1.1"],
   5.     ["4","0","node 2"]
   6.     )

 

 转自：http://blog.csdn.net/Colin_Bin/article/details/3166205