打造基于jQuery的高性能TreeView(asp.net)

更新時(shí)間：2011年02月23日 12:40:02 作者：

項(xiàng)目中經(jīng)常會(huì)遇到樹形數(shù)據(jù)的展現(xiàn)，包括導(dǎo)航，選擇等功能，所以樹控件在大多項(xiàng)目中都是必須的。那一個(gè)實(shí)用的樹應(yīng)該具備什么功能呢？

根據(jù)我的項(xiàng)目實(shí)踐情況，主要是幾個(gè)關(guān)鍵點(diǎn)：

1：支持靜態(tài)的樹，即一次性將全部數(shù)據(jù)加載到客戶端。
2：異步樹，即一次只加載一級(jí)或若干級(jí)節(jié)點(diǎn)，子節(jié)點(diǎn)可以異步加載數(shù)據(jù)。
3：Checkbox樹（可能是靜態(tài)樹也可能是異步樹），用于選擇（如選擇組織機(jī)構(gòu)，選擇數(shù)據(jù)字典項(xiàng)）等，最好是能夠支持節(jié)點(diǎn)級(jí)聯(lián)（這個(gè)是難點(diǎn)）
4：能夠承載大數(shù)據(jù)量，并性能表現(xiàn)優(yōu)異
5：能夠在主流瀏覽器中運(yùn)行良好

那我要打造的TreeView就是為了實(shí)現(xiàn)這個(gè)5個(gè)主要指標(biāo)的。

先來看下效果圖

上圖是中國行政區(qū)域的數(shù)據(jù)樹，總共得節(jié)點(diǎn)是3500+。

那么我們要開工了；

1：第一個(gè)確定的節(jié)點(diǎn)Dom結(jié)構(gòu)（即用什么樣的HTML來構(gòu)建節(jié)點(diǎn)）

比較土的是table套table的（樣式上好控制,但是大數(shù)據(jù)量，和層次較深的樹，這種結(jié)構(gòu)肯定頂不住的）
還有一種是比較新鮮的UL套LI的方式，這是現(xiàn)下很多書采取的方式如Jquery.treeview就是采用的這種格式，好處比較明顯就是結(jié)構(gòu)簡潔明了，
而且在不支持Js的瀏覽器上，同樣也能呈現(xiàn)出樹的形狀（這種情況其實(shí)咱可以忽略），但是Jquery.treeview的節(jié)點(diǎn)在IE下，特別是IE6下無法被內(nèi)部元素?fù)伍_，（IE7，8當(dāng)達(dá)到一定深度時(shí)無法撐開），請(qǐng)奇怪的現(xiàn)象（我猜測是因?yàn)槭褂胮adding來做縮進(jìn)，margin-left：負(fù)值來控制圖標(biāo)位置有關(guān)，但是修改起來難度也較大），在這種情況下書會(huì)變形（Jquery.treeview）就有這種問題，只能通過設(shè)置節(jié)點(diǎn)的width來解決。

JQuery.treeview的節(jié)點(diǎn)結(jié)構(gòu)

Jquery.TreeView IE6 下展開第三級(jí)即出現(xiàn)錯(cuò)位

IE8下展開到第5級(jí)

還有一些是div套table的方式，CSDN的導(dǎo)航樹就是這種，是種折中的方法（節(jié)點(diǎn)也不算太復(fù)雜，而且CSS也比較好寫），如下圖所示

而我采用的也是第二種方式，但是縮進(jìn)采用了填空的方式，即縮進(jìn)的位置用空白的圖片填充來避免Jquery.treeview的問題

我的樹節(jié)點(diǎn)結(jié)構(gòu)

確定了節(jié)點(diǎn)的HTML我們就可以來寫CSS了。有了效果圖，有個(gè)節(jié)點(diǎn)結(jié)構(gòu)接著就編寫CSS了

下面是CSS的完整代碼

