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

vartreenodes = dfop.data; //内部的数据，其实直接用 dfop.data也可以

varme = $(this);

varid = me.attr("id");

if(id == null|| id == "") {

    id = "bbtree"+ newDate().getTime();

    me.attr("id", id);

}//全局唯一的ID

 

varhtml = [];

buildtree(dfop.data, html);//生成展开节点的HTML，push到数组中

me.addClass("bbit-tree").html(html.join(""));

InitEvent(me);//初始化事件

html = null;

在节点生成过程中，同时可生产节点的Path（节点路径），方便检索

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来分发可略提升性能）

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来区分点击的对象

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);
        }
    }
}

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

//遍历子节点
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这个回调函数，来判断当前节点的状态，详细请看下面代码中的注释部分应该是比较清晰，描写了这个过程

 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 添加到节点上。那么利用这点，就可以设置节点的图标了

然后就是编写一个Style 即可

最后来看下效果吧？