XTREE随笔

1.XTREE简介：

XTREE是一个基于AJAX实现的树形菜单。它的原理就是每次都只加载当前结点下的所有结点，而对开发人员来说，就是只需要按一定的格式，生成一段XML代码。XTREE可以自己定制每个结点的ICON和链接。XTREE是基于对象的，通过XTREE，你无需再自己生成HTML代码，而只要生成相应的JS 对象就可以了。

2.官方网址：

http://webfx.eae.net/dhtml/xtree/index.html，可以在这里下载到XTREE最新的版本，也有XTREE的演示的DEMO。

3.XTREE的API：

XTREE的API很简单，就是一个抽象类WebFXTreeAbstractNode以及该抽象类的两个子类WebFXTree和WebFXTreeItem。这三个类的属性和构造函数，还有方法详见：http://webfx.eae.net/dhtml/xtree/api.html，上面写得很清晰。

4.XTREE学习笔记
    每个结点有一个状态叫做OPEN；如果结点为OPEN,则可以EXPAND;对于ITEM结点来说，永远返回FALSE;
    toggle()就是切换，如果为展开的，就收起；如果为收起的，就展开；
    XTREE生成的是静态树，它不能从XML中生成树，而是只能生成简单的静态的树，看构造函数的参数就可以知道【text】【action】
    --------------------------------------------------------------
    WebFXTreeAbstractNode:
    
    属性：
    id:唯一标识
    text: label
    action: 链接
    open: 标志位，boolean型，是否打开
    icon: 图标
    openIcon：打开时的图标
    parentNode：父结点的Reference
    childNodes: 子结点的Reference的集合
    
    方法：
    indent():缩进
    toggle():切换
    callapse():收起
    expand():展开
    callapseAll():收起全部
    expandAll():展开全部
    expandChildren():展开子结点
    callapseChildren():收起子结点
    getNextSibling():取得下一个兄弟结点的Reference
    getPreviousSibling():取得上一个兄弟结点的Reference
    toString():生成HTML代码
    
    ------------------------------------------------------------------
    WebFXTree:
    
    构造函数：new WebFXTree([text], [action], [behavior],[icon],[openIcon]);
    
    参数：
    text:
    action:
    behavior:
    icon:
    openIcon:
    
    属性：
    rendered 标志位，boolean类型，用于标记该树是否已经生成和显示。
    WebFXTreeAbstractNode的所有属性
    
    方法：
    getSelected():返回一个Reference，被选中的那个对象的Reference。
    setBehavior(sBehavior): classic,explorer;
    getBehavior():
    WebFXTreeAbstractNode的所有方法
    -------------------------------------------------------------------
    WebFXTreeItem:
    构造函数：
    new WebFXTreeItem([text],[action],[parent],[icon],[openIcon]);
    
    属性：
    WebFXTreeAbstractNode的所有属性
    
    方法：
    getFirst():返回第一个子结点的Reference
    getLast():返回嘴后一个子结点的Reference
    __________________________________________________________________________________________
    
5.XLoadTree学习笔记：
    XLoadTree与XTree的区别就在于，XTree只能生成静态树，而XLoadTree可以根据XML生成动态树。
    XLoadTree是由Xtree而来的，主要有两个类：WebFXLoadTree和WebFXLoadTreeItem,其中，WebFXLoadTree继承自WebFXTree，WebFXLoadTreeItem继承自WebFXTreeItem
    ---------------------------------------------------------------------
    WebFXLoadTree:
    
    构造函数：
    new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon) 
    
    参数：
    sXmlSrc:展开时需要用到的XML文件
    其余参数与WebFXTree一样
    
    属性：
    src: XML源文件
    loading: 标志位，boolean类型，表示正在加载XML文件
    loaded: 标志位，boolean类型， 表示XML文件已将加载完毕
    errorText: 错误描述
    WebFXTree中的所有属性
    
    方法：
    reload():重新加载XML文件
    WebFXTree中的所有方法
    -----------------------------------------------------------------------
    WebFXLoadTreeItem:
    
    构造函数：
    new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)
    参数：
    eParent:可选，该结点要加入到的结点的Reference
    
    属性：
    src: XML源文件
    loading: 标志位，boolean类型，表示正在加载XML文件
    loaded: 标志位，boolean类型， 表示XML文件已将加载完毕
    errorText: 错误描述
    WebFXTree中的所有属性
    
    方法：
    reload():重新加载XML文件
    WebFXTreeItem中的所有方法
    
    XML文件的格式：

xml 代码

XML文件的例子：

xml 代码

WebFXLoadTree

This object type is used to create the actual tree root and can be used to populate the tree with tree items loaded from an xml file.

这个对象类型用来创建实际的树的根节点, 并且可以被用来向树添加从一个 xml 文件中定义的树节点.

The WebFXLoadTree extends WebFXTree (see the xTree API) so all properties and methods provided by WebFXTree are available.

WebFXLoadTree 继承自 WebFXTree (请阅读 xTree API) , 因此WebFXTree提供的所有的属性和方法都可用.

Constructor 构造器

new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)

Name  名称	Description 描述
sText	The text label for the tree root. 树的根节点的文本标签.
sXmlSrc	The source for the xml file to load when expanded. 当展开时要加载的xml文件的源路径.
sAction	Optional. The action (uri) associated with the tree root. 可选. 根节点关联的操作(uri地址).
sBehavior	Optional. The behavior of the tree. Valid values are "classic" and "explorer". When the value is set to "explorer" the default icon for an empty item is the same as the folder icon. 可选. 树的表现方式. 可用的值包括 "classic" 和 "explorer". 当值为 "explorer" 时空节点默认的图标和文件夹图标一样.
sIcon	Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed. 可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon	Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded. 可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.

