dtree学习笔记：实现基本功能与XML数据解析

让我们看看第一个 xTree 用法的例子, 注意我们在第二个树节点的地方使用了对应的可载入树节点代替了 WebFXTreeItem.

var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 3"));
document.write(tree);
The code above should result in something looking like this:

上面的代码将会产生如下结果:


When Tree Item 2 is expanded the file tree.xml is loaded and during the load a dummy tree item is inserted to show that the subcontent is loading. This looks something like this:

当 Tree Item 2 被展开的时候文件 tree.xml 被载入, 在加载的时候插入一个临时的树节点来显示子节点正在被载入中. 看起来就像这样:


The XML format XML 文件格式
To be able to transform the xml file to an xTree the xml file must be of a certain format. Below is the xml code from the file tree.xml:

要想从 xml 文件转换成 xTree, xml 文件必须符合一个固定的格式. 下面是文件 tree.xml 中的 xml 代码:

<?xml version="1.0"?>

<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 text="Load &quot;tree1.xml&quot;" src="tree1.xml" />
   </tree>

   <tree text="Loaded Item 3" />
</tree>
When this xml file has been loaded and inserted into the tree it looks something like this:

当这个 xml 文件加载并且插入到树中后它看起来就像这样:


Notice how the XML structure can contain nested tree items and tree items that points to other xml files. Notice also the top level tree item that is used to contain all the tree items that are supposed to be inserted into the current WebFXLoadTreeItem.

注意 XML 的结构, 它可以包含嵌套的子节点以及指向其它xml文件的子节点. 也请留意最顶端的树节点被用来包含所有的假定为要插入当前WebFXLoadTreeItem的所有子节点.

To see what xml attributes are supported on the tree items see the api page.

要了解树节点支持什么样的 xml 属性, 请浏览 api 页.

介绍
使用说明
API
实现
演示
下载

作者: Erik Arvidsson
中文翻译: BeanSoft

api.html


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.