復(fù)制代碼代碼如下:

 
.ie .bbit-tree .bbit-tree-bwrap{ 
} 
.bbit-tree ul,.bbit-tree li 
{ 
list-style-type:none; 
margin:0px; 
padding:0px; 
} 
.bbit-tree-body 
{ 
font-size:12px; 
} 
.bbit-tree-icon, .bbit-tree-ec-icon, .bbit-tree-node-cb,.bbit-tree-elbow-line, .bbit-tree-elbow, .bbit-tree-elbow-end, .bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ 
border: 0 none; 
height: 18px; 
margin: 0; 
padding: 0; 
vertical-align: top; 
width: 16px; 
background-repeat: no-repeat; 
} 
.bbit-tree-node-cb 
{ 
height:16px; 
} 
.bbit-tree-node-collapsed .bbit-tree-node-icon, .bbit-tree-node-expanded .bbit-tree-node-icon, .bbit-tree-node-leaf .bbit-tree-node-icon{ 
border: 0 none; 
height: 18px; 
margin: 0; 
padding: 0; 
vertical-align: top; 
width: 16px; 
background-position:center; 
background-repeat: no-repeat; 
} 
.ie .bbit-tree-node-indent img, .ie .bbit-tree-node-icon, .ie .bbit-tree-ec-icon { 
vertical-align:middle !important; 
} 
.bbit-tree-noicon .bbit-tree-node-icon{ 
width:0; height:0; 
} 
/* No line styles 沒有線的樣式 */ 
.bbit-tree-no-lines .bbit-tree-elbow{ 
background:transparent; 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end{ 
background:transparent; 
} 
.bbit-tree-no-lines .bbit-tree-elbow-line{ 
background:transparent; 
} 
/* Arrows Vista系統(tǒng)樹的樣式只有箭頭*/ 
.bbit-tree-arrows .bbit-tree-elbow{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-elbow-plus{ 
background:transparent no-repeat 0 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-minus{ 
background:transparent no-repeat -16px 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-plus{ 
background:transparent no-repeat 0 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-minus{ 
background:transparent no-repeat -16px 0; 
} 
.bbit-tree-arrows .bbit-tree-elbow-line{ 
background:transparent; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-plus{ 
background-position:-32px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-minus{ 
background-position:-48px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-plus{ 
background-position:-32px 0; 
} 
.bbit-tree-arrows .bbit-tree-ec-over .bbit-tree-elbow-end-minus{ 
background-position:-48px 0; 
} 
.bbit-tree-elbow-plus, .bbit-tree-elbow-minus, .bbit-tree-elbow-end-plus, .bbit-tree-elbow-end-minus{ 
cursor:pointer; 
} 
.ie ul.bbit-tree-node-ct{ 
font-size:0; 
line-height:0; 
zoom:1; 
} 
.bbit-tree-node{ 
white-space: nowrap; 
} 
.bbit-tree-node-el { 
line-height:18px; 
cursor:default; 
/* cursor:pointer;*/ 
} 
.bbit-tree-node a{ 
text-decoration:none; 
-khtml-user-select:none; 
-moz-user-select:none; 
-webkit-user-select:ignore; 
-kthml-user-focus:normal; 
-moz-user-focus:normal; 
-moz-outline: 0 none; 
outline:0 none; 
} 
.bbit-tree-node a span{ 
text-decoration:none; 
padding:1px 3px 1px 2px; 
} 
.bbit-tree-node .bbit-tree-node-disabled .bbit-tree-node-icon{ 
-moz-opacity: 0.5; 
opacity:.5; 
filter: alpha(opacity=50); 
} 
.bbit-tree-node .bbit-tree-node-inline-icon{ 
background:transparent; 
} 
.bbit-tree-node a:hover{ 
text-decoration:none; 
} 

/* Fix for ie rootVisible:false issue，修正一個(gè)IEdebug */ 
.bbit-tree-root { 
zoom:1; 
} 

/***********這里是圖標(biāo)了，可以在這里替換哦*****************/ 
.bbit-tree-node-expanded .bbit-tree-node-icon{ 
background-image:url(images/tree/folder-open.gif); 
} 
.bbit-tree-node-leaf .bbit-tree-node-icon{ 
background-image:url(images/tree/leaf.gif); 
} 
.bbit-tree-node-collapsed .bbit-tree-node-icon{ 
background-image:url(images/tree/folder.gif); 
} 
.bbit-tree-node-loading .bbit-tree-node-icon{ 
background-image:url(images/tree/loading.gif) !important; 
} 
.bbit-tree-node .bbit-tree-node-inline-icon { 
background-image: none; 
} 
.bbit-tree-node-loading a span{ 
font-style: italic; 
color:#444444; 
} 
.bbit-tree-lines .bbit-tree-elbow{ 
background-image:url(images/tree/elbow.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-plus{ 
background-image:url(images/tree/elbow-plus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-minus{ 
background-image:url(images/tree/elbow-minus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end{ 
background-image:url(images/tree/elbow-end.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/elbow-end-plus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/elbow-end-minus.gif); 
} 
.bbit-tree-lines .bbit-tree-elbow-line{ 
background-image:url(images/tree/elbow-line.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-plus{ 
background-image:url(images/tree/elbow-plus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-minus{ 
background-image:url(images/tree/elbow-minus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/elbow-end-plus-nl.gif); 
} 
.bbit-tree-no-lines .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/elbow-end-minus-nl.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-plus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-minus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-plus{ 
background-image:url(images/tree/arrows.gif); 
} 
.bbit-tree-arrows .bbit-tree-elbow-end-minus{ 
background-image:url(images/tree/arrows.gif); 
} 
/*TreeNode 選中的Disabled的一些顏色，字體樣式*/ 
.bbit-tree-node{ 
color:#000; 
font: normal 11px arial, tahoma, helvetica, sans-serif; 
} 
.bbit-tree-node a{ 
color:#000; 
} 
.bbit-tree-node a span{ 
color:#000; 
} 
.bbit-tree-node .bbit-tree-node-disabled a span{ 
color:gray !important; 
} 
.bbit-tree-node .bbit-tree-node-over { 
background-color: #eee; 
} 
.bbit-tree-node .bbit-tree-selected { 
background-color: #d9e8fb; 
} 

上面了樹的基本樣式外，定義了一個(gè)有+號(hào)帶line的樣式和+號(hào)不帶line的樣式

這就是那個(gè)+號(hào)帶line的樣式

css中所用到的所有圖片

2：確定數(shù)據(jù)結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
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 
}, 
... 
] 

這樣的結(jié)構(gòu)有個(gè)好處就數(shù)據(jù)本身是帶層次的，非常利于遍歷，在后面的級(jí)聯(lián)關(guān)聯(lián)中會(huì)看到
3：面子做好了那就開始做里子了，編寫腳本（Javascript）
我是JQuery得擁護(hù)者，所以自然js的框架自然是采用Jquery了
先上個(gè)完整代碼，再逐一分析

復(fù)制代碼代碼如下:

 
/**************************************** 
author:xuanye.wan@gmail.com 
page:http://xuanye.cnblogs.com/ 
***************************************/ 
(function($) { 
$.fn.swapClass = function(c1, c2) { 
return this.removeClass(c1).addClass(c2); 
} 
$.fn.switchClass = function(c1, c2) { 
if (this.hasClass(c1)) { 
return this.swapClass(c1, c2); 
} 
else { 
return this.swapClass(c2, c1); 
} 
} 
$.fn.treeview = function(settings) { 
var dfop = 
{ 
method: "POST", 
datatype: "json", 
url: false, 
cbiconpath: "/images/icons/", 
icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"], 
showcheck: false, //是否顯示選擇 
oncheckboxclick: false, //當(dāng)checkstate狀態(tài)變化時(shí)所觸發(fā)的事件，但是不會(huì)觸發(fā)因級(jí)聯(lián)選擇而引起的變化 
onnodeclick: false, 
cascadecheck: true, 
data: null, 
clicktoggle: true, //點(diǎn)擊節(jié)點(diǎn)展開和收縮子節(jié)點(diǎn) 
theme: "bbit-tree-arrows" //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows 
} 
$.extend(dfop, settings); 
var treenodes = dfop.data; 
var me = $(this); 
var id = me.attr("id"); 
if (id == null || id == "") { 
id = "bbtree" + new Date().getTime(); 
me.attr("id", id); 
} 
var html = []; 
buildtree(dfop.data, html); 
me.addClass("bbit-tree").html(html.join("")); 
InitEvent(me); 
html = null; 
//預(yù)加載圖片 
if (dfop.showcheck) { 
for (var i = 0; i < 3; i++) { 
var im = new Image(16,16); 
im.src = dfop.cbiconpath + dfop.icons[i]; 
} 
} 
//region 
function buildtree(data, ht) { 
ht.push("<div class='bbit-tree-bwrap'>"); // Wrap ; 
ht.push("<div class='bbit-tree-body'>"); // body ; 
ht.push("<ul class='bbit-tree-root ", dfop.theme, "'>"); //root 
var l = data.length; 
for (var i = 0; i < l; i++) { 
buildnode(data[i], ht, 0, i, i == l - 1); 
} 
ht.push("</ul>"); // root and; 
ht.push("</div>"); // body end; 
ht.push("</div>"); // Wrap end; 
} 
//endregion 
function buildnode(nd, ht, deep, path, isend) { 
ht.push("<li class='bbit-tree-node'>"); 
ht.push("<div id='", id, "_", nd.id, "' tpath='", path, "' unselectable='on'"); 
var cs = []; 
cs.push("bbit-tree-node-el"); 
if (nd.hasChildren) { 
cs.push(nd.isexpand ? "bbit-tree-node-expanded" : "bbit-tree-node-collapsed"); 
} 
else { 
cs.push("bbit-tree-node-leaf"); 
} 
if (nd.classes) { cs.push(nd.classes); } 
ht.push(" class='", cs.join(" "), "'>"); 
//span indent 
ht.push("<span class='bbit-tree-node-indent'>"); 
if (deep == 1) { 
ht.push("<img class='bbit-tree-icon' src='../Themes/Shared/images/s.gif'/>"); 
} 
else if (deep > 1) { 
ht.push("<img class='bbit-tree-icon' src='../Themes/Shared/images/s.gif'/>"); 
for (var j = 1; j < deep; j++) { 
ht.push("<img class='bbit-tree-elbow-line' src='../Themes/Shared/images/s.gif'/>"); 
} 
} 
ht.push("</span>"); 
//img 
cs.length = 0; 
if (nd.hasChildren) { 
if (nd.isexpand) { 
cs.push(isend ? "bbit-tree-elbow-end-minus" : "bbit-tree-elbow-minus"); 
} 
else { 
cs.push(isend ? "bbit-tree-elbow-end-plus" : "bbit-tree-elbow-plus"); 
} 
} 
else { 
cs.push(isend ? "bbit-tree-elbow-end" : "bbit-tree-elbow"); 
} 
ht.push("<img class='bbit-tree-ec-icon ", cs.join(" "), "' src='../Themes/Shared/images/s.gif'/>"); 
ht.push("<img class='bbit-tree-node-icon' src='../Themes/Shared/images/s.gif'/>"); 
//checkbox 
if (dfop.showcheck && nd.showcheck) { 
if (nd.checkstate == null || nd.checkstate == undefined) { 
nd.checkstate = 0; 
} 
ht.push("<img id='", id, "_", nd.id, "_cb' class='bbit-tree-node-cb' src='", dfop.cbiconpath, dfop.icons[nd.checkstate], "'/>"); 
} 
//a 
ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='javascript:void(0);'>"); 
ht.push("<span unselectable='on'>", nd.text, "</span>"); 
ht.push("</a>"); 
ht.push("</div>"); 
//Child 
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>"); 
} 
} 
ht.push("</li>"); 
nd.render = true; 
} 
function getItem(path) { 
var ap = path.split("."); 
var t = treenodes; 
for (var i = 0; i < ap.length; i++) { 
if (i == 0) { 
t = t[ap[i]]; 
} 
else { 
t = t.ChildNodes[ap[i]]; 
} 
} 
return t; 
} 
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 
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]); 
} 
} 
} 
//遍歷子節(jié)點(diǎn) 
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; 
} 
} 
function nodeclick(e) { 
var path = $(this).attr("tpath"); 
var et = e.target || e.srcElement; 
var item = getItem(path); 
//debugger; 
if (et.tagName == "IMG") { 
// +號(hào)需要展開 
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")) { //- 號(hào)需要收縮 
$(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")) // 點(diǎn)擊了Checkbox 
{ 
var s = item.checkstate != 1 ? 1 : 0; 
var r = true; 
if (dfop.oncheckboxclick) { 
r = dfop.oncheckboxclick.call(et, item, s); 
} 
if (r != false) { 
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 asnybuild(nodes, deep, path, ul, pnode) { 
var l = nodes.length; 
if (l > 0) { 
var ht = []; 
for (var i = 0; i < l; i++) { 
nodes[i].parent = pnode; 
buildnode(nodes[i], ht, deep, path + "." + i, i == l - 1); 
} 
ul.html(ht.join("")); 
ht = null; 
InitEvent(ul); 
} 
ul.addClass("bbit-tree-node-ct").css({ "z-index": 0, position: "static", visibility: "visible", top: "auto", left: "auto", display: "" }); 
ul.prev().removeClass("bbit-tree-node-loading"); 
} 
function asnyloadc(pul, pnode, callback) { 
if (dfop.url) { 
var param = builparam(pnode); 
$.ajax({ 
type: dfop.method, 
url: dfop.url, 
data: param, 
dataType: dfop.datatype, 
success: callback, 
error: function(e) { alert("error occur!"); } 
}); 
} 
} 
function builparam(node) { 
var p = [{ name: "id", value: encodeURIComponent(node.id) } 
, { name: "text", value: encodeURIComponent(node.text) } 
, { name: "value", value: encodeURIComponent(node.value) } 
, { name: "checkstate", value: node.checkstate}]; 
return p; 
} 
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) 
.find("img.bbit-tree-ec-icon").each(function(e) { 
if (!$(this).hasClass("bbit-tree-elbow")) { 
$(this).hover(function() { 
$(this).parent().addClass("bbit-tree-ec-over"); 
}, function() { 
$(this).parent().removeClass("bbit-tree-ec-over"); 
}); 
} 
}); 
}); 
} 
function getck(items, c, fn) { 
for (var i = 0, l = items.length; i < l; i++) { 
items[i].checkstate == 1 && c.push(fn(items[i])); 
if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) { 
getck(items[i].ChildNodes, c, fn); 
} 
} 
} 
me[0].t = { 
getSelectedNodes: function() { 
var s = []; 
getck(treenodes, s, function(item) { return item }); 
return s; 
}, 
getSelectedValues: function() { 
var s = []; 
getck(treenodes, s, function(item) { return item.value }); 
return s; 
}, 
getCurrentItem: function() { 
return dfop.citem; 
} 
}; 
return me; 
} 
//獲取所有選中的節(jié)點(diǎn)的Value數(shù)組 
$.fn.getTSVs = function() { 
if (this[0].t) { 
return this[0].t.getSelectedValues(); 
} 
return null; 
} 
//獲取所有選中的節(jié)點(diǎn)的Item數(shù)組 
$.fn.getTSNs = function() { 
if (this[0].t) { 
return this[0].t.getSelectedNodes(); 
} 
return null; 
} 
$.fn.getTCT = function() { 
if (this[0].t) { 
return this[0].t.getCurrentItem(); 
} 
return null; 
} 
})(jQuery); 

第一步：自然是所有Jquery的控件的第一步都是搭這個(gè)架子，兼容JQuery和$避免閉包，避免和其他類庫沖突，接受一個(gè)參數(shù)（是個(gè)對(duì)象）

復(fù)制代碼代碼如下:

 
;(function($) { 
//也可以使用$.fn.extend(treeview:function(setting){}) 
$.fn.treeview = function(settings) { 
} 
})(jQuery); 

那第二步：給控件加一些參數(shù)默認(rèn)參數(shù)，同時(shí)能調(diào)用方法$.extend讓最終調(diào)用時(shí)的參數(shù)覆蓋默認(rèn)的（如果沒有則使用默認(rèn)）

復(fù)制代碼代碼如下:

 
var dfop ={ 
method: "POST",//默認(rèn)采用POST提交數(shù)據(jù) 
datatype: "json",//數(shù)據(jù)類型是json 
url: false,//異步請(qǐng)求的url 
cbiconpath: "/images/icons/",//checkbox icon的目錄位置 
icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],//checkbxo三態(tài)的圖片 
showcheck: false, //是否顯示checkbox 
oncheckboxclick: false, //點(diǎn)擊checkbox時(shí)觸發(fā)的事件 
onnodeclick: false,//點(diǎn)擊node觸發(fā)的時(shí)間 
cascadecheck: true,//是否啟用級(jí)聯(lián) 
data: null,//初始化數(shù)據(jù) 
theme: "bbit-tree-arrows" //三種風(fēng)格備選bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows 
} 
//用傳進(jìn)來的參數(shù)覆蓋默認(rèn)，沒傳則保留 
$.extend(dfop, settings); 

第三步：生成默認(rèn)數(shù)據(jù)的HTML（根據(jù)我們的分析節(jié)點(diǎn)的Dom結(jié)構(gòu)，數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，生成節(jié)點(diǎn)那是非常的簡單），，添加到當(dāng)前容器中。最后是注冊事件這里有一個(gè)非常重要的地方，即懶加載(沒有展開的節(jié)點(diǎn)HTML是不生成的)，這就要求我們在樹內(nèi)部要維護(hù)一套數(shù)據(jù)（開銷很?。?，對(duì)于性能的提升那是相當(dāng)?shù)拿黠@。另外一個(gè)重要的地方，就是使用一次生成所有展開節(jié)點(diǎn)的HTML并通過innerHTML屬性來生成Dom，而不是通過append操作，因?yàn)橹苯硬僮鱥nnerHTML比通過dom原生的方法要快上N倍（節(jié)點(diǎn)越多，N越大），切記切記！

復(fù)制代碼代碼如下:

 
var treenodes = dfop.data; //內(nèi)部的數(shù)據(jù)，其實(shí)直接用 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);//生成展開節(jié)點(diǎn)的HTML，push到數(shù)組中 
me.addClass("bbit-tree").html(html.join("")); 
InitEvent(me);//初始化事件 
html = null; 

在節(jié)點(diǎn)生成過程中，同時(shí)可生產(chǎn)節(jié)點(diǎn)的Path（節(jié)點(diǎn)路徑），方便檢索

復(fù)制代碼代碼如下:

 
if (nd.hasChildren) { //存在子節(jié)點(diǎn) 
if (nd.isexpand) {//同時(shí)節(jié)點(diǎn)已經(jīng)展開則輸出子節(jié)點(diǎn) 
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++) {//遞歸調(diào)用并生產(chǎn)節(jié)點(diǎn)的路徑 
nd.ChildNodes[k].parent = nd; 
buildnode(nd.ChildNodes[k], ht, deep + 1, path + "." + k, k == l - 1); 
} 
} 
ht.push("</ul>"); 
} 
else { //否則是待輸出狀態(tài) 
ht.push("<ul style='display:none;'></ul>"); 
} 
} 

注冊事件，接受參數(shù)parent，即從某一父節(jié)點(diǎn)開始附加事件（因?yàn)樽隽藗€(gè)hover效果，所以事件是在每個(gè)節(jié)點(diǎn)上，如果取消該效果，事件可直接附加Tree上通過Event的srcElement來分發(fā)可略提升性能）

復(fù)制代碼代碼如下:

 
function InitEvent(parent) { 
var nodes = $("li.bbit-tree-node>div", parent); 
nodes.each(function(e) { 
$(this).hover(function() { 
$(this).addClass("bbit-tree-node-over"); //鼠標(biāo)浮動(dòng)節(jié)點(diǎn)的樣式變化 
}, function() { 
$(this).removeClass("bbit-tree-node-over"); 
}) 
.click(nodeclick)//node的onclick事件，這個(gè)是重點(diǎn)哦 
.find("img.bbit-tree-ec-icon").each(function(e) { //arrow的hover事件，為了實(shí)現(xiàn)vista那個(gè)風(fēng)格的 
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事件，因?yàn)樗幚淼氖虑楹芏?，如樹的展開收縮（如果子節(jié)點(diǎn)不存在，但是hasChildren為真，同時(shí)complete屬性不為真則需要異步加載子節(jié)點(diǎn)，如子節(jié)點(diǎn)存在，但是沒有Render那么就要Render）,點(diǎn)擊checkbox要出發(fā)級(jí)聯(lián)的事件和oncheckbox事件，點(diǎn)擊其他則觸發(fā)配置條件的nodeonclick事件，這一切都通過前面event的源元素的class來區(qū)分點(diǎn)擊的對(duì)象

復(fù)制代碼代碼如下:

 
function nodeclick(e) { 
var path = $(this).attr("tpath");//獲取節(jié)點(diǎn)路徑 
var et = e.target || e.srcElement;//獲取事件源 
var item = getItem(path);//根據(jù)path獲取節(jié)點(diǎn)的數(shù)據(jù) 
//debugger; 
if (et.tagName == "IMG") { 
// +號(hào)需要展開，處理加減號(hào) 
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")) { //- 號(hào)需要收縮 
$(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")) // 點(diǎn)擊了Checkbox 
{ 
var s = item.checkstate != 1 ? 1 : 0; 
var r = true; 
if (dfop.oncheckboxclick) { //觸發(fā)配置的函數(shù) 
r = dfop.oncheckboxclick.call(et, item, s); 
} 
if (r != false) {//如果返回值不為false，即checkbxo變化有效 
if (dfop.cascadecheck) {//允許觸發(fā)級(jí)聯(lián) 
//遍歷 
cascade(check, item, s);//則向下關(guān)聯(lián) 
//上溯 
bubble(check, item, s); //向上關(guān)聯(lián) 
} 
else { 
check(item, s, 1);//否則只管自己 
} 
} 
} 
} 
else {//點(diǎn)擊到了其他地方 
if (dfop.citem) { //上一個(gè)當(dāng)前節(jié)點(diǎn) 
$("#" + id + "_" + dfop.citem.id).removeClass("bbit-tree-selected"); 
} 
dfop.citem = item;//這次的當(dāng)前節(jié)點(diǎn) 
$(this).addClass("bbit-tree-selected"); 
if (dfop.onnodeclick) { 
dfop.onnodeclick.call(this, item); 
} 
} 
} 

展開節(jié)點(diǎn)，異步請(qǐng)求的部分代碼應(yīng)該不是很復(fù)雜就不細(xì)訴了，關(guān)鍵來講一下級(jí)聯(lián)
級(jí)聯(lián)有兩個(gè)問題要處理，第一個(gè)是遍歷子節(jié)點(diǎn)，第二個(gè)是上溯到祖節(jié)點(diǎn)，因?yàn)槲覀兊臄?shù)據(jù)結(jié)構(gòu)這兩個(gè)操作都顯得非常簡單

復(fù)制代碼代碼如下:

 
//遍歷子節(jié)點(diǎn) 
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; 
} 
} 

找到節(jié)點(diǎn)的同時(shí)都會(huì)觸發(fā)check這個(gè)回調(diào)函數(shù)，來判斷當(dāng)前節(jié)點(diǎn)的狀態(tài)，詳細(xì)請(qǐng)看下面代碼中的注釋部分應(yīng)該是比較清晰，描寫了這個(gè)過程

復(fù)制代碼代碼如下:

 
function check(item, state, type) { 
var pstate = item.checkstate; //當(dāng)前狀態(tài) 
if (type == 1) { 
item.checkstate = state; //如果是遍歷子節(jié)點(diǎn)，父是什么子就是什么 
} 
else {// 上溯 ，這個(gè)就復(fù)雜一些了 
var cs = item.ChildNodes; //獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn) 
var l = cs.length; 
var ch = true; //是否不是中間狀態(tài) 半選 
for (var i = 0; i < l; i++) { 
if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) { 
ch = false; 
break;//他的子節(jié)點(diǎn)只要有一個(gè)沒選中，那么他就是半選 
} 
} 
if (ch) { 
item.checkstate = state;//不是半選，則子節(jié)點(diǎn)是什么他就是什么 
} 
else { 
item.checkstate = 2; //半選 
} 
} 
//change show 如果節(jié)點(diǎn)已輸出，而其前后狀態(tài)不一樣，則變化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]); 
} 
} 
} 

