var im0 = "doc.gif";//icon to show if node contains no children
var im1 = "opened.gif";//if node contains children and opened
var im2 = "closed.gif";//if node contains children and closed
tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
构建动态树
如果树包含很大数量的结点(或者你只是不想浪费时间去加载隐藏的结点),按照需要去加载他们似乎是更好的选择,而不是一次性的全部加载进来.因此我们使用XML动态加载树.请参考"使用XML加载数据"或者查阅"Dynamical Loading in dhtmlxTree v.1.x"
操作结点
一些使用树的方法来操作结点的例子:
tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
...
var sID = tree.getSelectedItemId();//get id of selected node
tree.setLabel(sID,"New Label");//change label of selecte node
tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
tree.openItem(sID);//expand selected node
tree.closeItem(sID);//close selected node
tree.changeItemId(sID,100);//change id of selected node to 100
alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"../codebase/imgs/");
aMenu.menu.loadXML("menu/_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
//init tree
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
...
tree.enableContextMenu(aMenu); //link context menu to tree
function onMenuClick(id){
alert("Menu item "+id+" was clicked");
}
HTTPS 兼容
为了兼容HTTPS,我们需要为上下文菜构造器增加两个参数
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)
//init menu compatible with sHTML
aMenu=new dhtmlXContextMenuObject('120',0,"imgs/","empty.html");
...
刷新结点
专业版本中可以对结点进行排序(需要dhtmlxtree_sb.js)使用以下方式:根据标签(label)文本(如果没有定制比较描述符)
tree.sortTree(nodeId,order,all_levels);
nodeId - 开始排序层的父结点id(如果是超级根Id,排序整棵树)
order - 排序方向:"升序"/"降序"
all_levels - 如果为true,则所有子层都会被排序
//define your comparator (in our case it compares second words in label)
function mySortFunc(idA,idB){
a=(tree.getItemText(idA)).split(" ")[1]||"";
b=(tree.getItemText(idB)).split(" ")[1]||"";
return ((a>b)?1:-1);
}
tree = new ...
//attach your comparator to the tree
tree.setCustomSortFunction(mySortFunc);
比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序
查找功能
dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法
tree.findItem(searchString); //find item next to current selection
tree.findItem(searchString,1,1)//find item previous to current selection
tree.findItem(searchString,0,1)//search from top
例子包含在专业版中-samples/treeExPro2.html
默认按键:
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" 是可用的动作,数字是按键代码
一些dhtmlxTree异常可以被捕获并且处理
function myErrorHandler(type, desc, erData){
alert(erData[0].status)
}
dhtmlxError.catchError("ALL",myErrorHandler);
支持错误类型:
"All"
"LoadXML"
处理函数参数:
type - 字符串(如上)
desc - 错误描述(硬编码)
erData - 错误相关对象数组(如下).
Type Object(s)
LoadXML [0] - response object
Cold Fusion 标签
...configuration xml...
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: