DHtmlXTree应用指南

DhtmlXTree 应用（基础篇） 第 1页/共 15页 DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree应用（基础篇） 2010/11/19 刘浪 目录 1概述.................................................................................................................................................................1 2设计一个可扩展的 DhtmlXTree工具...........................................................................................................1 2.1 我需要一个工具..................................................................................................................................1 2.2 我的想法是这样的..............................................................................................................................2 3依赖的 js库和 jar包...................................................................................................................................... 2 3.1 依赖的 js.............................................................................................................................................. 2 3.2 依赖的 jar包........................................................................................................................................2 4新建 DhtmlXTree 树.......................................................................................................................................2 4.1 新建一棵 DhtmlXTree树....................................................................................................................2 4.2 设置一些初始化参数.......................................................................................................................... 2 4.3 从 XML加载 DhtmlXTree树.............................................................................................................3 4.4 DhtmlXTree 常用 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 集合.................................................................................................................3 5应用 dom4j创建 XML文件..........................................................................................................................7 5.1DhtmlXTree 可加载的 XML文档的约束规则................................................................................... 7 5.2 使用 dom4j 生成 XML的 API........................................................................................................... 8 Element 元素 API...................................................................................................................................... 9 Attribute 属性 API..................................................................................................................................... 9 字符串转化..............................................................................................................................................10 5.3 组装一个 XML 文件......................................................................................................................... 10 6获取 DhtmlXTree 数据.................................................................................................................................14 DhtmlXTree 应用（基础篇） 第 2页/共 15页 1111概述 本文旨在通过设计一个可扩展的 DhtmlXTree工具，和大家一块学习创建 DhtmlXTree及获取数据的基 本方法步骤。首先我们给出一个需要设计一个可扩展的 DhtmlXTree 工具的需求，分析需求并设计出 概况。其次给大家展示完成这个功能需要依赖那些 js 和 jar。最后和大家共同揭开 DhtmlXTree的面纱， 了就其创建，数据加载，事件处理等基本实现方式。 2222设计一个可扩展的 DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree工具 2.12.12.12.1我需要一个工具我需要一个工具我需要一个工具我需要一个工具 在程序开发的过程中，我们时常需要用一棵树来展示相关的数据，但是这方面开发的工作量还是挺大 的（如果你不是很熟悉他的情况下），在这里我们需要一个可以动态加载数据，只需要少量的代码就 可以得到一个你想要的 DhtmlXTree 的工具（本文以后依获取 mocha_BPM 人员、组织、职务、群组 数据并生成对应的 DhtmlXTree）。 2.22.22.22.2我的想法是这样的我的想法是这样的我的想法是这样的我的想法是这样的 因为你想要尽可能少的代码就可以得到你想要的数据，所以你至少要给我一个参数：数据类型的标识， 你要使用我的工具，所以我得给你一个访问的 url，和你想要的数据。所以我设计它为你通过一个固 定的 url 地址打开一个模态窗口，根据你提供给我的数据类型的标识，我从后台获取到相应的数据并 使用 dom4j 生成一个 XML文档传递给该窗口展示不同数据类型的 DhtmlXTree，根据你的选择返回个 你一个由相关数据格式化得 javascript 的 string 类型。 所以你需要做的就是访问一个指定的 url，传递你想要的数据类型标识，取得返回值并格式化你想要 的数据。 3333依赖的 jsjsjsjs库和 jarjarjarjar包 3.13.13.13.1依赖的依赖的依赖的依赖的 jsjsjsjs dhtmlXCommon.js dhtmlXTree.js 3.23.23.23.2依赖的依赖的依赖的依赖的 jarjarjarjar包包包包 dom4j-1.6.1.jar DhtmlXTree 应用（基础篇） 第 3页/共 15页 4444新建 DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree树 4.14.14.14.1新建一棵新建一棵新建一棵新建一棵DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree树树树树 注：构造函数 dhtmlXTreeObject(htmlObject, width, height, rootId)//rootId 虚拟根节点，在界 面上不会显示，一般取值 0 4.24.24.24.2设置一些初始化参数设置一些初始化参数设置一些初始化参数设置一些初始化参数 //指明了树图标的路径 tree.setImagePath("<%=imgPath%>/tree/"); //设置url编码格式为utf-8 tree.setEscapingMode("utf8"); //是否显示复选框 tree.enableCheckBoxes(1); //允许三种状态的复选框（全选、不选、部分选中） tree.enableThreeStateCheckboxes(1); //设置tree的提示，提示 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 为item的text tree.enableAutoTooltips(1); 4.34.34.34.3从从从从 XMLXMLXMLXML加载加载加载加载DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree树树树树 从xml字符串加载树 loadXMLString(xmlString,afterCall)//afterCall - function which will be called after xml loading 从xml文件加载树 loadXML(file,afterCall) var s_loadURL = ‘<%basePath%>’ +'/jsp/common/BpmUtilAction.do?method=getXml'; tree.setXMLAutoLoading(s_loadURL); tree.loadXML(s_loadURL); DhtmlXTree 应用（基础篇） 第 4页/共 15页 4.44.44.44.4 DhtmlXTreeDhtmlXTreeDhtmlXTreeDhtmlXTree常用方法集合常用方法集合常用方法集合常用方法集合 ----------------------------------------------------------------------------获取数据方法---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 获取节点状态：0 - 没有子节点, -1 - 节点合拢, 1 - 节点展开 _getOpenState(node)_getOpenState(node)_getOpenState(node)_getOpenState(node) getOpenState(itemId)getOpenState(itemId)getOpenState(itemId)getOpenState(itemId) 获取选中的节点 Id getSelectedItemId()getSelectedItemId()getSelectedItemId()getSelectedItemId() 获取节点的 index getIndexById(itemId)getIndexById(itemId)getIndexById(itemId)getIndexById(itemId) 获取节点下的子节点数 _getLeafCount(itemNode)_getLeafCount(itemNode)_getLeafCount(itemNode)_getLeafCount(itemNode) 获取节点的层节数 getLevel(itemId)getLevel(itemId)getLevel(itemId)getLevel(itemId) 获取节点 tip getItemTooltip(itemId)getItemTooltip(itemId)getItemTooltip(itemId)getItemTooltip(itemId) 获取节点下所有子节点 id 以逗号分割 getSubItems(itemId)getSubItems(itemId)getSubItems(itemId)getSubItems(itemId) getAllSubItems(itemId)getAllSubItems(itemId)getAllSubItems(itemId)getAllSubItems(itemId) 获取节点的所有子节点 _getAllScraggyItems(node)_getAllScraggyItems(node)_getAllScraggyItems(node)_getAllScraggyItems(node) 获取选中节点的名称--(with HTML formatting, if any) getSelectedItemText()getSelectedItemText()getSelectedItemText()getSelectedItemText() 获取节点的选中状态 return: node state (0 - unchecked,1 - checked, 2 - third state) isItemChecked(itemId)isItemChecked(itemId)isItemChecked(itemId)isItemChecked(itemId) 根据 index 获取节点下子节点的 id getChildItemIdByIndex(itemId,index)getChildItemIdByIndex(itemId,index)getChildItemIdByIndex(itemId,index)getChildItemIdByIndex(itemId,index)//itemId 节点 id 获取所有无子节点的节点 id getAllChildless()getAllChildless()getAllChildless()getAllChildless() getAllLeafs()getAllLeafs()getAllLeafs()getAllLeafs() 获取所有有子节点的节点 id getAllItemsWithKidsgetAllItemsWithKidsgetAllItemsWithKidsgetAllItemsWithKids（） 获取所有被选中节点 id，不包括第三中状态的节点（部分选中的节点） getAllChecked()getAllChecked()getAllChecked()getAllChecked() 获取所有被选中节点 id，包括第三中状态的节点（部分选中的节点） getAllCheckedBranches()getAllCheckedBranches()getAllCheckedBranches()getAllCheckedBranches() 获取节点下所有未选中的节点 id，不传递 itemId 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 示从根节点开始查找 getAllUnchecked(itemId)getAllUnchecked(itemId)getAllUnchecked(itemId)getAllUnchecked(itemId) 获取所有部分选中的节点 id（因部分子节点选中而被选中的节点） getAllPartiallyChecked()getAllPartiallyChecked()getAllPartiallyChecked()getAllPartiallyChecked() 根据 id 获取节点 _globalIdStorageFind(itemId)_globalIdStorageFind(itemId)_globalIdStorageFind(itemId)_globalIdStorageFind(itemId) 获取用户自定义的数据 getUserData(itemId,name)getUserData(itemId,name)getUserData(itemId,name)getUserData(itemId,name) DhtmlXTree 应用（基础篇） 第 5页/共 15页 获取节点颜色 getItemColor(itemId)getItemColor(itemId)getItemColor(itemId)getItemColor(itemId) 获取节点名称--(with HTML formatting, if any) getItemText(itemId)getItemText(itemId)getItemText(itemId)getItemText(itemId) 获取父节点 id getParentId(itemId)getParentId(itemId)getParentId(itemId)getParentId(itemId) ----------------------------------------------------------------------------设置属性方法---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 允许三种状态的复选框（全选、不选、部分选中） enableThreeStateCheckboxes(mode)/enableThreeStateCheckboxes(mode)/enableThreeStateCheckboxes(mode)/enableThreeStateCheckboxes(mode)// 1 - on, 0 - off; 设置鼠标悬浮事件 setOnMouseInHandler(func)setOnMouseInHandler(func)setOnMouseInHandler(func)setOnMouseInHandler(func) 设置鼠标移走事件 setOnMouseOutHandler(func)setOnMouseOutHandler(func)setOnMouseOutHandler(func)setOnMouseOutHandler(func) 设置是否允许显示树图片 enableTreeImages=function(mode)enableTreeImages=function(mode)enableTreeImages=function(mode)enableTreeImages=function(mode)//1 - on, 0 - off 设置是否允许固定模式(对于显示复选框的界面美观一些，但没有水平滚动条) enableFixedMode(mode)enableFixedMode(mode)enableFixedMode(mode)enableFixedMode(mode)// - 1 - on, 0 - off 是否显示复选框 enableCheckBoxes(mode,enableCheckBoxes(mode,enableCheckBoxes(mode,enableCheckBoxes(mode, hidden)hidden)hidden)hidden)//mode 0/1 hidden 0/1 设置节点图片 setStdImages(image1,image2,image3)setStdImages(image1,image2,image3)setStdImages(image1,image2,image3)setStdImages(image1,image2,image3)//a0 - image for node without childrens a1 - image for closed node a2 - image for opened node 设置是否显示树线 enableTreeLines(mode)enableTreeLines(mode)enableTreeLines(mode)enableTreeLines(mode) 设置图片 setImageArrays(arrayName,image1,image2,image3,image4,image5)setImageArrays(arrayName,image1,image2,image3,image4,image5)setImageArrays(arrayName,image1,image2,image3,image4,image5)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 设置鼠标右键点击事件 setOnRightClickHandler(func)setOnRightClickHandler(func)setOnRightClickHandler(func)setOnRightClickHandler(func) 设置鼠标点击事件 setOnClickHandler(func)setOnClickHandler(func)setOnClickHandler(func)setOnClickHandler(func) 设置节点状态改变事件 setOnSelectStateChange(func)setOnSelectStateChange(func)setOnSelectStateChange(func)setOnSelectStateChange(func) 设置允许动态加载 xml 文件（异步加载） setXMLAutoLoading(filePath)setXMLAutoLoading(filePath)setXMLAutoLoading(filePath)setXMLAutoLoading(filePath) 设置 checkbox 点击事件 setOnCheckHandler(func)setOnCheckHandler(func)setOnCheckHandler(func)setOnCheckHandler(func) 设置节点展开/合拢事件 setOnOpenHandler(func)setOnOpenHandler(func)setOnOpenHandler(func)setOnOpenHandler(func) 设置节点开始展/合拢开事件 setOnOpenStartHandler(func)setOnOpenStartHandler(func)setOnOpenStartHandler(func)setOnOpenStartHandler(func) 设置节点展开/合拢结束事件 setOnOpenEndHandler(func)setOnOpenEndHandler(func)setOnOpenEndHandler(func)setOnOpenEndHandler(func) DhtmlXTree 应用（基础篇） 第 6页/共 15页 设置节点双击事件 setOnDblClickHandler(func)setOnDblClickHandler(func)setOnDblClickHandler(func)setOnDblClickHandler(func) 为节点增加用户自定义的数据 setUserData(itemId,name,value)setUserData(itemId,name,value)setUserData(itemId,name,value)setUserData(itemId,name,value) 设置节点颜色 setItemColor(itemId,defaultColor,selectedColor)setItemColor(itemId,defaultColor,selectedColor)setItemColor(itemId,defaultColor,selectedColor)setItemColor(itemId,defaultColor,selectedColor) 设置节点是否允许被合拢 setItemCloseable(itemId,flag)setItemCloseable(itemId,flag)setItemCloseable(itemId,flag)setItemCloseable(itemId,flag)//flag 0/1 设置节点名称 setItemText(itemId,newLabel,newTooltip)setItemText(itemId,newLabel,newTooltip)setItemText(itemId,newLabel,newTooltip)setItemText(itemId,newLabel,newTooltip) 设置节点图片 setItemImage2(itemId,setItemImage2(itemId,setItemImage2(itemId,setItemImage2(itemId, image1,image2,image3)image1,image2,image3)image1,image2,image3)image1,image2,image3)//image1 - node without childrens image image2 - closed node image image3 - open node image 设置节点图片 setItemImage(itemId,image1,image2)setItemImage(itemId,image1,image2)setItemImage(itemId,image1,image2)setItemImage(itemId,image1,image2)//image1 - node without childrens image or closed node image (if image2 specified) image2 - open node image (optional) 设置节点的选中状态 setCheck(itemId,state)/setCheck(itemId,state)/setCheck(itemId,state)/setCheck(itemId,state)//state - checkbox state (0/1/unsure) 设置节点及所有子节点的选中状态 setSubChecked(itemId,state)setSubChecked(itemId,state)setSubChecked(itemId,state)setSubChecked(itemId,state) 设置拖动事件 setDragHandler(func)setDragHandler(func)setDragHandler(func)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)enableDragAndDrop(mode,rmode)enableDragAndDrop(mode,rmode)enableDragAndDrop(mode,rmode) 设置是否允许 IE 缓存 preventIECashing=function(mode)/preventIECashing=function(mode)/preventIECashing=function(mode)/preventIECashing=function(mode)//mode - enable/disable random seed ( disabled by default ) 设置是否允许选中节点名称高亮显示 enableHighlighting(mode)enableHighlighting(mode)enableHighlighting(mode)enableHighlighting(mode)//mode - 1 - on, 0 - off 是否允许图片可点击和拖拽(clickable and dragable) enableActiveImages(mode)enableActiveImages(mode)enableActiveImages(mode)enableActiveImages(mode)// mode - 1 - on, 0 - off 设置节点获得焦点 focusItem(itemId)focusItem(itemId)focusItem(itemId)focusItem(itemId) 设置节点样式 setItemStyle(itemId,style_string)setItemStyle(itemId,style_string)setItemStyle(itemId,style_string)setItemStyle(itemId,style_string) 设置是否允许拖拽图片 enableImageDrag(mode)enableImageDrag(mode)enableImageDrag(mode)enableImageDrag(mode) 设置拖拽时触发的方法 setOnDragIn(func)setOnDragIn(func)setOnDragIn(func)setOnDragIn(func) 设置拖拽时是否允许自动滚动 enableDragAndDropScrolling(mode)enableDragAndDropScrolling(mode)enableDragAndDropScrolling(mode)enableDragAndDropScrolling(mode) ----------------------------------------------------------------------------其它方法---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- DhtmlXTree 应用（基础篇） 第 7页/共 15页 选中节点 _selectItem(node,e)_selectItem(node,e)_selectItem(node,e)_selectItem(node,e) 展开节点及下面所有子节点 _xopenAll(node)_xopenAll(node)_xopenAll(node)_xopenAll(node) //增加了不传递 itemId 的判断（1494） openAllItems(itemId)//不传递 itemId 参数则合拢根节点 合拢节点及其下所有子节点 _xcloseAll(node)_xcloseAll(node)_xcloseAll(node)_xcloseAll(node) closeAllItems(itemId)//不传递 itemId 参数则合拢根节点 更改节点 id changeItemId(itemId,newItemId)changeItemId(itemId,newItemId)changeItemId(itemId,newItemId)changeItemId(itemId,newItemId) 标记被剪切的节点 doCut()doCut()doCut()doCut() 粘贴被剪切的节点到新的父节点下 doPaste(itemId)doPaste(itemId)doPaste(itemId)doPaste(itemId) 清空被剪切的节点 clearCut()clearCut()clearCut()clearCut() 移动节点 _moveNode(itemObject,targetObject)_moveNode(itemObject,targetObject)_moveNode(itemObject,targetObject)_moveNode(itemObject,targetObject) 展开当前节点（一节） _openItem(node)_openItem(node)_openItem(node)_openItem(node) openItem(itemId)openItem(itemId)openItem(itemId)openItem(itemId) 合拢当前节点（一节） closeItem(itemId)closeItem(itemId)closeItem(itemId)closeItem(itemId) 对于展开节点返回子节点数量，对于未加载子节点的节点（异步加载）返回 true hasChildren(itemId)hasChildren(itemId)hasChildren(itemId)hasChildren(itemId) 刷新节点 refreshItem(itemId)refreshItem(itemId)refreshItem(itemId)refreshItem(itemId) 删除节点的所有子节点 deleteChildItems(itemId)deleteChildItems(itemId)deleteChildItems(itemId)deleteChildItems(itemId) 删除节点 deleteItem(itemId,selectParent)deleteItem(itemId,selectParent)deleteItem(itemId,selectParent)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)insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs)insertNewNext(itemId,newItemId,itemText,itemActionHandler,image1,image2,image3,optionStr,childs) 节点展开与收缩：[1-close 2-open] _HideShow(itemObject,mode)_HideShow(itemObject,mode)_HideShow(itemObject,mode)_HideShow(itemObject,mode) DhtmlXTree 应用（基础篇） 第 8页/共 15页 5555应用 dom4jdom4jdom4jdom4j创建 XMLXMLXMLXML文件 5.1DhtmlXTree5.1DhtmlXTree5.1DhtmlXTree5.1DhtmlXTree可加载的可加载的可加载的可加载的 XMLXMLXMLXML文档的约束规则文档的约束规则文档的约束规则文档的约束规则 XML 文件格式： d:/ 360Downloads e:/ f:/ g:/ 5.25.25.25.2使用使用使用使用 dom4jdom4jdom4jdom4j生成生成生成生成 XMLXMLXMLXML的的的的 APIAPIAPIAPI dom4j是一个 Java 的 XMLAPI，类似于 jdom，用来读写 XML文件的。dom4j 主要接口都在 org.dom4j 这个包里定义： AttributeAttributeAttributeAttribute AttributeAttributeAttributeAttribute定义了 XMLXMLXMLXML的属性 BranchBranchBranchBranch BranchBranchBranchBranch为能够包含子节点的节点如 XMLXMLXMLXML元素(Element)(Element)(Element)(Element)和文档(Docuemnts)(Docuemnts)(Docuemnts)(Docuemnts)定义 了一个公共的行为， CDATACDATACDATACDATA CDATACDATACDATACDATA 定义了 XMLXMLXMLXML CDATACDATACDATACDATA 区域 CharacterDataCharacterDataCharacterDataCharacterData CharacterDataCharacterDataCharacterDataCharacterData是一个标识借口，标识基于字符的节点。如 CDATACDATACDATACDATA，Comment,Comment,Comment,Comment, Text.Text.Text.Text. CommentCommentCommentComment CommentCommentCommentComment 定义了 XMLXMLXMLXML注释的行为 DocumentDocumentDocumentDocument 定义了 XMLXMLXMLXML文档 DocumentTypeDocumentTypeDocumentTypeDocumentType DocumentTypeDocumentTypeDocumentTypeDocumentType 定义 XMLXMLXMLXMLDOCTYPEDOCTYPEDOCTYPEDOCTYPE声明 ElementElementElementElement ElementElementElementElement定义 XMLXMLXMLXML 元素 DhtmlXTree 应用（基础篇） 第 9页/共 15页 ElementHandlerElementHandlerElementHandlerElementHandler ElementHandlerElementHandlerElementHandlerElementHandler定义了 ElementElementElementElement 对象的处理器 ElementPathElementPathElementPathElementPath 被 ElementHandlerElementHandlerElementHandlerElementHandler 使用，用于取得当前正在处理的路径层次信息 EntityEntityEntityEntity EntityEntityEntityEntity定义 XMLXMLXMLXML entityentityentityentity NodeNodeNodeNode NodeNodeNodeNode为所有的 dom4jdom4jdom4jdom4j中 XMLXMLXMLXML节点定义了多态行为 NodeFilterNodeFilterNodeFilterNodeFilter NodeFilterNodeFilterNodeFilterNodeFilter 定义了在 dom4jdom4jdom4jdom4j节点中产生的一个滤镜或谓词的行为（predicatepredicatepredicatepredicate） ProcessingInstructionProcessingInstructionProcessingInstructionProcessingInstruction ProcessingInstructionProcessingInstructionProcessingInstructionProcessingInstruction 定义 XMLXMLXMLXML 处理指令.... TextTextTextText TextTextTextText 定义 XMLXMLXMLXML 文本节点.... VisitorVisitorVisitorVisitor VisitorVisitorVisitorVisitor 用于实现 VisitorVisitorVisitorVisitor模式.... XPathXPathXPathXPath XPathXPathXPathXPath 在分析一个字符串后会提供一个 XPathXPathXPathXPath 表达式 看名字大致就知道它们的涵义如何了。要想弄懂这套接口，关键的是要明白接口的继承 关系： oooo interface java.lang.Cloneable oooo interface org.dom4j.Node ���� interface org.dom4j.Attribute ���� interface org.dom4j.Branch ���� interface org.dom4j.Document ���� interface org.dom4j.Element ���� interface org.dom4j.CharacterData ���� interface org.dom4j.CDATA ���� interface org.dom4j.Comment ���� interface org.dom4j.Text ���� interface org.dom4j.DocumentType ���� interface org.dom4j.Entity ���� interface