打造基于jQuery的高性能TreeView

最新推荐文章于 2022-07-12 20:38:21 发布
最新推荐文章于 2022-07-12 20:38:21 发布
阅读量605 收藏
点赞数
分类专栏： Java 文章标签： jquery function class path url null

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

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

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

小丫111111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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)
最新发布
unber的博客
06-10 868
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。
JQuery DataTable 使用教程
08-10 4779
Datatables官方网站Datatables简介DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的如何使用在做
jquery操作节点；jquery遍历节点
猿猿网页设计
12-11 690
有些方法获取的是元素是集合，方法是要用单个元素调用的。例如：jquery遍历，js一些方法等     为某一元素添加子节点 方法：append（）； 格式：[获取到此元素].append('[要添加的子元素格式]'); 例子： $("#mydiv").append("我有一个梦想！"); $("#mydiv").append("我有一个梦想！"); $("#mydiv").
打造基于jQuery的高性能TreeView(asp.net)
12-11
那我要打造的TreeView就是为了实现这个5个主要指标的。 先来看下效果图 上图是中国行政区域的数据树，总共得节点是3500+。 那么我们要开工了； 1：第一个确定的节点Dom结构（即用什么样的HTML来构建节点） 比较土...
ASP.NET中基于JQUERY的高性能的TreeView补充
12-04
下面贴上完整的代码，我走了很多弯路，原因就是看了回复中... 代码如下: [removed][removed] [removed][removed] <link href=”second.css” rel=”stylesheet” type=”text/css” /> [removed] $(function(){
jQuery的高性能TreeView源码(带CheckBox)
11-17
jQuery的高性能TreeView源码(带CheckBox) 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3：Checkbox树（可能是静态树也可能是异步树...
Jquery-节点遍历4种方法
SYQ15544423296的博客
07-12 2665
Jquery-节点遍历4种方法
Jquery的TreeView控件工具
辐_射的博客
06-07 1056
ItcastOA 系统管理 部门管理 岗位管理 岗位添加 岗位删除 用户管理 审批流转 $("#tree").treeview();
jquery插件TreeViewt实现动态树状结构
Oranq的博客
03-31 3665
html> html lang="en"> head> meta charset="UTF-8"> title>一款jquery插件TreeViewt实现动态树状结构title> script src="http://code.jquery.com/jquery-latest.js">script> link rel="stylesheet" href="css/
html5 jstree树形菜单,Javascript树型菜单(含源码)
weixin_34345947的博客
07-02 702
类型：音频处理大小：1M语言：中文 评分：5.1标签：立即下载看到园友发表了一篇关于JS树的文章，看了之后，觉得应该可以精简不少代码，想到了以前做的项目里面用到了一个JS树，于是试着修改了一下，现把代码贴出来与大家共享，还请大家多扔砖头！--%>var tree;window.onload = function(){if (tree != "") {tree = new treeview("...
HTML+JS+CSS自定义树形菜单
热门推荐
u013267865的专栏
03-28 2万+
小编最近做项目的时候时常用到树形菜单（Treeview），一直用的是别人的插件，但有时候不符合自己的页面风格,修改样式、图标什么的都不方便，所以在这里我急写个方便修改样式什么的。 下面开始... 应用到技术：JavaScript/Css/HTML IDA：VS 2010   首先构造一下思路，需要哪些文件 1、js文件 2、Css文件 3、Html文件 4、图标 5、Juuer
html5 tree view css,一个TreeView 样式表
weixin_39882948的博客
06-22 845
定义样式表1 HTML标记定义...`1、多个属性必须要用；分开·2、background-p_w_picpath:url(:/new/prefix1/p_w_picpaths/icon_num_1.png);设置背景图片background-position:center设置背景图片居中显...1.样式复用，方便网站的后期维护； 2.实现页面的精确控制，实现精美...
【原】根据网站动态目录生成树结构，并用TreeView输出【提供源码下载，有详细注释】...
weixin_34270606的博客
02-05 121
各位博友好，本着共享的原则，本人花了点时间写了个这棵树，虽然简单，但是应该很实用。 我知道我们可以使用 Web.sitemap 来实现，但是用Web.sitemap 需要预先写好配置，我写这个就不需要考虑配置了。 比如说你的目录改变了，那么自动生成树也会跟着变动，下面贴代码： MyWebsiteTreeView.aspx&lt;%@ Page Language="C#" AutoEventW...
树形菜单控件
01-11 5428
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。   主页:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://
Bootstrap TreeView Demo(这是一个bootstrap treeview的demo
wangzibai的博客
09-03 1168
Bootstrap TreeView Demo 这是一个bootstrap treeview的demo 本项目通过springboot整合bootstrap实现从前台通过ajax向后台发送请求，后台通过通过字符拼接返回json数组给前台，前台再通过字符拼接结合TreeView实现树形控件的显示。 1.TreeView实现单点收起展示的小技巧 这个就直接给链接了原作者写的很好 给bootstrap-...
jQuery.TreeView插件实现树状导航（十三）
weixin_30357231的博客
09-25 178
一：jQuery.TreeView插件简介 该插件的特点： 1、支持静态的树，即一次性将全部数据加载到客户端。 2、支持异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3、支持节点级联。 4、能够承载大数据量，并性能表现优异。 5、支持主流浏览器。 6、使用方便官方网站：http://bassistance.de/jquery-plugins/jquery-plugi...
jquery treeview
05-26
jQuery Treeview 是一个用于创建可折叠树形结构的 jQuery 插件。它可以帮助开发人员轻松地创建具有层级结构的菜单、导航、目录等，并且可以通过点击展开或折叠子项。 该插件提供了许多选项和回调函数，可以自定义树...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值