打造jQuery的高性能TreeView

最新推荐文章于 2024-03-09 15:45:18 发布
最新推荐文章于 2024-03-09 15:45:18 发布
阅读量171 收藏 1
点赞数
文章标签： 数据结构与算法 大数据 json

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

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

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

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

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

weixin_33744854
关注
打造基于jQuery的高性能TreeView(下)
hy840429的专栏
05-13 881
第一步：自然是所有Jquery的控件的第一步都是搭这个架子，兼容JQuery和$避免闭包，避免和其他类库冲突，接受一个参数（是个对象）1.;(function($)　{2.　　　　　//也可以使用$.fn.extend(treeview:function(setting){})3.　　　　$.fn.treeview　=　function(settings)　{4.　　　　}5.　6.})(jQ
一些有用的jQuery插件
03-18
文件"打造基于jQuery的高性能TreeView - Xuanye's blog - 博客园.mht"很可能是一个包含详细教程的网页文件，作者可能详细解释了如何使用jQuery创建高性能的树形视图，可能涉及了优化技巧、性能测试和实际应用案例。...
jquery treeview控件
03-21
用jquery写的一个treeview控件类，树形目录结构采用静态json数据，动态加载节点。
打造基于jQuery的高性能TreeView
weixin_34388207的博客
10-26 226
UPDATE:回答网友提出的设置节点的自定义图片的问题，同时欢迎大家提问，我尽量在第一时间回复，详见最后 2009-11-03 项目中经常会遇到树形数据的展现，包括导航，选择等功能，所以树控件在大多项目中都是必须的。那一个实用的树应该具备什么功能呢？ 根据我的项目实践情况，主要是几个关键点： 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节...
jquery treeview 树形插件
weixin_34179762的博客
01-16 378
jquery treeview 插件参数说明 treeview开源地址：https://github.com/jzaefferer/jquery-treeview 1、animated：String or Number 设置展开子节点时的显示速度，有 slow、normal、fast 或者指定速度值，与 jQuery 的 hide（show）中的 speed 参数相似。 这...
jQuery 树型菜单插件(Treeview) 【提供了一个无序灵活的可折叠的树形菜单。试用于一些菜单的导航，支持基于 cookie 的持久性菜单。】
云上
07-05 403
jQuery 树型菜单插件(Treeview) jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。试用于一些菜单的导航，支持基于 cookie 的持久性菜单。 id="browser" class="filetree treeview-famfamfam"> class="folder">Folder 1 class="folder">I
jQuery treeview 树形菜单插件 v1.4
05-12
内容索引:脚本资源,jQuery,treeview,树形菜单　　jQuery treeview 是一款来自jQuery的树形菜单插件，支持无限制扩展，支持动态添加菜单项，可以配合ASP/PHP/等动态语言完成漂亮的无刷新动态树状菜单，当前版本号 v1.4，官方包中含有示例。
打造基于jQuery的高性能TreeView(asp.net)
12-11
在构建基于jQuery的高性能TreeView（ASP.NET）时，我们需要考虑几个关键点，以确保最终的组件能满足特定的需求。首先，支持静态树意味着一次性将所有数据加载到客户端，这需要优化DOM结构以处理大量数据，避免内存和...
构建高性能jQuery TreeView：ASP.NET实现
"打造高性能的jQuery TreeView，...总结来说，打造基于jQuery的高性能TreeView需要综合考虑数据处理、DOM结构、样式设计和浏览器兼容性等多个因素，通过合理的优化策略，实现一个功能齐全、性能优秀的树形视图控件。
jquery.treeview
李义星
03-31 227
第一步：装入所需文件 在HTML文档的标识里加入下面代码： XML/HTML Code复制内容到剪贴板 script> script> script> 第二步：添加HTML代码 在HTML文档的标识里加入下面代码： XML/HTML Code复制内容到剪贴板 div> 第三步：添加JavaScrip...
jquery-treeview
12-06
jquery-treeview
jQuery 树型菜单插件(Treeview)
01-19
jQuery 树型菜单插件(Treeview) jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。      Folder 1                       Item 1.1                                       Item 1.1.1                                            Folder 2                                       Subfolder 2.1      
jquery插件库(jquery.treeview插件库)
06-02
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插
jQuery TreeView
weixin_30502965的博客
03-10 169
找了一个jQuery的树形插件，自己添加了增、删、改、查，与数据库交互(SQL Server 2005)。 支持3层节点，要扩展也可以，并不完善，欢迎提出意见 用到的js文件、css文件、图片文件：http://files.cnblogs.com/W2N/treeview.rar 截图： 客户端主要代码： Code<divid="divMove"><...
jQuery Treeview
最新发布
gitblog_00007的博客
03-09 701
jQuery Treeview 去发现同类优质开源项目:https://gitcode.com/ 是一个轻量级的 JavaScript 插件，用于将 HTML 列表或表格转换为树状视图。它可以帮助您在网页上构建易于浏览、操作和交互的目录结构。 功能与用途 树状视图创建：jQuery Treeview 可以将任何 HTML 列表或表格转换为树状视图。您可以轻松地组织数据，让访问者能够快速找到所需的...
jQuery Treeview(树形图)
张默的博客
01-14 5336
jQuery Treeview jQuery Treeview 插件用于把一个无序列表改为一个可扩展的可折叠的树，有利于导航。该插件支持位置和基于 cookie 的持久性。 文件树示例 在使用jQuery Treeview之前，HTML文档中需要包含jquery.js、jquery.treeview.js、jquery.treeview.css几个文件，你可以从官网下载。 &lt;ul ...
jQuery treeview的简单用法
weixin_30367945的博客
05-06 336
　　最近的项目要用到treeview插件，刚好就自己整理一下这方面的资料。 　1.文档树示例 　　最简单的一个例子就是文档树的实现。效果如下图所示。 　　 　　在使用treeview之前，html文档中需要包含几个jquery.js、jquery.treeview.js、jquery.treeview.css几个文件。具体的请从官网下载。记住jquery.js的引用必须在jque...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值