最近在做一个树状结构显示的小项目,其中要用到将大量数据异步显示在web页面里,从而就开始了我的大范围查找树的样例和过程。树状结构显示据我看到的比较流行的有dtree、xtree、EXTtree、E3tree、ztree。在本人的项目中使用的是ztree,它也是所有中功能最强大的树。下面我分别介绍一下它们。

1 dtree

     dtree是就是一个js的开源树形组件,使用特别简单,可以根据标签打开新的链接,自定义显示图标等等。优点是功能简单、实用,但是不支持checkbox,不支持动态增加,删除节点,移动节点。当然如果可以利用Jquery等其他东西也是可以做到动态添加的,不过这样添加的代码就比较多。

参考资料:

     a 官方网站:http://destroydrop.com/javascripts/tree/

     b  http://blog.163.com/prevBlogPerma.do?host=fanxiaoqc@126&srl=331419002010111054056395&mode=prev&fromdm&fromSearch&isFromSearchEngine=yes

2 xtree

     xtree是基于ajax实现的属性菜单。它可以定制自己的icon和链接,xtree是基于对象的,它也是比较简单的一种树形结构。与dtree相比,可以动态的增加或者删除节点,直接有API方法可以提供。

参考资料:

     a 官方网站:http://webfx.eae.net/dhtml/xtree/index.html

3 ExtTree

  ExtTree是一个继承自Panel的树状组件,是EXTJS的一个组件。我们在使用时,直接以对象的方式进行调用。其中ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。我们可以在网上找到很多关于ExtJs的学习书籍。

4 E3tree

  E3Tree是E3平台下用于构造树形UI(menu,tree,outlookbar)的一个组件。它集成了现有的xtree、exttree和yuitree,能够在jsf/webwork/strtus/spring mvc 等等框架使用。我们可以通过学习它的参考手册对它进行系统的学习。

5 zTree

  zTree是一个依靠 jQuery 实现的多功能 “树插件”,支持选择框等显示,动态更改图标,提供多种事件响应回调,而且异步数据功能强大。相信涉及大型项目或者大量数据时,它的使用将非常方便。

     利用ztree和Dwr框架可以轻松的实现后台数据的异步加载,他们都是利用Ajax进行后台数据的异步刷新的,页面不会重新加载,而且速度非常快。可以参考这篇博文

参考资料

     a 官方网站:http://www.baby666.cn/v3/main.php#_zTreeInfo

 

    以上便是我这两天收集、归纳的结果,如果有什么错误的地方,请联系我。谢谢!