dhtmlXTree属性配置

dhtmlXTree是一个功能比较强大的树控件,基本上能满足大部分常规需求,比较好用。
当然,在使用过程中还是发现一点点问题。下面是我整理的一些里面常用函数的说明(只有简单的说明,如果要看详细的说明,自己查看原函数去):

构造函数
dhtmlXTreeObject(htmlObject, width, height, rootId)//rootId 虚拟根节点,在界面上不会显示,一般取值0

replace IMG tag with background images - solve problem with IE image caching , not works for IE6 SP1
enableIEImageFix(mode)
析构函数
destructor()
实现继承
clone()
节点构造函数
dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode)// mode - do not show images
从xml字符串加载树
loadXMLString(xmlString,afterCall)//afterCall - function which will be called after xml loading
从xml文件加载树
loadXML(file,afterCall)
新建子节点,前三个参数为必须的
insertNewItem(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)
insertNewChild(parentId,itemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)

节点展开与收缩:[1-close 2-open]
_HideShow(itemObject,mode)
获取节点状态:0 - 没有子节点, -1 - 节点合拢, 1 - 节点展开
_getOpenState(node)
getOpenState(itemId)
获取选中的节点Id
getSelectedItemId()
选中节点
_selectItem(node,e)
获取节点的index
getIndexById(itemId)
设置鼠标右键点击事件
setOnRightClickHandler(func)
设置鼠标点击事件
setOnClickHandler(func)
设置节点状态改变事件
setOnSelectStateChange(func)
设置允许动态加载xml文件(异步加载)
setXMLAutoLoading(filePath)
设置checkbox点击事件
setOnCheckHandler(func)
设置节点展开/合拢事件
setOnOpenHandler(func)
设置节点开始展/合拢开事件
setOnOpenStartHandler(func)
设置节点展开/合拢结束事件
setOnOpenEndHandler(func)
设置节点双击事件
setOnDblClickHandler(func)
展开节点及下面所有子节点
_xopenAll(node)
//增加了不传递itemId的判断(1494)
openAllItems(itemId)//不传递itemId参数则合拢根节点
根据id获取节点
_globalIdStorageFind(itemId)
合拢节点及其下所有子节点
_xcloseAll(node)
//修改了原来逻辑的一个错误(1521)
closeAllItems(itemId)//不传递itemId参数则合拢根节点
为节点增加用户自定义的数据
//修正一个错误(1548)
setUserData(itemId,name,value)
获取用户自定义的数据
getUserData(itemId,name)
获取节点颜色
getItemColor(itemId)
设置节点颜色
setItemColor(itemId,defaultColor,selectedColor)
获取节点名称--(with HTML formatting, if any)
getItemText(itemId)
获取父节点id
getParentId(itemId)
更改节点id
changeItemId(itemId,newItemId)
标记被剪切的节点
doCut()
粘贴被剪切的节点到新的父节点下
doPaste(itemId)
清空被剪切的节点
clearCut()
移动节点
_moveNode(itemObject,targetObject)
允许三种状态的复选框(全选、不选、部分选中)
enableThreeStateCheckboxes(mode)// 1 - on, 0 - off;
设置鼠标悬浮事件
setOnMouseInHandler(func)
设置鼠标移走事件
setOnMouseOutHandler(func)
设置是否允许显示树图片
enableTreeImages=function(mode)//1 - on, 0 - off
设置是否允许固定模式(对于显示复选框的界面美观一些,但没有水平滚动条)
enableFixedMode(mode)// - 1 - on, 0 - off
是否显示复选框
enableCheckBoxes(mode, hidden)//mode 0/1 hidden 0/1
设置节点图片
setStdImages(image1,image2,image3)//a0 - image for node without childrens a1 - image for closed node a2 - image for opened node
设置是否显示树线
enableTreeLines(mode)
设置图片
setImageArrays(arrayName,image1,image2,image3,image4,image5)//image1 - line crossed image image2 - image with top line image3 - image with bottom line image4 - image without line image5 - single root image
展开当前节点(一节)
_openItem(node)
openItem(itemId)
合拢当前节点(一节)
closeItem(itemId)
获取节点的层节数
getLevel(itemId)
设置节点是否允许被合拢
setItemCloseable(itemId,flag)//flag 0/1
对于展开节点返回子节点数量,对于未加载子节点的节点(异步加载)返回true
hasChildren(itemId)
获取节点下的子节点数
_getLeafCount(itemNode)
设置节点名称
setItemText(itemId,newLabel,newTooltip)
获取节点tip
getItemTooltip(itemId)
刷新节点
refreshItem(itemId)
设置节点图片
setItemImage2(itemId, image1,image2,image3)//image1 - node without childrens image image2 - closed node image image3 - open node image
设置节点图片
setItemImage(itemId,image1,image2)//image1 - node without childrens image or closed node image (if image2 specified) image2 - open node image (optional)
获取节点下所有子节点id以逗号分割
getSubItems(itemId)
getAllSubItems(itemId)
获取节点的所有子节点
_getAllScraggyItems(node)
获取选中节点的名称--(with HTML formatting, if any)
getSelectedItemText()
设置节点的选中状态
setCheck(itemId,state)//state - checkbox state (0/1/unsure)
设置节点及所有子节点的选中状态
setSubChecked(itemId,state)
获取节点的选中状态 return: node state (0 - unchecked,1 - checked, 2 - third state)
isItemChecked(itemId)
删除节点的所有子节点
deleteChildItems(itemId)
删除节点
deleteItem(itemId,selectParent) //selectParent - If true parent of deleted item get selection, else no selected items leaving in tree.
在节点下创建一个节点,前三个参数是必须的
insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)
根据index获取节点下子节点的id
getChildItemIdByIndex(itemId,index)//itemId 节点id
设置拖动事件
setDragHandler(func)
设置是否允许拖拽
//mode - enabled/disabled [ can be true/false/temporary_disabled - last value mean that tree can be D-n-D can be switched to true later ]
//rmode - enabled/disabled drag and drop on super root
enableDragAndDrop(mode,rmode)
设置是否允许IE缓存
preventIECashing=function(mode)//mode - enable/disable random seed ( disabled by default )
设置是否允许选中节点名称高亮显示
enableHighlighting(mode)//mode - 1 - on, 0 - off
是否允许图片可点击和拖拽(clickable and dragable)
enableActiveImages(mode)// mode - 1 - on, 0 - off
设置节点获得焦点
focusItem(itemId)
获取所有无子节点的节点id
getAllChildless()
getAllLeafs()
获取所有有子节点的节点id
getAllItemsWithKids()
获取所有被选中节点id,不包括第三中状态的节点(部分选中的节点)
getAllChecked()
获取所有被选中节点id,包括第三中状态的节点(部分选中的节点)
getAllCheckedBranches()
获取节点下所有未选中的节点id,不传递itemId表示从根节点开始查找
getAllUnchecked(itemId)
获取所有部分选中的节点id(因部分子节点选中而被选中的节点)
getAllPartiallyChecked()
设置节点样式
setItemStyle(itemId,style_string)
设置是否允许拖拽图片
enableImageDrag(mode)
set function called when tree item draged over another item
setOnDragIn(func)
设置拖拽是是否允许自动滚动
enableDragAndDropScrolling(mode)


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dhtmlXTree进行一个小的扩展 需求1: 动态生成树形菜单,每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL。(框架页说明:左边是树形菜单;右边是显示页面相应信息的页面) 分析: dhtmlXTree提供了很好的添加,删除节点的方法,故选择dhtmlXTree。 但是dhtmlXTree不能满足"每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL"这点需求,因次想到了对dhtmlXTree进行一个小的扩展,即在其节点对象原有属性的基础上,再添加两个扩展属性。具体操作如下: 1、找到定义节点对象的那个函数(或方法) function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode) 修改为 function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode,url,target) 并在方法体中添加赋值语句:this.itemURL=url;this.itemTarget=target; 2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注:_parseXMLTree方法是与loadXML,loadXMLString相关的。 在这些方法中生成节点的语句中添加相应的参数和语句,以支持新添加的属性itemURL,itemTarget。 需求2: 为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单,空白区域单击时不会生成菜单。 分析: 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码: var menu = new dhtmlXMenuObject(); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone("treeboxbox_tree"); menu.addContextZone方法是为了把菜单添加到指定区域。 3、dhtmlXTreeObject.prototype._createItem方法是构造树形菜单上元素的具体实现方法。看这个方法的具体操作,可以发现它为每一个节点构建了一个table,节点的内容(即名字)放置在一个span中。 4、考虑到dhtmlxmenu实在指定的区域构建菜单,所以可以为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 难点和解决方案: 1、怎样获得dhtmlXTree树上的每一个节点对象所对应的区域?(dhtmlXTreeObject.prototype._createItem方法没有为这个节点的span设置id) 解决方法: 在dhtmlXTreeObject.prototype._createItem方法中添加一个为span设置id的语句: 即: 在itemObject.span=document.createElement('span'); itemObject.span.className="standartTreeRow"; 后,新添加一句 itemObject.span.id="treeNode_"+itemObject.id;//为这个span新增一个Id属性 2、为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 解决方法: a、为dhtmlXTree树上的每一个节点添加右键事件: tree.setOnRightClickHandler(treeOnRegihtClick);//右键事件 b、构建Menu菜单: var menu = new dhtmlXMenuObject(); function treeOnRegihtClick(id){ alert("右键 "+" span.id:"+tree.getItem(id).span.id); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone(tree.getItem(id).span.id);alert("width:"+tree.getItem(id).span.clientWidth); //var X=tree.getItem(id).span.getBoundingClientRect().left; //var Y=tree.getItem(id).span.getBoundingClientRect().top; var X=document.getElementById('mouseXPosition').value;//获得鼠标的横坐标位置 var Y=document.getElementById('mouseYPosition').value;//获得鼠标的纵坐标位置 menu.showContextMenu(X,Y);//调用showContextMenu方法显示菜单 说明:如果这儿不加上这条语句的话,第一次点击右键时只能生成菜单,但是显示不出菜单,下次点击右键Menu菜单才能弹出。 //menu._showContextMenu(X,Y,tree.getItem(id).span.id); } c、用 javascript 获取当页面上鼠标(光标)位置 <script type="text/javascript"> // 说明:获取鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('mouseXPosition').value = mousePos.x; document.getElementById('mouseYPosition').value = mousePos.y; } </script> 页面上放置两个隐藏域存放鼠标的位置:<input type="hidden" id=mouseXPosition><input type="hidden" id=mouseYPosition>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值