Properties 属性

Name 名称	Description 描述
All properties from WebFXTree. WebFXTree 的所有属性.
src	The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file. 描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading	Read only. A boolean flag which is true if the xml file has started loading and not yet finished. 只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded	Read only. A boolean flag which is true if the xml file has been loaded. 只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText	Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string). 只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).

Methods 方法

Name 名称	Description 描述
reload()	Reloads the XML file from the server and recreates the children of this node. 重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.

WebFXLoadTreeItem

This object type is used to create tree items that can be added to the tree root, or to other tree items to create sub folders in the tree. When an WebFXLoadTreeItem is expanded an xml file is loaded that is then used to populate the item with child items.

这个对象类型用来创建可以加入树根节点的树节点, 或者可以作为子目录添加到别的树节点. 当一个 WebFXLoadTreeItem 节点被展开的时候, 将会加载用于填充子节点的 xml 文件.

The WebFXLoadTreeItem extends WebFXTreeItem (see the xTree API) so all properties and methods provided by WebFXTreeItem are available.

WebFXLoadTreeItem 继承自 WebFXTreeItem (请查看 xTree API), 因此WebFXTreeItem提供的所有的属性和方法都可用.

Constructor 构造器

new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)

Name 名称	Description 描述
sText	The text label for the tree item. 树节点的文本标签.
sXmlSrc	The source for the xml file to load when expanded. 当展开时要加载的xml文件的源路径.
sAction	Optional. The action (uri) associated with the tree item. 可选. 节点关联的操作(uri地址).
eParent	Optional. The parent WebFXTreeItem or WebFXTree that the item should be added to. 可选. 当前节点要添加进去的父节点, 可以为 WebFXTreeItem 或者 WebFXTree.
sIcon	Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed. 可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
sOpenIcon	Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded. 可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.

Properties 属性

Name 名称	Description 描述
All properties from WebFXTreeItem. 继承自 WebFXTreeItem 的所有属性.
src	The source to the xml file that decribes the sub trees. Notice that this is read-only after the xml file has started to load so any changes done to the source are only valid before the loading of the first file. 描述子树的xml文件的源路径. 注意这个值将在 xml 文件开始载入后变为只读, 所以任何对这个值的修改只在第一个文件载入之前生效.
loading	Read only. A boolean flag which is true if the xml file has started loading and not yet finished. 只读. 布尔变量, xml 文件开始加载但是尚未加载完的时候为 true.
loaded	Read only. A boolean flag which is true if the xml file has been loaded. 只读. 布尔变量, xml 文件加载完成的时候为 true.
errorText	Read only String. If the loading for any reason failed the reason can be found in the errorText property. If no error occured this is "" (an empty string). 只读字符串. 如果加载因为任何原因失败, 这个原因可以在 errorText 属性中找到. 如果没有错误它的值时 ""(空字符串).

Methods 方法

Name	Description
reload()	Reloads the XML file from the server and recreates the children of this node. 重新从服务器载入 XML 文件, 并重建这个节点的子节点.
All methods from WebFXTree. 所有继承自 WebFXTree 的方法.

The xml format xml 格式

The only valid element in the xml file is the tree item. A tree item can contain zero, one or more tree items.

xml 文件中唯一有效的元素就是 tree 节点. 一个tree节点可以包含零个,一个或者更多tree节点.

Attributes 属性

There are five valid attributes that you can provide on a tree item.

您可以为一个 tree 节点提供 5 个有效的属性.

Name 名称	Description 描述
text	Required. The text label for the tree item. 必需. 树节点的文本标签.
xmlSrc	Optional. The source for the xml file to load when expanded. 可选. 当展开时要加载的xml文件的源路径.
action	Optional. The action (uri) associated with the tree item. 可选. 节点关联的操作(uri地址).
icon	Optional. The icon image to use for this item. In case this item is a folder this will be used when the folder is closed. 可选. 节点所使用的图标文件. 如果这个节点是个文件夹, 这个值将在节点被关闭的时候使用.
openIcon	Optional. The icon image to use for this item when it is opened. This is only used for folder items that are opened/expanded. 可选. 节点打开时使用的图标文件. 这个值仅仅对文件夹节点被打开或者展开的时候有效.

DTD

The xml file does not have to be valid to work (only well formed) but if you want to ensure that you didn't do anything wrong you can use the following document type definition:

xml 文件并不必须是有效的格式才能工作(只需要良好的组织起来), 但是如果你想确保你没有写错, 可以使用下面的文档类型定义:

<!ELEMENT tree (tree*)>
<!ATTLIST tree
          text      CDATA   #REQUIRED
          src       CDATA   #IMPLIED
          action    CDATA   #IMPLIED
          icon      CDATA   #IMPLIED
          openIcon  CDATA   #IMPLIED>

To use the dtd in your xml file add a DOCTYPE to the head of your xml file. Below is tree.dtd.xml shown. This represents the same xml tree as in tree.xml with a DOCTYPE declaration.

在你的 xml 文件中使用这个 dtd 请在文件的开头包含一个 DOCTYPE. 下面显示的是 tree.dtd.xml . 这个表示了和 tree.xml 中相同的 xml 树, 只不过有一个 DOCTYPE 声明.

<?xml version="1.0"?>

<!DOCTYPE tree SYSTEM "tree.dtd">
<tree>
 <tree text="Loaded Item 1" action="href://webfx.eae.net" />
 <tree text="Loaded Item 2">
  <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
 </tree>
 <tree text="Load &quot;tree1.xml&quot;" src="tree1.xml" />
</tree>