介绍

  dhtmlxTree是一个功能丰富的JavaScript树菜单  它允许您快速添加一个好看的,基于ajax的web页面的分层树。

  treeview支持在线节点编辑、先进的拖放,三态复选框等等。由于特殊的技巧,这个JavaScript树控件能够迅速和有效地加载大数据。

  在线Demo事例

   在线原文API

特征:

  注意,一些功能仅在专业版可用。下面的API说明中 标有pro标识的方法 是专业版本才提供的特性

  1.跨浏览器兼容性(Chrome,火狐,谷歌,Safari,IE)支持ie6哦

  2.支持RTL

   3.支持多种数据源格式(XML, JavaScript, JSON, CSV)

  4.可在线编辑

  5.服务器端集成dhtmlxConnector

  6.支持键盘方向键操作

  7.支持多选

  8.支持右键菜单

  9.高级拖放功能

  10.与dhtmlxGrid的拖放交互

  11.全面的js api

  12.动态加载大数据

  13.智能xml解析

  14.智能渲染大数据树

  15.xml的序列化

  16.复选框(两个/三个州,禁用/隐藏),单选按钮

  17.可定制的外观

  18.无限的用户节点数据

中文API

方法

assignKeys(pro) 用于配置键盘导航键
attachEvent 添加自定义事件
changeItemId 更改某项id
clearCut 取消选中项的剪切
clearSelection(pro) 取消选择树中的项
closeAllItems 折叠所有节点
closeItem 折叠一个节点
deleteChildItems 删除某节点下的所有的子节点
deleteItem 删除一个节点(某节点以及所有子节点)
destructor 删除树和清除内存
detachEvent 删除自定义事件
disableCheckbox 禁用复选框
doCut 剪切选中项
doPaste 粘贴选中项
editItem 编辑某项(by id)
enableActiveImages 使图片能够点击或者拖动,默认情况下只有文字才可以
enableAutoSavingSelected(pro) 在cookie中启用或者禁用自动保存选择的节点
enableAutoTooltips(pro) 开启节点本文的提示tooltip
enableCheckBoxes 显示或者隐藏所有复选框
enableContextMenu(pro) 开启右键菜单
enableDistributedParsing(pro) 开启大数据树的分布解析 (项目项加载部分的部分超时)
enableDragAndDrop 开启/禁用拖放
enableDragAndDropScrolling 在拖放操作中启用/禁用自动滚动
enableHighlighting 开启项的文字高亮 (当鼠标移上去的时候)
enableIEImageFix 用背景图片取代img标签 来解决ie6下的图片缓存问题
enableImageDrag 开启点击项的图标也能够拖动该项 (默认只有项的文本可以)
enableItemEditor 开启允许编辑条目的文本
enableKeySearch(pro) 开启项可以按关键字检索
enableKeyboardNavigation(pro) 开启在树上可以键盘导航
enableLoadingItem(pro) 开启/禁用 "loading..." 项
enableMercyDrag(pro) 开启拖动的时候不删除项(复制不移动)
enableMultiLineItems(pro) 开启文本换行
enableMultiselection(pro) 开启多选
enableRTL(pro) 开启RLT模式
enableRadioButtons(pro) 开启使用单选按钮
enableSingleRadioMode(pro) 开启单选模式
enableSmartCheckboxes(pro) 开启智能复选框
enableSmartRendering(pro) 开启智能渲染模式
enableSmartXMLParsing(pro) 启用/禁用智能xml解析模式
enableTextSigns(pro) 用文本标志代替图片的(展开折叠图标)
enableThreeStateCheckboxes 开启三态复选框(级联选中父节点)
enableTreeImages 显示/隐藏 树节点icon
enableTreeLines 启用/禁用 树的线条样式
findItem(pro) 通过文本查找某项, 选中并聚焦
findItemIdByLabel(pro) 通过文本查找某项
getAllChecked 返回所有选中的节点id的集合,默认分隔符分隔
getAllCheckedBranches 返回所有选中的复选框和是三态复选框的节点id的集合,默认分隔符分隔
getAllChildless 获取所有子节点id的集合 ,默认分隔符分隔
getAllItemsWithKids 返回有子节点项的集合,默认分隔符分隔
getAllPartiallyChecked 返回所有选中的并且是三态复选框的节点id的集合,默认分隔符分隔
getAllSubItems 返回所有子层次下的子嵌套集合(相对于指定的项)
getAllUnchecked 返回复选框没有被选择的节点集合,默认分隔符分隔
getChildItemIdByIndex 通过index获取子节点id
getDistributedParsingState(pro) 得到当前状态分布的解析
getIndexById 通过id获取节点在子集合中的下标
getItemColor 获取项的颜色
getItemIdByIndex 通过节点下标获取节点id
getItemImage(pro) 获取节点图片的路径
getItemParsingState(pro) 获取当前项的解析状态
getItemText 获取节点文本
getItemTooltip 获取项的 tooltip
getLevel 获取节点等级 (位置层次结构)
getOpenState 获取节点开闭的状态
getParentId 获得父节点id
getSelectedItemId 获取选中节点id
getSelectedItemText 获取选中节点文本
getSubItems 返回一级子节点的id集合
getUserData 获取用户数据
getXMLState(pro) 获取当前加载xml的状态
hasChildren 获取子节点的数目
insertNewChild 插入新的子节点
insertNewItem 插入新项
insertNewNext 在指定项旁插入新项
isItemChecked 获取项的选中状态
isLocked(pro) 是否锁定 锁定返回true
loadCSV 从csv file文件中加载树的数据源
loadCSVString 从csv 字符串中加载树的数据源
loadJSArray 从数组对象中加载树的数据源
loadJSArrayFile 从数组对象文件中加载树的数据源
loadJSON 从json文件中加载树的数据源
loadJSONObject 从json对象中加载树的数据源
loadOpenStates(pro) 从cookie恢复打开的节点
loadState(pro) 从cookie中加载树
loadXML 从xml文件中加载数据源
loadXMLString 从xml 字符串中加载数据源
lockItem(pro) 锁定或者解锁某一项
lockTree(pro) 锁定树
makeAllDraggable 给所有树节点添加拖放功能
makeDraggable 添加一个拖放功能到一个html对象中
moveItem 移动一项(inside of tree)
openAllItems 展开所有节点
openAllItemsDynamic(pro) 展开目标节点和所有子节点 (the same as openallitems, but works in dynamic trees)
openItem 展开一个节点
openItemsDynamic(pro) 展开动态加载的树节点 (加载结束再展开)
openOnItemAdded(pro) 在给一个节点添加子节点后 该节点则成为展开的父节点
preventIECaching 通过在url中添加随机值来防止缓存
refreshItem 从xml中刷新项
refreshItems(pro) 刷新指定节点 (只更新xml数据源中的指定内容)
registerXMLEntity(pro) 初始化时候替换xml中的实体内容(default are: ampersand, lessthen and greaterthen 运算符)
restoreSelectedItem(pro) 从cookie中恢复选择的项
saveOpenStates(pro) 保存打开的节点到cookie
saveSelectedItem(pro) 将选择项到cookie
saveState(pro) 保存到cookie
selectItem 选择指定节点
serializeTree(pro) 序列化成树的xml格式
serializeTreeToJSON 序列化成树的json格式
setCheck 设置节点的复选框的状态
setChildCalcHTML(pro) 设置Cross Signs前缀和后缀的文本符号(默认[])
setChildCalcMode(pro) sets children calculation mode
setCustomSortFunction(pro) 设置自定义排序函数 有两个参数
setDataMode 设置一个默认的数据传输模式
setDragBehavior(pro) 设置拖放行为
setEditStartAction 定义了哪些事件必须开始编辑的过程(双击或者单击)
setEscapingMode 设置编码格式(用于转义id请求)
setIconSize(pro) 设置icons的尺寸
setIconsPath 定义图标icon文件夹的路径
setImageArrays 自定义树的图片样式(线,加号,减号)
setImagesPath 定义imgs文件夹的路径
setItemCloseable 阻止某项关闭
setItemColor 设置项文本的颜色
setItemContextMenu(pro) 为单独项设置右键菜单
setItemImage 设置项的图片
setItemStyle 设置单独项的样式
setItemText 设置一个新节点的文本(可以是html)
setItemTopOffset(pro) 为某项设置顶部偏移
setListDelimeter(pro) 设置list的分隔符默认 (",")
setLockedIcons(pro) 为 locked 项设置图标
setSerializationLevel(pro) 配置xml序列化
setSkin 设置皮肤
setStdImages 设置默认图片节点(之前必须被称为xml加载)
setSubChecked 设置节点以及所有子节点的复选框状态
setUserData 设置目标节点的用户数据
setXMLAutoLoading 允许动态加载xml
setXMLAutoLoadingBehaviour(pro) 动态加载 传到服务器id的数据
showItemCheckbox(pro) 显示/隐藏 树节点的某项的复选框
showItemSign(pro) 显示/隐藏 (+/-) 图标
smartRefreshBranch(pro) 刷新指定子项 (从服务器获得xml,添加新节点、删除未使用的节点)
smartRefreshItem(pro) 刷新指定项 (从服务器获得xml,添加新节点、删除未使用的节点)
sortTree(pro) 排序
stopEdit 停止编辑
updateItem(pro) 修改项目的属性

