dhtmlXTree 指南与实例(二)
比较函数有两个结点id,使用树对象和id返回一个比较结果.如果定制比较函数被指定.则tree.sortTree(...)方法使用此函数排序
查找功能
dhtmlxTree的查找功能允许开发人员把注意力从匹配标签(label)搜索码中解脱出来,支持智能XML解析脚本语法
tree.findItem(searchString); //find item next to current selection
tree.findItem(searchString,1,1)//find item previous to current selection
tree.findItem(searchString,0,1)//search from top
例子包含在专业版中-samples/treeExPro2.html
多行结点
允许在多行显示树结点.建议关掉避免影响外观.开启多行功能需要以下代码:
tree.enableTreeLines(false);
tree.enableMultiLineItems(true);
例子包含在专业版中-samples/treeExPro6.html
树的图标
设置图标
有一种方法可以使用脚本设置图标(setItemImage,setItemImage2)或者xml (im0,im1,im2 attributes of item node):
im0 - 没有子结点的结点
im1 - 有子结点的关闭结点
im2 - 有子结点的打开结点
设置图标大小
有一种方法可以使用脚本或者xml为整棵树或者每个结点设置图标大小: XML设置每个结点的图标大小(可选):
<item ... imheight="Xpx" imwidth="Xpx"></item>
脚本语法:
tree.setIconSize(w,h);//set global icon size
tree.setIconSize(w,h,itemId)//set icon size for particular item
键盘导航
默认情况下dhtmlxTree没有支持键盘功能,但是可以在页面中增加dhtmlxtree_kn.js 文件去开启键盘支持,只需要下面一条指令:
<script src="../codebase/ext/dhtmlxtree_kn.js"></script>
<script>
tree.enableKeyboardNavigation(true);
</script>
默认按键:
Up arrow - 选择上面的结点
Down arrow - 选择下面的结点
Right arrow - 打开结点
Left arrow - 关闭结点
Enter - 调用结点方法
也可以指定自己的按键如下:
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);
"up"/"down"/"open"/"close"/"call" 是可用的动作,数字是按键代码
分布式解析
另一种增加大数据树(每层100-200个结点)性能的方法是分布式解析,这个是企业版才有的功能.最大的好处是可以在树完全被解析之前看到树的层次并准备使用.使用以下命令激活这个功能:
<script>
tree.enableDistributedParsing(mode,count,timeout);
</script>
参数:
mode - 必要参数- true/false - 开启/关闭分布解析
count - 可选参数- 分配结点的数量
timeout - 可选参数- 两部分结点之间延迟的毫秒数,这个功能完全和智能XML解析兼容
错误处理
一些dhtmlxTree异常可以被捕获并且处理
function myErrorHandler(type, desc, erData){
alert(erData[0].status)
}
dhtmlxError.catchError("ALL",myErrorHandler);
支持错误类型:
"All"
"LoadXML"
处理函数参数:
type - 字符串(如上)
desc - 错误描述(硬编码)
erData - 错误相关对象数组(如下).
Type Object(s)
LoadXML [0] - response object
Cold Fusion 标签
<cf_dhtmlXTree
>
...configuration xml...
</cf_dhtmlXTree>
name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated
width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)
height - [optional] height of the tree
JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default
CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default
iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default
xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically
checkboxes - [optional] show checkboxes (none, twoState, threeState)
dragndrop - [optional] activate drag-&-drop (true,false)
style - [optional] style for the tree box
onSelect - [optional] javascript function to call on node selection
oncheck - [optional] javascript function to call on node (un)checking
onDrop - [optional] javascript function to call on node drop
im1 - [optional] default image used for child nodes
im2 - [optional] default image used for opened branches
im3 - [optional] default image used for closed branches For description of optional configuration xml - see chapter "Loading data with XML"
Minimal possible tag syntax with on-page xml:
<cf_dhtmlXTree>
<item text="Top node" id="t1" >
<item text="Child node 1" id="c1" ></item>
<item text="Child node 2" id="c2" ></item>
</item>
</cf_dhtmlXTree>
Minimal possible tag syntax with server-side xml:
<cf_dhtmlXTree xmldoc="tree.xml">
</cf_dhtmlXTree>
With images specified:
<cf_dhtmlXTree
im1="book.gif"
im2="books_open.gif"
im3="books_close.gif">
<item text="Mystery " id="mystery" open="yes" >
<item text="Lawrence Block" id="lb" >
<item text="All the Flowers Are Dying" id="lb_1" />
<item text="The Burglar on the Prowl" id="lb_2" />
<item text="The Plot Thickens" id="lb_3" />
<item text="Grifters Game" id="lb_4" />
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
</item>
<item text="Robert Crais" id="rc" >
<item text="The Forgotten Man" id="rc_1" />
<item text="Stalking the Angel" id="rc_2" />
<item text="Free Fall" id="rc_3" />
<item text="Sunset Express" id="rc_4" />
<item text="Hostage" id="rc_5" />
</item>
<item text="Ian Rankin" id="ir" ></item>
<item text="James Patterson" id="jp" ></item>
<item text="Nancy Atherton" id="na" ></item>
</item>
</cf_dhtmlXTree>
With Events Handlers,Checkboxes and Drag-n-drop:
<cf_dhtmlXTree
dragndrop="true"
checkboxes="twoState"
onSelect="onClick"
onCheck="onCheck"
onDrop="onDrag">
<item text="Mystery " id="mystery" open="yes" >
<item text="Lawrence Block" id="lb" >
<item text="All the Flowers Are Dying" id="lb_1" />
<item text="The Burglar on the Prowl" id="lb_2" />
<item text="The Plot Thickens" id="lb_3" />
<item text="Grifters Game" id="lb_4" />
<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
</item>
<item text="Robert Crais" id="rc" >
<item text="The Forgotten Man" id="rc_1" />
<item text="Stalking the Angel" id="rc_2" />
<item text="Free Fall" id="rc_3" />
<item text="Sunset Express" id="rc_4" />
<item text="Hostage" id="rc_5" />
</item>
<item text="Ian Rankin" id="ir" ></item>
<item text="James Patterson" id="jp" ></item>
<item text="Nancy Atherton" id="na" ></item>
</item>
</cf_dhtmlXTree>
可编辑结点
1.3版本后dhtmlxTree专业版可以使用可编辑结点.只须在页面中引用dhtmlxtree_ed.js 去开启这个功能:
<script src="../codebase/ext/dhtmlxtree_ed.js"></script>
<script>
tree.enableItemEditor(mode);
</script>
参数如下:
mode - 必要参数- true/false - 开启/关闭可编辑结点
Event: 使用事件处理可以处理可编辑结点的不同阶段的事件,可以使用attachEvent("onEdit",handlerFunc)来设置. 在编辑过程中有4个不同的阶段:开始编辑前(可取消),编辑开始后,编辑结束前(可取消),编辑结束后 处理方法的4个参数如下:
state - 0 开始编辑前, 1 编辑开始后, 2 编辑结束前, 3 编辑结束后
id - 可编辑结点的id
tree - 树对象
value - 只有2阶段可以使用,编辑的值
同步与服务器更新
通常的树操作-比如拖拽(包括不同树间的),删除结点,插入结点,更新结点标签(label)-在1.3版本后可以使用数据处理模型(dataProcessor module)与服务器上的数据库进行同步更新.主要特性如下:
更新/插入结点,使用黑体字,删除结点-使用一条横线穿过
可以定义数据处理模式(自动/手动).更新/删除结点的数据发送到指定的服务器URL(我们叫它服务器处理器).服务器处理器应该可以返回普通的xml和自定的格式化格式(如下),让树知道服务器是否成功进行处理,所有存储后的过程都会被自动处理
使用以下步骤开启此功能:
页面中包含dhtmlxdataprocessor.js
为树创建数据处理(dataProcessor)对象
<script src="../codebase/dhtmlxdataprocessor.js"></script>
<script>
...
tree.init();
myDataProcessor = new dataProcessor(serverProcessorURL);
myDataProcessor.init(treeObj);
</script>
dataProcessor构造器参数如下:
serverProcessorURL - 必要参数- 处理接收数据文件的Url地址.如果使用服务器端运行.那么就是"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree"
myDataProcessor.init方法的参数是:
treeObj - 必要参数- 分配数据处理器(dataProcessor )的树对象
如果不需要使用built-in服务器处理器(serverProcessor)而是使用自己的文件处理数据,需要知道以下几点:
所有数据从Get域中获取
- tr_id - 结点ID - tr_order - 同层结点顺序 - tr_pid - 父结点 - tr_text -结点文字(label) - 用户数据块和名字一起传来 - !nativeeditor_status - 如果存在并且值是"inserted"则为插入操作,值为"deleted"为删除操作,不存在或者值为"updated"是更新操作
服务器处理器(serverProcessor )应该返回以下格式的XML数据:
<data>
<action type='insert/delete/update' sid='incomming_node_ID' tid='outgoing_node_ID'/>
</data>
只有对于插入结点来说incomming_node_ID和outgoing_node_ID 是两个不同的值.其他操作这两个值时一样的.对于统一服务器端运行时(PHP5/mySQLk可用)使用以下步骤:
yourTree.loadXML(url) 使用 "dhtmlxDataProcessor/server_code/PHP/get.php?ctrl=tree" 为参数
new dataProcessor(url) 使用"dhtmlxDataProcessor/server_code/PHP/update.php?ctrl=tree" 为参数
在dhtmlxDataProcessor/server_code/PHP/db.php 中配置连接
在dhtmlxDataProcessor/server_code/PHP/tree_data.xml 中指定表的相应列值
从HTML初始化
可以使用html List或者内联XML来创建一个树.无论哪种方法都要在放置在一个DIV元素里面,DIV元素当作树的容器(XML应该包含XMP标签-见下面代码)任何树以set或者enable开头的方法可以当作DIV元素的属性使用去设置树的属性.可以自动转换或者调用脚本函数
自动转换
在页面中包含 dhtmlxtree_start.js
把DIV元素的class属性设置为dhtmlxTree
使用脚本方法转换
在页面中包含 dhtmlxtree_start.js
调用dhtmlXTreeFromHTML函数,把DIV元素的id当作第一个参数传进去
var myTree = dhtmlXTreeFromHTML('listBox');
使用html List初始化
<div
class="dhtmlxTree"
id="treeboxbox_tree"
setImagePath="../codebase/imgs/"
>
<ul>
<li>Root</li>
<ul>
<li>Child1
<ul>
<li>Child 1-1</li>
</ul>
</li>
<li>Child2</li>
<li>Bold Italic </li>
</ul>
</li>
</ul>
</div>
使用内联XML初始化
关于dhtmlxTree XML结构的详细内容清参照 Loading data with XML
<div id="treeboxbox_tree2" setImagePath="../codebase/imgs/" class="dhtmlxTree" >
<xmp>
<item text="Root" open="1" id="11">
<item text="Child1" select="1" open="1" id="12">
<item text="Child1-1" id="13"/>
</item>
<item text="Child2" id="14"/>
<item id="15" text="Text"/>
</item>
< /xmp>
</div>
Version/Edition: v1.4/Professional/Standard Required js file:dhtmlxtree_start.js
动态显示(Smart Rendering)
如果树的每层都有很大数量的结点(500或者更多),可以尝试使用动态(Smart Rendering)显示来增加性能.数据结构不需要做任何变化-只需要使用enableSmartRendering打开此功能.注意:此方法和分布解析和三态树不兼容. Version/Edition: v1.5/Professional Required js file:dhtmlxtree_srnd.js
从JSON加载
从JSON加载树需要有JSON对象或者文件,并且使用以下方法加载:
tree.loadJSONObject(JSON_OBJECT);//for loading from script object
tree.loadJSON(FILE);//for loading from file
两个方法都有第二个可选参数-当数据被加载后执行的方法.JSON格式:结构类似树的XML结构,标签被翻译成对象,属性被翻译成字段
{id:0,
item:[
{id:1,text:"first"},
{id:2, text:"middle",
item:[
{id:"21", text:"child"}
]},
{id:3,text:"last"}
]
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js
从CSV加载数据
需要使用CSV格式的字符串或者文件,使用以下方法加载:
tree.loadCSV(FILE);//for loading from file
tree.loadCSVString(CSVSTRING);//for loading from string
两个方法都有第二个可选参数-当数据被加载后执行的方法.CSV格式:树结点被三个值所表示-id,parent_id,text.比如:
1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
Version/Edition: v1.6/Professional/Standard Required js file:dhtmlXGrid_json.js
从JS数组加载
执行以下方法从javascript对象或者javascript文件加载:
tree.loadJSArrayFile(FILE);//for loading from file
tree.loadJSArray(ARRAY);//for loading from array object
两个方法都有第二个可选参数-当数据被加载后执行的方法.ARRAY格式:树结点被三个值所组成的子数组所表示-id,parent_id,text.比如:
var treeArray = new Array(
["1","0","node 1"],
["2","1","node 1.1"],
["3","2","node 1.1.1"],
["4","0","node 2"]
)
dhtmlXTree 指南与实例(二)相关推荐
- dhtmlXTree 指南与实例(一)
官网: http://dhtmlx.com/docs/products/dhtmlxTree/ dhtmlXTree 指南与实例 主要特性 多浏览器/多平台支持 全部由JavaScript控制 动态加 ...
- C#2.0实例程序STEP BY STEP－－实例二:数据类型
C#2.0实例程序STEP BY STEP--实例二:数据类型 与其他.NET语言一样,C#支持Common Type Sysem(CTS),其中的数据类型集合不仅包含我们熟悉的基本类型,例如int, ...
- C语言库函数大全及应用实例二
[编程资料]C语言库函数大全及应用实例二 函数名: bioskey 功 能: 直接使用BIOS服务的键盘接口 ...
- python 分数序列求和公式_Python分数序列求和，编程练习题实例二十四
本文是关于Python分数序列求和的应用练习,适合菜鸟练习使用,python大牛绕行哦. Python练习题问题如下: 问题简述:有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13 要 ...
- ENSP配置 实例二 单臂路由配置
ENSP配置 实例二 单臂路由配置 单臂路由配置 配置 路由: interface EigabitEthernet0/0/0 ip address 10.0.1.1 24 interface Eiga ...
- 享元模式实例与解析实例二：共享网络设备（有外部状态）
实例二:共享网络设备(有外部状态) 虽然网络设备可以共享,但是分配给每一个终端计算机的端口(Port)是不同的,因此多台计算机虽然可以共享同一个网络设备,但必须使用不同的端口.我们可以将端口从网络设备 ...
- MFC编程实例二：进度条的使用
MFC编程实例二:进度条的使用 (以下蓝色字体为手动添加的代码) (1) 创建一个基于对话框的应用程序. (2) 在对话框界面添加一个文本框.一个进度条控件(Progress控件)和一个按钮. ...
- 计网 ---实例二：实验楼
计网 -实例二:实验楼 LSW1 <Huawei>undo terminal monitor #去掉能使终端显示信息中心发送信息的功能 <Huawei>system-view ...
- Json转换利器Gson之实例二-Gson注解和GsonBuilder
有时候我们不需要把实体的所有属性都导出,只想把一部分属性导出为Json. 有时候我们的实体类会随着版本的升级而修改. 有时候我们想对输出的json默认排好格式. ... ... 请看下面的例子吧: 实 ...
最新文章
- hql调用mysql存储过程_hibernate调用mysql存储过程
- Android中实现保存和读取文本文件到内部存储器(实现简易的记事本为例)
- 两个列表合并去重_把两个pdf合并成一个如何解决？
- Call requires API level 3 (current min is 1)
- 数据结构：(6)其他情况的算法分析
- pwm控制舵机转动角度程序_Mixly 第15课 舵机的使用
- 近期 AI 领域招聘招生信息汇总
- 剑指offer39 平衡二叉树
- 复旦大学邱锡鹏教授带你梳理深度学习知识脉络（直播彩蛋）
- 简单的 js 日历控件
- C语言运算符与输入输出
- Linux下安装字体后刷新字体
- 【思科模拟器实验】三层交换机配置DHCP
- 如何更改您的Apple ID电子邮件地址
- 一键模拟登陆华师大公共数据库！ver2.0
- python34 pandas_python 3 科学计算之pandas入门(一)
- 折弯公差尺寸及工艺要求
- Android辅助功能
- ns-3的绘图工具——Gnuplot
- 吾父马达加斯加之旅-3