}
//用传进来的参数覆盖默认,没传则保留
$.extend(dfop, settings);
第三步:生成默认数据的HTML(根据我们的分析节点的Dom结构,数据的数据结构,生成节点那是非常的简单),,添加到当前容器中。最后是注册事件这里有一个非常重要的地方,即懒加载(没有展开的节点HTML是不生成的),这就要求我们在树内部要维护一套数据(开销很小),对于性能的提升那是相当的明显。另外一个重要的地方,就是使用一次生成所有展开节点的HTML并通过innerHTML属性来生成Dom,而不是通过append操作,因为直接操作innerHTML比通过dom原生的方法要快上N倍(节点越多,N越大),切记切记!
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(节点路径),方便检索
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() {










