首页 > Dhtmlx > dhtmlXTree中文API帮助文档

dhtmlXTree中文API帮助文档

dhtmlXTree是俄罗斯人开发的一款树形组件,其功能特别强大,基本上能满足大部分常规需求,也比较好用。下面是我整理的一些里面常用函数的说明,希望对大家有帮助
基本生成需要引入js文件:

dhtmlxcommon.js
dhtmlxtree.js
基本生成需要引入css文件
dhtmlxtree.css
修改节点需要引入js文件
dhtmlxtree_ed.js
加载大数据XML需要引入JS文件:
dhtmlxtree_srnd.js


生成XHLtree对象

方法名: dhtmlXTreeObject(htmlObject,width,height,rootId)
htmlObject:树生成窗口标识
width:宽度
height:深度
rootId:根节点ID
例: var tree=new dhtmlXTreeObject("tree","100%","100%",0);

设置树节点图片集:

方法:setImagePath(Path);
path:图片集的相对地址或绝对地址

添加节点:

方法名: 
insertNewChild(parentId,itemId,itemText,itemActionHandler,
image1,image2,image3,optionStr,children)
parentId: 需要插入位置的父节点ID
itemId:自身ID
itemText:节点显示名称
itemActionHandler:节点事件(事件在XML配置)
image1:节点自身图标 
image2:展开/打开节点图标
image3:收起节点图标
children:子节点标志,可填节点对应的url

追加节点

方法名:
insertNewNext(itemId,newItemId,itemText,itemActionHandler,
image1,image2,image3,optionStr,children)
itemId:需要追加节点的ID
newItemId:自身ID
itemText: 节点显示名称
image1: 节点自身图标
image2: 展开/打开节点图标
image3: 收起节点图标
children: 子节点标志, 可填节点对应的url
追加与添加不一样,添加节点只对需要父节点ID,而追加是需要前一个节点的ID
删除节点:
方法名:deleteItem(itemId, selectParent);
参数itemId: 删除节点ID,根据节点ID对节点删除;
参数selectParent:删除后是否焦点在父节点, true/焦点在父节点  false/无焦点

修改节点位置
方法名: enableDragAndDropScrolling(mode)
参数mode: 是否可对节点进行拖拽 true/可以拖拽  false/不可拖拽

修改节点名称 
方法名:enableItemEditor(mode)
mode: 是否可对节点进行修改 true/可以修改  false/不可修改
注意: 这里要导入dhtmlxtree_ed.js文件

获取被选定节点ID
方法名:getSelectedItemId()

通过节点名查找节点并且该节点获取焦点
方法名:findItem(searchStr,direction,top)
参数searchStr:节点名(xml中Item的text属性)
参数direction:设置查找方式0/从顶部(root)开始向下  1/从底部向上
参数top:0/不从顶部开始查找  1/从顶部开始查找

显示树
方法名:loadXML(file,afterCall)
file:读取树信息文件地址(可以是本地XML,JS数组,Json对象)
afterCall:显示树后调用方法

动态加载树
方法名:setXMLAutoLoading(filePath)
filePath: 自动读取加载节点信息地址(可以是本地XML,JS数组,Json对象)
设置之后会自动对后台数据进行加载根据xml里面 Item 必须具有child属性
如果不设置child属性将无法自动加载子节点 child属性可以设为0/无子节点 1/有子节点
当打开节点时会自动将当前节点ID传入后台进行再次访问

Xml 例子:

一级节点
<?xml version="1.0" encoding="utf-8" ?>
<tree id=”0”>
<item  text="root" id="1" im0="book.gif" … child=”1”/>
</tree>
二级节点:
<?xml version="1.0" encoding="utf-8" ?>
<tree id=”1”>
<item text="node1" id="2" child=”1”/>
<item .../>
</tree>

除了用xml可以进行对数据格式化外,还可以利用js,json对象将数据从后台传入页面,js和json基本都是利用多维数组的形式将数据传入页面
在XML中
tree标签是定义树的root节点ID
只有id属性
Item标签被包含于tree标签用于定义节点属性,可设置 多个属性包括
id – 节点ID ,
text—节点名 ,
open – 在载入时是否显示打开
select – 在载入时是否被选中
child – 是否具有子节点(动态加载时必须有此属性)
im0 – 沒有子节点的图示
im1 – 关闭节点图示
im2 – 开启节点图示

静态树加载例子:

<script>
Var tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("codebase/imgs/");
tree.enableDragAndDrop(false);
tree.enableTreeLines(false); 
tree.setImageArrays("plus","","","","./csh_bluebooks/plus.gif");
//设置通用展开图示:
tree.setImageArrays("minus","","","","./csh_bluebooks/minus.gif");
//通用收起图示:
		tree.setStdImages("./csh_bluebooks/book.gif",
		"./csh_bluebooks/folderOpen.gif","./csh_bluebooks/folderClosed.gif");	
		tree.loadXML("<%=url%>tree4.xml");
</script>

Xml文件:

<?xml version='1.0' encoding='utf-8'?>
<tree id="0">
	<item text="Books" id="books">
		<item text="Mystery &amp; Thrillers" id="mystery" >
			<item text="Lawrence Block" id="lb" >
				<item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
			</item>
			<item text="Robert Crais" id="rc" >
				<item text="Hostage" id="rc_5" />
			</item>
		</item>
	</item>
</tree>

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/dhtmlxtree-chinese-api.html