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

0人

了这篇文章

类别： JavaScript┆阅读( 0)┆评论( 0) ┆ 返回博主首页┆ 返回博客首页

上一篇 jsp中的include乱码问题 下一篇 opener与parent的区别

相关文章

• 某网络专业人士笔记（超级珍藏）[转贴]
• 笔记..3.10
• C#学习笔记（十）：阴影和深度复制
• c#中的运算符
• 从U盘无人值守安装linux操作系统（纯实践笔记）

职位推荐

• 前端开发工程师（nodejs）
• Web前端开发工程师
• 高级Web前端工程师
• web前端工程师
• web前端开发工程师

文章评论

 

 

发表评论            

昵  称：

登录  快速注册

验证码：

点击图片可刷新验证码请点击后输入验证码博客过2级，无需填写验证码

内  容：

同时赞一个

每日博报 精彩不止一点

Copyright By 51CTO.COM 版权所有