xloadtree实现动态树的加载

Web应用中很多地方需要用到树型结构，xloadtree为我们提供了一种比较好的解决方案，主要的实现思想是：xloadtree可以方便生成跟节点，然后动态读取xml文件，该xml文件存放子节点的信息，加载所有子节点。文件包括api,usage,demo等可以从网上下载到。下面以中国的各省市为例简单介绍动态树的加载。

资源文件的导入。提供的资源文件包括xtree.js，xloadtree.js，xmlextras.js，xtree.css等，在页面中引入这些文件。其中，要注意的是，xtree.js要放在最前面，不然会冲突。

通过下面的代码生成树。此代码是js代码：

<script type="text/javascript">

       var tree = new WebFXTree("中国");           生成根节点

       tree.add(new WebFXTreeItem("湖南"));     在根节点下添加子节点湖南，江苏，湖北等

       tree.add(new WebFXLoadTreeItem("江苏","provience.xml")); 动态加载江苏省的各市

       tree.add(new WebFXTreeItem("湖北"));      

       document.write(tree);

</script>

其中湖南和湖北都是静态的，江苏省下面各市的加载时动态加载provience.xml文件的，该xml文件存放了各市的信息，以标签<tree>组织，如下

<?xml version="1.0" encoding="UTF-8"?>

<tree>

       <tree text="南京" src="diqu.xml"/>

       <tree text="无锡"/>

       <tree text="常州"/>

</tree>

如此可以动态加载到江苏下的各个子节点。

另外南京这个节点通过src引用了其他的diqu.xml文件，该文件中存放了南京市的各个区，也可以加载上来。diqu.xml文件如下面的格式，跟上面的一样：

<?xml version="1.0" encoding="UTF-8"?>

<tree>

       <tree text="栖霞"/>

       <tree text="建邺"/>

       <tree text="鼓楼"/>

       <tree text="玄武"/>

</tree>

好了，部署项目，就可以看到动态树加载出来了。如下图。

运行效果：
[img]http://dl.iteye.com/upload/attachment/289644/64152a4f-cd5c-363a-adde-df364eadf492.jpg[/img]
展开江苏节点：

[img]http://dl.iteye.com/upload/attachment/289646/b6f17bb6-6096-3cd4-aeca-0164ee831f44.jpg[/img]

展开南京节点：

[img]http://dl.iteye.com/upload/attachment/289648/e8687ff4-9cf4-3c5e-8824-37cf305ec8a4.jpg[/img]

xloadtree规定支持xml格式存放的文件，必须以tree作为标签。当然操作数据库的时候，

可以先把数据库信息加载成xml格式，然后再读取xml配置生成树。