事件

onAllOpenDynamic 当所有子节点加载完并打开的时候触发
onBeforeCheck 选中或取消选中一个项目之前触发
onBeforeContextMenu 在鼠标右键进行右键菜单前触发
onBeforeDrag 当项开始拖动的时候触发 (项被选择并且鼠标开始拖动时候)
onCheck 选中或取消选中事件(复选框)
onClick 点击事件
onDblClick 双击事件
onDrag 指定项拖放到其它项上时触发 但是在该项的运动处理之前触发
onDragIn 指定项被拖放到某项上面时候触发
onDrop fires when drag-and-drop has already been processed; besides, fires when the nodes are moved programmatically
onEdit 4个不同的编辑阶段触发: 开始编辑前(可以被取消), 开始编辑后,结束编辑前 (可以被取消), 结束编辑后
onEditCancel 取消编辑后触发
onKeyPress 键盘按键后触发
onMouseIn 鼠标移上去触发
onMouseOut 鼠标离开项的区域触发
onOpenDynamicEnd 在该项的openitemsdynamic 方法触发之后触发
onOpenEnd 某项打开后触发
onOpenStart 某项打开之前触发
onRightClick 单击右键触发
onSelect 选择某项后触发
onXLE xml加载完毕一组数据呈现后触发
onXLS xml加载开始时候触发

