Javascript 目录树使用简介

XTree 树控件使用手册

1       API 说明

1.1     WebFXTreeAbstractNode

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

1.1.1    属性

1.         id           － 数字类型 只读 <!----> <o:p> </o:p>

树节点的唯一标识

2.         text              － 字符串 <o:p> </o:p>

节点的显示内容

3.         action    － 字符串     <o:p> </o:p>

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

4.         open              －   布尔型    只读 <o:p> </o:p>

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

5.         icon        －    字符串 <o:p> </o:p>

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

6.         openIcon       －    字符串 <o:p> </o:p>

指定节点展开时的图标（当有子节点时有效），不指定则使用默认图标

7.         parentNode    － 引用 <o:p> </o:p>

指向父节点的引用

8.         childNodea     －    数组 <o:p> </o:p>

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

<o:p> </o:p>

1.1.2    方法

1.         add(oNode, [bNodeIndent]) －    返回        <o:p> </o:p>

<o:p> </o:p>

2.         indent()  － void<o:p>

<o:p> </o:p>

<o:p> </o:p>

3.         toggle()  － void<o:p>

<o:p> </o:p>

4.         expand() － void<o:p>

<o:p> </o:p>

<o:p> </o:p>

5.         collapse()       － void<o:p>

<o:p> </o:p>

6.         expandAll()   － void<o:p>

<o:p> </o:p>

<o:p> </o:p>

7.         collapseAll()  － void<o:p>

<o:p> </o:p>

8.         expandChildren() － void<o:p>

<o:p> </o:p>

<o:p> </o:p>

9.         collapseChildren()       － void<o:p>

<o:p> </o:p>

10.     getNextSibling()   －    返回 WebFXTreeItem 的引用 <o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

11.     getPreviousSibling()    －    返回 WebFXTreeItem 的引用 <o:p> </o:p>

<o:p> </o:p>

12.     toString()<o:p>

<o:p> </o:p>

<o:p> </o:p>

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(“Item<!---->));

root.all(new WebFXTreeItem(“Item));

root.all(new WebFXTreeItem(“Item));

<o:p> </o:p>

2.4     输出

document.write(root);

3       高级应用

3.1     添加目录

var   root = new WebFXTree(“Root”);

root.all(new WebFXTreeItem(“));

var folder = new WebFXTreeItem(“);

root.add(folder);

foldr.all(new WebFXTreeItem(“));

folder.all(new WebFXTreeItem(“));

root.all(new WebFXTreeItem(“));

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(“));

var folder = new WebFXTreeItem(“);

root.add(folder);

var t21 = new WebFXTreeItem(“);

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

foldr.all();

folder.all(new WebFXTreeItem(“));

root.all(new WebFXTreeItem(“));

document.write(root);

onlylife 2006-05-30 12:57 发表评论