dhtmlXTree中文API

本文深入探讨了dhtmlXTree组件的基本构造、析构、继承、节点操作、事件处理等核心功能,并详细介绍了如何利用其丰富的API实现复杂的树形数据展示与交互,特别关注于节点状态、加载、选择、展开/收缩、图片配置、高亮显示等高级特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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)


补充说明:加载树时,必须确保所有节点的id不重复,否则控件会为重复id自动生成一个随机数(原id+"_"+当前日期)。
增加了一个dhtmlXTreeExtend.js对原类进行扩展,增加了getAllCheckedLeaf(),getAllUcCheckedLeaf()两个函数
修改了1个bug:
1 增加没有选中节点时执行展开/收缩选定节点时报没有parentId的bug
dhtmlXTreeObject.prototype.setSubChecked=function(itemId,state){
   if(itemId)
{
  var sNode=this._globalIdStorageFind(itemId);
  this._setSubChecked(state,sNode);
  this._correctCheckStates(sNode.parentObject);
}
}


1 增加了未传递itemId参数时默认从根节点展开
dhtmlXTreeObject.prototype.openAllItems=function(itemId)
   {
      if (itemId==window.undefined) itemId=this.rootId;
      var temp=this._globalIdStorageFind(itemId);
      if (!temp) return 0;
      this._xopenAll(temp);
   }

DHTML 指动态 HTML(Dynamic HTML)。   DHTML 不是由万维网联盟(W3C)规定的标准。   DHTML 是一种用来创建动态站点的技术组合物。   对大多数人来说,DHTML 意味着 HTML 4.0、样式表以及 JavaScript 的结合物。   W3C 曾讲过:“动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式表以及脚本的结合物的术语。”   通过 DHTML技术, 开发者可控制在浏览器窗口中显示和定位 HTML 元素。   通过 HTML 4.0,所有格式化(信息)可移出HTML文档,并写入一个独立的样式表中。因为 HTML 4.0 可以把文档的表现从其结构中分离,我们可以在不搞乱文档内容的情况下完全地控制表现层。   通过层叠样式表(CSS),我们得到了一种用于 HTML 文档的样式和布局模型。   由于 CSS 使开发者有能力同时控制多个网页的样式和布局,CSS 可以称作 Web 设计领域的一个突破。作为开发者,您可以为每个 HTML 元素定义样式,并把它应用到您希望的任意多的页面上。如果需要做一个全局的改变,只需简单地改变样式,Web 中所有的元素都会被自动地更新。   文档对象模型(DOM)   DOM 指文档对象模型。   HTML DOM 是针对 HTML 的文档对象模型。   HTML DOM 定义了针对 HTML 的一套标准的对象,以及访问和处理 HTML 对象的标准方法。   “W3C 文档对象模型(DOM)是一个中立于语言和平台的接口,它允许程序和脚本动态地访问和更新文档的内容、结构以及样式”。   JavaScript   使您有能力编写可控制所有 HTML 元素的代码。   在 Netscape 4.x 以及 Internet Explorer 4.x 的 DHTML 技术   Netscape 4.x 跨浏览器 DHTML Internet Explorer 4.x   JSS(JavaScript 样式表)(允许您控制不同的 HTML 元素如何显示)   Layers(允许您控制元素的定位和可见性)   CSS1   CSS2(允许您控制不同的 HTML 元素如何显示)   CSS Positioning (允许您控制元素的定位和可见性)   JavaScript   可视滤镜(允许您向文本和图形应用可视效果)   动态 CSS(允许您控制元素的定位和可见性)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值