至此我們樹的主體功能已經(jīng)完全實(shí)現(xiàn)了。其他就是公開一些方法等，大家可詳見代碼，示例中公開了兩個(gè)一個(gè)當(dāng)前選中的所有節(jié)點(diǎn)，另外一個(gè)當(dāng)前的節(jié)點(diǎn)。

大家可以通過以下網(wǎng)址查看文中的示例，selected拼錯(cuò)了，大家海涵！ windows azure部署還是麻煩懶得修改了3500+節(jié)點(diǎn)一次加載，大家可以點(diǎn)擊根節(jié)點(diǎn)的全選來看看速度

http://jscs.cloudapp.net/ControlsSample/BigTreeSample

異步加載，按需加載的情況也是非常常用的，使用的是SQL Azure服務(wù)器在美國ing，所以可能異步有點(diǎn)慢，本地?cái)?shù)據(jù)源那是瞬間的

http://jscs.cloudapp.net/ControlsSample/TreeAsnySample

FAQ：

1：如何設(shè)置每個(gè)節(jié)點(diǎn)不同的圖標(biāo)？

回答：

其實(shí)不用擴(kuò)展，本身就支持，只是沒有說明而已，我們來看一下這個(gè)代碼吧？在BuildNode方法中有這么一句？
if (nd.classes) { cs.push(nd.classes); }

在節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)中可以設(shè)置屬性classes ，該屬性將作為節(jié)點(diǎn)特殊的Css Class 添加到節(jié)點(diǎn)上。那么利用這點(diǎn)，就可以設(shè)置節(jié)點(diǎn)的圖標(biāo)了