返回导航页面

前端JS开发框架-DHTMLX--dhtmlXTree的更多相关文章

  1. 前端JS开发框架-DHTMLX

    一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 简洁界面,快速性能,和丰富用户体验的企业级web应用程序 ...

  2. 前端JS开发框架

    前端JS开发框架-DHTMLX 发框架-DHTMLX   一:介绍 dhtmlxSuite是一个JavaScript库,提供了一套完整的Ajax -驱动UI组件.我们能够使用dhtmlxSuite构建 ...

  3. 国内外前端(js)开发框架对比

    国内外前端开发框架对比 首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比. Bootstrap Bootstrap(http://www.bootcss.com) ...

  4. 前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    享一个前后端分离方案源码-前端angularjs+requirejs+dhtmlx 后端asp.net webapi   一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家 ...

  5. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  6. Semantic UI – 完全语义化的前端界面开发框架

    Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...

  7. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

  8. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  9. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

随机推荐

  1. RxJava开发精要3-向响应式世界问好

    原文出自<RxJava Essentials> 原文作者 : Ivan Morgillo 译文出自 : 开发技术前线 www.devtf.cn 转载声明: 本译文已授权开发者头条享有独家转 ...

  2. bzoj3165 1568

    1568是3165的弱化版,发的代码是3165的这道题完全没想出来,是看wyl大神的题解http://hi.baidu.com/wyl8899/item/2deafd3a376ef2d46d15e99 ...

  3. Mater Nginx(2) - A Configuration Guide

    The basic configuration format Nginx global configuration parameters Using include files The HTTP se ...

  4. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  5. c程序设计语言_习题8-6_利用malloc()函数,重新实现c语言的库函数calloc()

    The standard library function calloc(n,size) returns a pointer to n objects of size size , with the ...

  6. winhex的使用

    1. 当我们用VC编写代码,将数据写入到磁盘的文件后,用winhex查看,winhex可以检测文件最后写入时间的变动,如果有变动,则会提示“此文件的最后写入时间已经改变.解除当前状态并重新载入吗?”, ...

  7. 期待已久的2012年度最佳jQuery插件揭晓

    近日,国外著名博客WDL发布了2012年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过6年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架,这主要归功于众多围 ...

  8. POJ -- 3842

    An Industrial Spy   Description Industrial spying is very common for modern research labs. I am such ...

  9. HDU-5347 MZL's chemistry

    http://acm.hdu.edu.cn/showproblem.php?pid=5347 MZL's chemistry Time Limit: 2000/1000 MS (Java/Others ...

  10. web测试用例表(自用)

    自己留着用,第一次搞这么个东西.虽然简单却很实用. 模块名               备注 开发人员   版本号             用例作者   设计时间             测试类型 功 ...