打造jQuery的高性能TreeView

时间  2020-09-20
标签 打造 jquery 高性能 treeview 栏目 JQuery 繁體版
原文   原文链接

UPDATE:回答网友提出的设置节点的自定义图片的问题，同时欢迎你们提问，我尽可能在第一时间回复，详见最后 2009-11-03javascript

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

根据个人项目实践状况，主要是几个关键点：html

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

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

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

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

5：可以在主流浏览器中运行良好ajax

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

先来看下效果图windows

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的完整代码

上面了树的基本样式外，定义了一个有+号带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：肯定数据结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var menudata = [{
     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了

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

 

第一步：天然是全部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
var dfop ={
                 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越大），切记切记！
?
1
2
3
4
5
6
7
8
9
10
11
12
13
var treenodes = dfop.data; //内部的数据，其实直接用 dfop.data也能够
var me = $( this );
var id = me.attr( "id" );
if (id == null || id == "" ) {
     id = "bbtree" + new Date().getTime();
     me.attr( "id" , id);
} //全局惟一的ID
 
var html = [];
buildtree(dfop.data, html); //生成展开节点的HTML，push到数组中
me.addClass( "bbit-tree" ).html(html.join( "" ));
InitEvent(me); //初始化事件
html = null ;
在节点生成过程当中，同时可生产节点的Path（节点路径），方便检索
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (nd.hasChildren) { //存在子节点
     if (nd.isexpand) { //同时节点已经展开则输出子节点
         ht.push( "<ul  class='bbit-tree-node-ct'  style='z-index: 0; position: static; visibility: visible; top: auto; left: auto;'>" );
         if (nd.ChildNodes) {
             var l = nd.ChildNodes.length;
             for ( var k = 0; k < l; k++) { //递归调用并生产节点的路径
                 nd.ChildNodes[k].parent = nd;
                 buildnode(nd.ChildNodes[k], ht, deep + 1, path + "." + k, k == l - 1);
             }
         }
         ht.push( "</ul>" );
     }
     else { //不然是待输出状态
         ht.push( "<ul style='display:none;'></ul>" );
     }
}
注册事件，接受参数parent，即从某一父节点开始附加事件（由于作了个hover效果，因此事件是在每一个节点上，若是取消该效果，事件可直接附加Tree上经过Event的srcElement来分发可略提高性能）
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function InitEvent(parent) {
           var nodes = $( "li.bbit-tree-node>div" , parent);
           nodes.each( function (e) {
               $( this ).hover( function () {
                   $( this ).addClass( "bbit-tree-node-over" ); //鼠标浮动节点的样式变化
               }, function () {
                   $( this ).removeClass( "bbit-tree-node-over" );
               })
               .click(nodeclick) //node的onclick事件，这个是重点哦
               .find( "img.bbit-tree-ec-icon" ).each( function (e) { //arrow的hover事件，为了实现vista那个风格的
                   if (!$( this ).hasClass( "bbit-tree-elbow" )) {
                       $( this ).hover( function () {
                           $( this ).parent().addClass( "bbit-tree-ec-over" );
                       }, function () {
                           $( this ).parent().removeClass( "bbit-tree-ec-over" );
                       });
                   }
               });
           });
}
这里最主要的仍是node的click事件，由于他要处理的事情不少，如树的展开收缩（若是子节点不存在，可是hasChildren为真，同时complete属性不为真则须要异步加载子节点，如子节点存在，可是没有Render那么就要Render）,点击checkbox要出发级联的事件和oncheckbox事件，点击其余则触发配置条件的nodeonclick事件，这一切都经过前面event的源元素的class来区分点击的对象
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
   function nodeclick(e) {
     var path = $( this ).attr( "tpath" ); //获取节点路径
     var et = e.target || e.srcElement; //获取事件源
     var item = getItem(path); //根据path获取节点的数据
     //debugger;
     if (et.tagName == "IMG" ) {
         // +号须要展开，处理加减号
         if ($(et).hasClass( "bbit-tree-elbow-plus" ) || $(et).hasClass( "bbit-tree-elbow-end-plus" )) {
             var ul = $( this ).next(); //"bbit-tree-node-ct"
             if (ul.hasClass( "bbit-tree-node-ct" )) {
                 ul.show();
             }
             else {
                 var deep = path.split( "." ).length;
                 if (item.complete) {
                     item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item);
                 }
                 else {
                     $( this ).addClass( "bbit-tree-node-loading" );
                     asnyloadc(ul, item, function (data) {
                         item.complete = true ;
                         item.ChildNodes = data;
                         asnybuild(data, deep, path, ul, item);
                     });
                 }
             }
             if ($(et).hasClass( "bbit-tree-elbow-plus" )) {
                 $(et).swapClass( "bbit-tree-elbow-plus" , "bbit-tree-elbow-minus" );
             }
             else {
                 $(et).swapClass( "bbit-tree-elbow-end-plus" , "bbit-tree-elbow-end-minus" );
             }
             $( this ).swapClass( "bbit-tree-node-collapsed" , "bbit-tree-node-expanded" );
         }
         else if ($(et).hasClass( "bbit-tree-elbow-minus" ) || $(et).hasClass( "bbit-tree-elbow-end-minus" )) {  //- 号须要收缩                   
             $( this ).next().hide();
             if ($(et).hasClass( "bbit-tree-elbow-minus" )) {
                 $(et).swapClass( "bbit-tree-elbow-minus" , "bbit-tree-elbow-plus" );
             }
             else {
                 $(et).swapClass( "bbit-tree-elbow-end-minus" , "bbit-tree-elbow-end-plus" );
             }
             $( this ).swapClass( "bbit-tree-node-expanded" , "bbit-tree-node-collapsed" );
         }
         else if ($(et).hasClass( "bbit-tree-node-cb" )) // 点击了Checkbox
         {
             var s = item.checkstate != 1 ? 1 : 0;
             var r = true ;
             if (dfop.oncheckboxclick) { //触发配置的函数
                 r = dfop.oncheckboxclick.call(et, item, s);
             }
             if (r != false ) { //若是返回值不为false，即checkbxo变化有效
                 if (dfop.cascadecheck) { //容许触发级联
                     //遍历
                     cascade(check, item, s); //则向下关联
                     //上溯
                     bubble(check, item, s); //向上关联
                 }
                 else {
                     check(item, s, 1); //不然只管本身
                 }
             }
         }
     }
     else { //点击到了其余地方
         if (dfop.citem) { //上一个当前节点
             $( "#" + id + "_" + dfop.citem.id).removeClass( "bbit-tree-selected" );
         }
         dfop.citem = item; //此次的当前节点
         $( this ).addClass( "bbit-tree-selected" );
         if (dfop.onnodeclick) {
             dfop.onnodeclick.call( this , item);
         }
     }
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//遍历子节点
function cascade(fn, item, args) {
     if (fn(item, args, 1) != false ) {
         if (item.ChildNodes != null && item.ChildNodes.length > 0) {
             var cs = item.ChildNodes;
             for ( var i = 0, len = cs.length; i < len; i++) {
                 cascade(fn, cs[i], args);
             }
         }
     }
}
//冒泡的祖先
function bubble(fn, item, args) {
     var p = item.parent;
     while (p) {
         if (fn(p, args, 0) === false ) {
             break ;
         }
         p = p.parent;
     }
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
     function check(item, state, type) {
     var pstate = item.checkstate; //当前状态
     if (type == 1) {
         item.checkstate = state; //若是是遍历子节点，父是什么子就是什么
     }
     else { // 上溯 ，这个就复杂一些了
         var cs = item.ChildNodes; //获取当前节点的全部子节点
         var l = cs.length;
         var ch = true ; //是否不是中间状态 半选
         for ( var i = 0; i < l; i++) {
             if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) {
                 ch = false ;
                 break ; //他的子节点只要有一个没选中，那么他就是半选
             }
         }
         if (ch) {
             item.checkstate = state; //不是半选，则子节点是什么他就是什么
         }
         else {
             item.checkstate = 2; //半选
         }
     }
     //change show 若是节点已输出，而其先后状态不同，则变化checkbxo的显示        
     if (item.render && pstate != item.checkstate) {
         var et = $( "#" + id + "_" + item.id + "_cb" );
         if (et.length == 1) {
             et.attr( "src" , dfop.cbiconpath + dfop.icons[item.checkstate]);
         }
     }
}

至此咱们树的主体功能已经彻底实现了。其余就是公开一些方法等，你们可详见代码，示例中公开了两个一个当前选中的全部节点，另一个当前的节点。 

你们能够经过如下网址查看文中的示例，selected拼错了，你们海涵！ windows azure部署仍是麻烦懒得修改了3500+节点一次加载，你们能够点击根节点的全选来看看速度

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

异步加载，按需加载的状况也是很是经常使用的，使用的是SQL Azure服务器在美国ing，因此可能异步有点慢，本地数据源那是瞬间的

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

FAQ：

1：如何设置每一个节点不一样的图标？

回答：

其实不用扩展，自己就支持，只是没有说明而已，咱们来看一下这个代码吧？在BuildNode方法中有这么一句？      
if (nd.classes) { cs.push(nd.classes); }

在节点的数据结构中能够设置属性classes ，该属性将做为节点特殊的Css Class 添加到节点上。那么利用这点，就能够设置节点的图标了

image

而后就是编写一个Style 便可

image

最后来看下效果吧？

image

 

 

 出处：http://www.cnblogs.com/xuanye/archive/2009/10/26/xjplugin_jquery_tree.html

 demo下载地址： demo 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程