在项目里头用到了xtree.js组件,分析了一下它的源码,发现还不是protoType框架,但是用起来相当的方便,在此给大家分享一下:
该组件是一个基于javascript封装的纯客户端组件,通过该组件API可以轻松的用很少的代码量完成一个树状导航菜单的构造工作,该组件完全按照OO思想封装,对于熟悉java的程序员来说很容易上手。
可在http://webfx.eae.net/dhtml/xtree/官方网站下载该组件,包括一个核心的xtree.js文件,在要使用该组件的页面直接包含即可使用:
<script type="text/javascript" src="/js/xtree.js"></script>
该组件的主要类及属性如下:
WebFXTreeAbstractNode:
抽象基类,后面提到的WebFXTree和WebFXTreeItem类都继承自该基类
属性
| ||
属性名
|
属性类型(js数据类型)
|
描述
|
id
|
Number
|
只读属性,节点的唯一ID
|
text
|
String
|
节点显示的标签名
|
action
|
String
|
该节点对应的url连接
|
open
|
Boolean
|
节点是否展开(如果没有子节点会一直返回false)
|
icon
|
String
|
节点图标. 默认为xtree.js同级目录下images目录下的图象
|
openIcon
|
String
|
节点折叠时的图标,默认为xtree.js同级目录下images目录下的图象
|
parentNode
|
Reference
|
父节点的引用
|
childNodes
|
Array
|
子节点数组
|
方法
| ||
方法名
|
方法返回类型
|
描述
|
add(oNode, [bNoIdent])
|
Reference
|
添加一个树节点(子树)到当前节点,包含两个参数,前一个为
webfxtreeitem
对象实例,后一个为可选
boolean
参数,设为
true
将防止在增加树节点时树的折叠操作,返回被加入节点的引用
|
indent()
|
Void
|
折叠操作
|
toggle()
|
Void
|
折叠/展示切换
|
expand()
|
Void
|
展开
|
collapse()
|
Void
|
折叠
|
expandAll()
|
Void
|
展开该节点及所有下级子节点.
|
collapseAll()
|
Void
|
折叠该节点及所有子节点
|
expandChildren()
|
Void
|
折叠该节点的所有子节点
|
toString()
|
String
|
构造树节点的Html代码
|
WebFXTree:该类用于建立实际的树根,子树节点可通过WebFXTreeItem类实例的方式添加,继承WebFXTreeAbstractNode基类,拥有WebFXTreeAbstractNode的所有属性方法。
构造方法:new WebFXTree([text], [action])
| ||
参数名
|
参数类型(js数据类型)
|
描述
|
text
|
String
|
根节点显示标签
|
action
|
String
|
根节点的url(可选参数)
|
属性
| ||
属性名
|
属性类型(js数据类型)
|
描述
|
rendered
|
Boolean
|
表明树是否已创建并渲染
|
方法
| ||
方法名
|
方法返回类型
|
描述
|
getSelected()
|
Reference
|
返回用户选择的节点实例.
|
setBehavior(sBehavior)
|
Void
|
默认为classic,如果设置为explore时可以使树节点展示看起来更像windows Explore
|
getBehavior()
|
String
|
返回classic/explore
|
WebFXTreeItem:该类用于创建树节点,可以被添加到WebFxTree或者另一个WebFXTreeItem实例中,继承WebFXTreeAbstractNode类的所有属性和方法。
构造方法:WebFXTreeItem([text], [action], [parent], [icon], [openIcon])
| ||
参数名
|
参数类型(js数据类型)
|
描述
|
text
|
String
|
根节点显示标签
|
action
|
String
|
根节点的url(可选参数)
|
parent
|
Reference
|
父节点(可选参数)
|
icon
|
String
|
节点图标(可选参数)
|
openIcon
|
String
|
节点展开时的图标(可选参数)
|
方法
| ||
方法名
|
方法返回类型
|
描述
|
getFirst()
|
Reference
|
返回一个子节点的引用
|
getLast()
|
Reference
|
返回最后一个子节点的引用
|
了解以上XTree组件后,我们可以通过如下的代码实例来轻松的创建一颗树:
var tree = new WebFXTree('Root');
tree.setBehavior('explorer');
tree.icon = ' /images/notepad.gif';
tree.add(new WebFXTreeItem('1'));
var folder = new WebFXTreeItem('2')
tree.add(folder);
var t21 = new WebFXTreeItem('2.1');
t21.action = “/jsp/treeAction.do?id=2.1”;
folder.add(t21);
var t22 = new WebFXTreeItem('2.2');
t21.action = “/jsp/treeAction.do?id=2.2”;
folder.add(t22);
var t23 = new WebFXTreeItem('2.3');
t21.action = “/jsp/treeAction.do?id=2.3”;
folder.add(t23);
tree.add(new WebFXTreeItem('3'));
t21.action = “/jsp/treeAction.do?id=3”;
document.write(tree);
原处:http://qingyuan18.spaces.live.com/blog/cns!2993BC1DDCEB5D2E!300.entry