zoukankan      html  css  js  c++  java

  • 打造jQuery的高性能TreeView

    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 
  • 相关阅读:
    接入SDK
    GSoap的使用（调用webservice接口）
    NSString/NSMutableString 字符串处理
    iOS Base SDK & Deployment Target 区别&设置
    No identities are available for signing 的解决办法
    GitHub 代码托管Mac下
    代理&Block 传值
    UItextField 的简单控制
    NSPredicate 的使用
    tableView 删除一行后下一行点击事件被忽略
  • 原文地址：https://www.cnblogs.com/mq0036/p/8482519.html
Copyright © 2011-2022 走看看