logo资料库

dhx_tree 中文说明.doc

发布时间：2022-07-02 发布人：admin 分类：说明书 资料大小：0.08M 资料格式：doc 举报 版权申诉
第1页 / 共20页
第2页 / 共20页
第3页 / 共20页
第4页 / 共20页
第5页 / 共20页
第6页 / 共20页
第7页 / 共20页
第8页 / 共20页
资料共20页，剩余部分请下载后查看
    DHTMLX Tree 中文开发指导（转载） 浮石 收录于 2010-03-10 阅读数： 公众公开 原文来 源 最近开发项目使用到了 dhtmlXtree 做权限设置,看了网上相关的中文资料很少,就把官方的 资料翻译了下,一共分 2 部分,API 可以参考官方文 档:http://dhtmlx.com/docs/download.shtml 效果图如下(三态树): dhtmlXTree 指南与实例 主要特性 多浏览器/多平台支持 全部由 JavaScript 控制 动态加载 XML 支持 大数据树动态翻译(智能 XML 解析) 拖拽(同一个树,不同的树之间,不同的框架之间) 带多选框(CheckBox)的树(两态/三态) 定制图标(使用 JavaScript 或 xml) 内容菜单(与 dhtmlxMenu 集成) 结点数据为用户数据 多行结点 高稳定性 支持 Macromedia Cold Fusion 支持 Jsp 支持 ASP.NET 支持以下浏览器 IE 5.5 或更高版本 Mac OS X Safari Mozilla 1.4 或更高版本 FireFox 0.9 或更高版本 Opera (Xml 加载支持取决于浏览器版本) 使用 dhtmlXTree 进行开发
    在页面初始化对象
    构造器有以下参数: 加载树的容器对象(应该在调用构造器之前被加载) 树的宽度 树的高度 树根的父结点的 id(超级根) 指定树的其他参数: setImagePath(url) - 设置树所使用的图片目录地址 enableCheckBoxes(mode) - 打开/关闭多选框(默认打开) enableDragAndDrop(mode) - 打开/关闭拖拽模式 设置事件处理 1.5 以上的版本支持一种新的设置事件的方式-使用 attachEvent 方法.设置一个事件处理方 法需要知道事件的名字和所调用的方法.可用的事件名参考这里(以后会翻译),在事件处理方 法中,可以这样引用树对象:
    很多时候函数要从参数中获取值.关于传值得详细信息请参考事件文档(以后翻译) 使用脚本增加结点 第 4-7 的参数都是 0(选择后调用的方法,所使用的图片)意味着都使用默认值 最后一个使用逗号分隔的参数可以是以下值(只能是大写): SELECT - 插入后选择此结点
    CALL - 在选择时调用方法 TOP - 在最上方插入此结点 CHILD - 此结点有子结点 CHECKED - 此结点的多选框被选中(如果有的话) 使用 XML 加载数据 在调用时,被打开的结点 id(就像 url 参数一样)将会被增加到初始化 XMLAutoLoading(url) 的 URL 地址上去 调用 loadXML(url)方法不会增加 id 到 url 地址上 调用无参的 loadXML()将会使用 XMLAutoLoading(url)所指定的 url 地址 XML 语法: PHP 脚本需要在页面头添加以下代码: \n"); ?> 结点是必须有的.指定加载数据的父结点.这个 id 参数指定了父结点 id.加载根层需要 在创建树的时候指定 id:new myObjTree(boxObject,width,height,0) 可以包含(为了一次加载多层结点)或者不包含子结点.并且可以包含标签, 可以为结点标签(label)增加一些 HTML (text 属性将会被忽略) Label]]>
    必要属性有: text - 结点显示的标签 id - 结点 id 可选属性有: tooltip - 鼠标放在结点上提示的信息 im0 - 没有子结点的结点显示的图片(将会从 setImagePath(url)方法指定的路径去获取图片) im1 - 包含子结点的结点展开时显示的图片 im2 - 包含子结点的结点关闭时显示的图片 aCo1 - 没有选中的结点的颜色 sCol - 选中的结点的颜色 select - 在加载时选择此结点(可以为任意值) style - 结点文本风格 open - 展开此结点(可以为任意值) call - 选择时调用函数(可以为任意值) checked - 如果存在的话,选择此结点的多选框(可以为任意值) child - 指定结点是否有子结点(1:有,0:无) imheight - 图标的高度 imwidth - 图标的宽度 topoffset - 设置结点和上层结点间的偏移量 radio - 如果非空 则此结点的子结点会有单选按钮 直接在 XML 里面设置用户数据可以使用标签,此标签只有一个参数: name 和 value 去指定用户数据值 为结点定制图标 有两种方法去定制结点图标,这取决于增加结点的方式.注意:树将会从 setImagePath(url)方 法指定的路径去获取结点图片. Javascript 的方式:使用 insertNewChild(...)或者 insertNewNext(...)方法的参数指定 XML 的方式.使用标签的属性:
    im0 - 没有子结点的结点显示的图片(将会从 setImagePath(url)方法指定的路径去获取图片) im1 - 包含子结点的结点展开时显示的图片 im2 - 包含子结点的结点关闭时显示的图片 构建动态树 如果树包含很大数量的结点(或者你只是不想浪费时间去加载隐藏的结点),按照需要去加载 他们似乎是更好的选择,而不是一次性的全部加载进来.因此我们使用 XML 动态加载树.请参 考"使用 XML 加载数据"或者查阅"Dynamical Loading in dhtmlxTree v.1.x" 操作结点 一些使用树的方法来操作结点的例子: 序列化树 序列化方法允许从 xml 表现形式(xml 字符串)中获取树.不同程度的序列化会在生成的 XML 字符串的属性上面反映出来 没有参数的序列化- id,open,select,text,child 参数 userDataFl true - userdata 参数 itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open Tooltips (鼠标放在结点上所提示的内容) 有三种方法去设置 tooltip : 使用结点的 label("text"item 结点的 text 属性)作为 tooltip - enableAutoTooltips(mode) 认为 false 使用 item 结点的"tooltip"属性作为 tooltip(如果此属性被设置了则默认使用此方法) 使用 setItemText(itemId,newLabel,newTooltip) 方法 - 默 移动结点 编程式的移动可以使用以下方法: 向上/下/左移动: tree.moveItem(nodeId,mode) mode 可以是以下值: "down" - 把结点移动到下方(不用再意层次关系) "up" - 把结点移动到上方 "left" - 把结点直接移动到上层位置 直接移动到指定位置(在树内部) tree.moveItem(nodeId,mode,targetId) mode 可以是以下值: "item_child" - 把结点移动到第三个参数子结点的位置作为子结点 "item_sibling" -把结点移动到第三个参数兄弟结点的位置作为兄弟结点 targetId - 目标结点的 Id To move node into position (to another tree) 移动结点到指定位 置(另一个树) tree.moveItem(nodeId,mode,targetId,targetTree) mode 的值参考以上两个例子 targetId - 目标结点的 Id(在 targetTree 里面的 id). targetTree - 目标树对象 剪切/粘贴的方式 另一种方式是使用 doCut()和 doPaste(id)函数-但是这种 方法只能对选中的结点有效.程序员也可以从一个位置删除一个结点然后再另外一个地方再 创建一个(也是个办法:-)).提供给用户拖拽功能去移动结点 结点计数器
    可以显示指定结点标签(label)的结点子元素的数量.激活此方法使用以下代码: mode 可以是以下值: "child" - 这层的所有子结点 "leafs" - 这层的所有没有子结点的子结点 "childrec" - 所有子结点 "leafsrec" -没有子结点的所有子结点 "disabled" - 什么都没有 其他相关方法: _getChildCounterValue(itemId) - 得到当前的记数值 setChildCalcHTML(before,after) - 包含计数器的 html 代码 如果在动态加载中需要设定计 数器的值,请在 xml 中使用 child 属性 智能 XML 解析 智能 XML 解析的概念很简单-整个树结构是从客户端加载的,但是只有应该被显示的结点才 会被展示出来.很有效的减少了加载时间和大数据量树的性能.另外-与动态加载相反的是-脚 本方法可以使用整个树结构(比如搜索整个树-而不是只有被显示出来的) 用以下方法激活智能 XML 解析: 在树被完全展开的时候只能 XML 解析不会产生作用 树的多选框 dhtmlxTree 支持两态和三态树.三态树有三种状态:选中/未选中/某些子结点被选中(不是全 部) 用以下方法激活三态树: 使用智能 XML 解析的话需要手工设置第三种状态(checked="-1");
    Checkboxes 可以被禁用-disableCheckbox(id,state) 一些结点可以隐藏 checkboxes - showItemCheckbox(id,state) (nocheckbox xml 属性) 版本 1.4 以后 showItemCheckbox 可以对整棵树使用(第一个参数使用 0 或者 null) 树的单选框 dhtmlxTree 支持但选按钮 使用以下代码对整棵树进行设置 对某些特定的结点使用单选按钮(代替多选框) 默认情况下单选按钮是根据层次分组的,但是版本 1.4 以后可以对整棵树进行设置: tree.enableRadiobuttons(true) Checkboxs 相关的 API 和 XML 属性也适用于 radiobuttons(参考 radiobuttons 方法描述) 拖拽技术 拖拽有三种模式(使用 setDragBehavior(mode)方法进行设置) 当作子结点拖拽-"child" 当作兄弟结点拖拽-"sibling" 复合模式(前两种模式一起)- "complex" 每一种模式还有两种子模式: 1. 普通拖拽 2. 复制拖拽 - tree.enableMercyDrag(1/0) 所有模式都可以在运行时改变 事件处理 在处理结点放下之前的事件使用-attachEvent("onDrag",func)如果 func 没有返回 true,将会 取消拖拽.将结点放下后会有另一个事件-onDrop-使用 attachEvent("OnDrop",func)进行处 理.两种方法都会传给 func 对象 5 个参数 被拖拽结点的 id 目标结点的 id
    分享到：
    赞 收藏

    相关推荐

    资料库

    前端

    共收录66份资料，累计5个分类，关注成员有19位，主要包括：Swift,Webpack,Node.js,Actionscript,Javascript

    热门标签

    Swift Webpack Node.js Actionscript Javascript

    最新资料