Xtree组件笔记（1）

在项目里头用到了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