您的位置:知识库 » Web前端

打造基于jQuery的高性能TreeView

作者: 假正经哥哥  来源: 博客园  发布时间: 2009-10-27 16:33  阅读: 41381 次  推荐: 8   原文链接   [收藏]  

  项目中经常会遇到树形数据的展现,包括导航,选择等功能,所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢?

  根据我的项目实践情况,主要是几个关键点:

  1:支持静态的树,即一次性将全部数据加载到客户端。

  2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。

  3:Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点)

  4:能够承载大数据量,并性能表现优异

  5:能够在主流浏览器中运行良好

  那我要打造的TreeView就是为了实现这个5个主要指标的。

  先来看下效果图

image

  上图是中国行政区域的数据树,总共得节点是3500+。

  那么我们要开工了;

  1:第一个确定的节点Dom结构(即用什么样的HTML来构建节点)  

  • 比较土的是table套table的(样式上好控制,但是大数据量,和层次较深的树,这种结构肯定顶不住的)
  • 还有一种是比较新鲜的UL套LI的方式,这是现下很多书采取的方式如Jquery.treeview就是采用的这种格式,好处比较明显就是结构简洁明了,
    而且在不支持Js的浏览器上,同样也能呈现出树的形状(这种情况其实咱可以忽略),但是Jquery.treeview的节点在IE下,特别是IE6下无法被内部元素撑开,(IE7,8当达到一定深度时无法撑开),请奇怪的现象(我猜测是因为使用padding来做缩进,margin-left:负值来控制图标位置有关,但是修改起来难度也较大),在这种情况下书会变形(Jquery.treeview)就有这种问题,只能通过设置节点的width来解决。

image

  JQuery.treeview的节点结构

image

  Jquery.TreeView  IE6 下 展开第三级即出现错位

image IE8下展开到第5级

  • 还有一些是div套table的方式,CSDN的导航树就是这种,是种折中的方法(节点也不算太复杂,而且CSS也比较好写),如下图所示
    image

 

  而我采用的也是第二种方式,但是缩进采用了填空的方式,即缩进的位置用空白的图片填充来避免Jquery.treeview的问题

image

  我的树节点结构

  确定了节点的HTML我们就可以来写CSS了。有了效果图,有个节点结构接着就编写CSS了

  下面是CSS的完整代码

Code

  上面了树的基本样式外,定义了一个有+号带line的样式和+号不带line的样式

image 这就是那个+号带line的样式

  css中所用到的所有图片

arrows elbow elbow-end elbow-end-minus elbow-end-minus-nl elbow-end-plus elbow-end-plus-nl elbow-line elbow-minus elbow-minus-nl elbow-plus elbow-plus-nl folder folder-open leaf loading

checkbox_2 checkbox_0 checkbox_1

  2:确定数据结构

  这样的结构有个好处就数据本身是带层次的,非常利于遍历,在后面的级联关联中会看到

Code

  3: 面子做好了那就开始做里子了,编写脚本(Javascript)

  我是JQuery得拥护者,所以自然js的框架自然是采用Jquery了

  先上个完整代码,再逐一分析

Code

  第一步:自然是所有Jquery的控件的第一步都是搭这个架子,兼容JQuery和$避免闭包,避免和其他类库冲突,接受一个参数(是个对象)

Code

  那第二步:给控件加一些参数默认参数,同时能调用方法$.extend让最终调用时的参数覆盖默认的(如果没有则使用默认)

Code

  第三步:生成默认数据的HTML(根据我们的分析节点的Dom结构,数据的数据结构,生成节点那是非常的简单),,添加到当前容器中。最后是注册事件这里有一个非常重要的地方,即懒加载(没有展开的节点HTML是不生成的),这就要求我们在树内部要维护一套数据(开销很小),对于性能的提升那是相当的明显。另外一个重要的地方,就是使用一次生成所有展开节点的HTML并通过innerHTML属性来生成Dom,而不是通过append操作,因为直接操作innerHTML比通过dom原生的方法要快上N倍(节点越多,N越大),切记切记!

Code
   在节点生成过程中,同时可生产节点的Path(节点路径),方便检索

Code

  注册事件,接受参数parent,即从某一父节点开始附加事件(因为做了个hover效果,所以事件是在每个节点上,如果取消该效果,事件可直接附加Tree上通过Event的srcElement来分发可略提升性能

Code

  这里最主要的还是node的click事件,因为他要处理的事情很多,如树的展开收缩(如果子节点不存在,但是hasChildren为真,同时 complete属性不为真则需要异步加载子节点,如子节点存在,但是没有Render那么就要Render),点击checkbox要出发级联的事件和 oncheckbox事件,点击其他则触发配置条件的nodeonclick事件,这一切都通过前面event的源元素的class来区分点击的对象

Code

  展开节点,异步请求的部分代码应该不是很复杂就不细诉了,关键来讲一下级联
  级联有两个问题要处理,第一个是遍历子节点,第二个是上溯到祖节点,因为我们的数据结构这两个操作都显得非常简单

Code

  找到节点的同时都会触发check这个回调函数,来判断当前节点的状态,详细请看下面代码中的注释部分应该是比较清晰,描写了这个过程

Code

  至此我们树的主体功能已经完全实现了。其他就是公开一些方法等,大家可详见代码,示例中公开了两个一个当前选中的所有节点,另外一个当前的节点。 

  大家可以通过以下网址查看文中的示例,selected拼错了,大家海涵! windows azure部署还是麻烦懒得修改了3500+节点一次加载,大家可以点击根节点的全选来看看速度

   http://jscs.cloudapp.net/ControlsSample/BigTreeSample 

  异步加载,按需加载的情况也是非常常用的,使用的是SQL Azure服务器在美国ing,所以可能异步有点慢,本地数据源那是瞬间的

   http://jscs.cloudapp.net/

8
0
 

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