介绍
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) |
修改项目的属性 |
事件