只爱一次

不留遗憾

2006年5月30日 #

Javascript 目录树使用简介

XTree 树控件使用手册

1       API 说明

1.1     WebFXTreeAbstractNode

树控件的抽象基类,不需要创建实例。它具有如下属性和方法。

1.1.1    属性

1.         id           - 数字类型 只读

树节点的唯一标识

2.         text              - 字符串

节点的显示内容

3.         action    - 字符串    

节点的动作响应,如 <a href=”action”>

4.         open              -   布尔型    只读

表示该节点是否为打开状态还是合拢状态,默认情况下当该节点下没有子节点时返回 false

5.         icon        -    字符串

指定当前节点显示的图标,如果不指定则使用默认图标

6.         openIcon       -    字符串

指定节点展开时的图标(当有子节点时有效),不指定则使用默认图标

7.         parentNode    - 引用

指向父节点的引用

8.         childNodea     -    数组

包含该节点下的所有子节点

 

1.1.2    方法

1.         add(oNode, [bNodeIndent]) -    返回       

 

2.         indent()  - void

 

 

3.         toggle()  - void

 

4.         expand() - void

 

 

5.         collapse()       - void

 

6.         expandAll()   - void

 

 

7.         collapseAll()  - void

 

8.         expandChildren() - void

 

 

9.         collapseChildren()       - void

 

10.     getNextSibling()   -    返回 WebFXTreeItem 的引用

 

 

11.     getPreviousSibling()    -    返回 WebFXTreeItem 的引用

 

12.     toString()

 

 

1.2     WebFXTree

WebFXTree 是树控件的根实体类,继承自 WebFXTreeAbstractNode

1.2.1    构造方法

WebFXTree(text, action, behavior, icon, openIcon)

1.2.2    属性

1.2.3    方法

1.3     WebFXTreeItem

1.3.1    构造方法

1.3.2    属性

1.3.3    方法

2       使用说明

2.1     包含 js 文件

如: <script src=”xtree.js”></script>

2.2     创建根节点

var   root = new WebFXTree(“Root”);

2.3     添加子节点

root.all(new WebFXTreeItem(“Item1”));

root.all(new WebFXTreeItem(“Item2”));

root.all(new WebFXTreeItem(“Item3”));

 

2.4     输出

document.write(root);

3       高级应用

3.1     添加目录

var   root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

foldr.all(new WebFXTreeItem(“2.1”));

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

3.2     定制行为

目录树的行为可以定制,通过 setBehavior 方法可以设定目录树中只包含目录,如

var   root = new WebFXTree(“Root”);

root.setBehavior(‘explorer’);

:

:

略

3.3     定制图标

var   root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“1”));

var folder = new WebFXTreeItem(“2”);

root.add(folder);

var t21 = new WebFXTreeItem(“2.1”);

t21.icon=webFXTreeConfig.fileIcon;   // 设置节点 t21 的图标

foldr.all();

folder.all(new WebFXTreeItem(“2.2”));

root.all(new WebFXTreeItem(“3”));

document.write(root);

posted @ 2006-05-30 12:57 onlylife 阅读(5428) | 评论 (0) | 编辑 收藏