打造基于jQuery的高性能TreeView（1）

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

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

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

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

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

4：能够承载大数据量，并性能表现优异

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

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

先来看下效果图

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

那么我们要开工了；

1：第一个确定的节点Dom结构（即用什么样的HTML来构建节点）

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

JQuery.treeview的节点结构

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

 IE8下展开到第5级

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

 

 

 

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

我的树节点结构

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

下面是CSS的完整代码

View Code

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

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

css中所用到的所有图片

               

  

2：确定数据结构

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

varmenudata = [{

    id:"0.1",//唯一的ID即可

    text:"Beyondbit UI Demo",

    hasChildren:true,

    isexpand:true,

    complete:true,

    ChildNodes: [{

        id:"0.1.1",

        text:"日期选择",

        hasChildren:true,

        isexpand:false,

        complete:true,

        ChildNodes: [{

            id:"0.1.1.1",

            text:"控件演示",

            value:"Testpages/datepickerDemo.htm",

            hasChildren:false,

            isexpand:false,

            complete:true,

            ChildNodes:null

        },

        ...

        ]

 

 

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

3： 面子做好了那就开始做里子了，编写脚本（Javascript）

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

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

View Code

 

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

?

1

2

3

4

5

6

;(function($) {

     //也可以使用$.fn.extend(treeview:function(setting){})

    $.fn.treeview = function(settings) {

    }

 

})(jQuery);

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

vardfop ={

                method:"POST",//默认采用POST提交数据

                datatype:"json",//数据类型是json

                url:false,//异步请求的url

                cbiconpath:"/images/icons/",//checkbox icon的目录位置

                icons: ["checkbox_0.gif","checkbox_1.gif","checkbox_2.gif"],//checkbxo三态的图片

                showcheck:false,//是否显示checkbox         

                oncheckboxclick:false,//点击checkbox时触发的事件

                onnodeclick:false,//点击node触发的时间

                cascadecheck:true,//是否启用级联

                data:null,//初始化数据            

                theme:"bbit-tree-arrows"//三种风格备选bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows

            }

        //用传进来的参数覆盖默认，没传则保留

        $.extend(dfop, settings);

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