比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序
查找功能
dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法
例子包含在专业版中-samples/treeExPro2.html
多行结点
允许在多行显示树结点.建议关掉避免影响外观.开启多行功能需要以下代码:
例子包含在专业版中-samples/treeExPro6.html
树的图标
设置图标
有一种方法可以使用脚本设置图标(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node):
im0 - 没有子结点的结点
im1 - 有子结点的关闭结点
im2 - 有子结点的打开结点
设置图标大小
有一种方法可以使用脚本或者xml为整棵树或者每个结点设置图标大小: XML设置每个结点的图标大小(可选):
<item ... imheight="Xpx" imwidth="Xpx"></item>
脚本语法:
键盘导航
默认情况下dhtmlxTree没有支持键盘功能,但是可以在页面中增加dhtmlxtree_kn.js 文件去开启键盘支持,只需要下面一条指令:
<script src="../codebase/ext/dhtmlxtree_kn.js"></script>
<script>
</script>
默认按键:
Up arrow - 选择上面的结点
Down arrow - 选择下面的结点
Right arrow - 打开结点
Left arrow - 关闭结点
Enter - 调用结点方法
也可以指定自己的按键如下:
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);
"up"/"down"/"open"/"close"/"call" 是可用的动作,数字是按键代码
分布式解析
另一种增加大数据树(每层100-200个结点)性能的方法是分布式解析,这个是企业版才有的功能.最大的好处是可以在树完全被解析之前看到树的层次并准备使用.使用以下命令激活这个功能:
<script>
</script>
参数:
mode - 必要参数- true/false - 开启/关闭分布解析
count - 可选参数- 分配结点的数量
timeout - 可选参数- 两部分结点之间延迟的毫秒数,这个功能完全和智能XML解析兼容
错误处理
一些dhtmlxTree异常可以被捕获并且处理
function myErrorHandler(type, desc, erData){
}
dhtmlxError.catchError("ALL",myErrorHandler);
支持错误类型:
"All"
"LoadXML"
处理函数参数:
type - 字符串(如上)
desc - 错误描述(硬编码)
erData - 错误相关对象数组(如下).
Type Object(s)
LoadXML [0] - response object
Cold Fusion 标签
<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:
<cf_dhtmlXTree>
</cf_dhtmlXTree>
Minimal possible tag syntax with server-side xml:
<cf_dhtmlXTree xmldoc="tree.xml">
</cf_dhtmlXTree>
With images specified:
<cf_dhtmlXTree
</cf_dhtmlXTree>
With Events Handlers,Checkboxes and Drag-n-drop:
<cf_dhtmlXTree
</cf_dhtmlXTree>
可编辑结点
1.3版本后dhtmlxTree专业版可以使用可编辑结点.只须在页面中引用dhtmlxtree_ed.js 去开启这个功能:
<script src="../codebase/ext/dhtmlxtree_ed.js"></script>
<script>
</script>
参数如下:
mode - 必要参数- true/false - 开启/关闭可编辑结点
Event: 使用事件处理可以处理可编辑结点的不同阶段的事件,可以使用attachEvent("onEdit",handlerFunc)来设置. 在编辑过程中有4个不同的阶段:开始编辑前(可取消),编辑开始后,编辑结束前(可取消),编辑结束后 处理方法的4个参数如下:
state - 0 开始编辑前, 1 编辑开始后, 2 编辑结束前, 3 编辑结束后
id - 可编辑结点的id
tree - 树对象
value - 只有2阶段可以使用,编辑的值
同步与服务器更新
通常的树操作-比如拖拽(包括不同树间的),删除结点,插入结点,更新结点标签(label)-在1.3版本后可以使用数据处理模型(dataProcessor module)与服务器上的数据库进行同步更新.主要特性如下:
更新/插入结点,使用黑体字,删除结点-使用一条横线穿过
可以定义数据处理模式(自动/手动).更新/删除结点的数据发送到指定的服务器URL(我们叫它服务器处理器).服务器处理器应该可以返回普通的xml和自定的格式化格式(如下),让树知道服务器是否成功进行处理,所有存储后的过程都会被自动处理
使用以下步骤开启此功能:
页面中包含dhtmlxdataprocessor.js
为树创建数据处理(dataProcessor)对象
<script src="../codebase/dhtmlxdataprocessor.js"></script>
<script>
</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数据:
只有对于插入结点来说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初始化
可以使用html List或者内联XML来创建一个树.无论哪种方法都要在放置在一个DIV元素里面,DIV元素当作树的容器(XML应该包含XMP标签-见下面代码)任何树以set或者enable开头的方法可以当作DIV元素的属性使用去设置树的属性.可以自动转换或者调用脚本函数
自动转换
在页面中包含 dhtmlxtree_start.js
把DIV元素的class属性设置为dhtmlxTree
使用脚本方法转换
在页面中包含 dhtmlxtree_start.js
调用dhtmlXTreeFromHTML函数,把DIV元素的id当作第一个参数传进去
var myTree = dhtmlXTreeFromHTML('listBox');
使用html List初始化
使用内联XML初始化
关于dhtmlxTree XML结构的详细内容清参照 Loading data with XML
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
从JSON加载
从JSON加载树需要有JSON对象或者文件,并且使用以下方法加载:
两个方法都有第二个可选参数-当数据被加载后执行的方法.JSON格式:结构类似树的XML结构,标签被翻译成对象,属性被翻译成字段
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js
从CSV加载数据
需要使用CSV格式的字符串或者文件,使用以下方法加载:
tree.loadCSV(FILE);//for loading from file
两个方法都有第二个可选参数-当数据被加载后执行的方法.CSV格式:树结点被三个值所表示-id,parent_id,text.比如:
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js
从JS数组加载
执行以下方法从javascript对象或者javascript文件加载:
两个方法都有第二个可选参数-当数据被加载后执行的方法.ARRAY格式:树结点被三个值所组成的子数组所表示-id,parent_id,text.比如: