dhtmlXTree 指南与实例(二)
来源:互联网 发布:windows bash shell 编辑:程序博客网 时间:2024/06/03 15:05
比较函数有两个结点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