读书人

xloadtree兑现动态树的加载

发布时间: 2012-11-08 08:48:11 作者: rapoo

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

资源文件的导入。提供的资源文件包括xtree.js,xloadtree.js,xmlextras.js,xtree.css等,在页面中引入这些文件。其中,要注意的是,xtree.js要放在最前面,不然会出错,原因不知,可以存在相互依赖。

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


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

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



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

运行效果:

展开江苏节点:



展开南京节点:



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

可以先把数据库信息加载成xml格式,然后就好生成树了,比较复杂一点。


读书人网 >Web前端

热点推荐