打造基于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)的。
先來(lái)看下效果圖
上圖是中國(guó)行政區(qū)域的數(shù)據(jù)樹，總共得節(jié)點(diǎn)是3500+。
那么我們要開工了；
1：第一個(gè)確定的節(jié)點(diǎn)Dom結(jié)構(gòu)（即用什么樣的HTML來(lái)構(gòu)建節(jié)點(diǎn)）
- 比較土的是table套table的（樣式上好控制,但是大數(shù)據(jù)量，和層次較深的樹，這種結(jié)構(gòu)肯定頂不住的）
- 還有一種是比較新鮮的UL套LI的方式，這是現(xiàn)下很多書采取的方式如Jquery.treeview就是采用的這種格式，好處比較明顯就是結(jié)構(gòu)簡(jiǎn)潔明了，
而且在不支持Js的瀏覽器上，同樣也能呈現(xiàn)出樹的形狀（這種情況其實(shí)咱可以忽略），但是Jquery.treeview的節(jié)點(diǎn)在IE下，特別是IE6下無(wú)法被內(nèi)部元素?fù)伍_，（IE7，8當(dāng)達(dá)到一定深度時(shí)無(wú)法撐開），請(qǐng)奇怪的現(xiàn)象（我猜測(cè)是因?yàn)槭褂胮adding來(lái)做縮進(jìn)，margin-left：負(fù)值來(lái)控制圖標(biāo)位置有關(guān)，但是修改起來(lái)難度也較大），在這種情況下書會(huì)變形（Jquery.treeview）就有這種問題，只能通過設(shè)置節(jié)點(diǎn)的width來(lái)解決。
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)的位置用空白的圖片填充來(lái)避免Jquery.treeview的問題
我的樹節(jié)點(diǎn)結(jié)構(gòu)
確定了節(jié)點(diǎn)的HTML我們就可以來(lái)寫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和$避免閉包，避免和其他類庫(kù)沖突，接受一個(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)來(lái)的參數(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)那是非常的簡(jiǎn)單），，添加到當(dāng)前容器中。最后是注冊(cè)事件這里有一個(gè)非常重要的地方，即懶加載(沒有展開的節(jié)點(diǎn)HTML是不生成的)，這就要求我們?cè)跇鋬?nèi)部要維護(hù)一套數(shù)據(jù)（開銷很?。瑢?duì)于性能的提升那是相當(dāng)?shù)拿黠@。另外一個(gè)重要的地方，就是使用一次生成所有展開節(jié)點(diǎn)的HTML并通過innerHTML屬性來(lái)生成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>");
}
}
注冊(cè)事件，接受參數(shù)parent，即從某一父節(jié)點(diǎn)開始附加事件（因?yàn)樽隽藗€(gè)hover效果，所以事件是在每個(gè)節(jié)點(diǎn)上，如果取消該效果，事件可直接附加Tree上通過Event的srcElement來(lái)分發(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來(lái)區(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)鍵來(lái)講一下級(jí)聯(lián)
級(jí)聯(lián)有兩個(gè)問題要處理，第一個(gè)是遍歷子節(jié)點(diǎn)，第二個(gè)是上溯到祖節(jié)點(diǎn)，因?yàn)槲覀兊臄?shù)據(jù)結(jié)構(gòu)這兩個(gè)操作都顯得非常簡(jiǎn)單
復(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ù)，來(lái)判斷當(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)的全選來(lái)看看速度
http://jscs.cloudapp.net/ControlsSample/BigTreeSample
異步加載，按需加載的情況也是非常常用的，使用的是SQL Azure服務(wù)器在美國(guó)ing，所以可能異步有點(diǎn)慢，本地?cái)?shù)據(jù)源那是瞬間的
http://jscs.cloudapp.net/ControlsSample/TreeAsnySample
FAQ：
1：如何設(shè)置每個(gè)節(jié)點(diǎn)不同的圖標(biāo)？
回答：
其實(shí)不用擴(kuò)展，本身就支持，只是沒有說(shuō)明而已，我們來(lái)看一下這個(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)了
然后就是編寫一個(gè)Style 即可
最后來(lái)看下效果吧？
您可能感興趣的文章:
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
- 基于MVC5和Bootstrap的jQuery TreeView樹形控件(一)之?dāng)?shù)據(jù)支持json字符串、list集合
- jquery實(shí)現(xiàn)點(diǎn)擊TreeView文本父節(jié)點(diǎn)展開/折疊子節(jié)點(diǎn)
- ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
- 為jQuery.Treeview添加右鍵菜單的實(shí)現(xiàn)代碼
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫(kù)生成菜單導(dǎo)航條
- jQuery 學(xué)習(xí)第六課 實(shí)現(xiàn)一個(gè)Ajax的TreeView
- 選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
- jQuery 樹形結(jié)構(gòu)的選擇器
- jQuery treeview樹形結(jié)構(gòu)應(yīng)用
相關(guān)文章
在做網(wǎng)站的開發(fā)過程中，可能需要使用彈出層，使用jquery的blockui插件可以很輕松的實(shí)現(xiàn)這個(gè)效果。2011-04-04
jQuery maxlength文本字?jǐn)?shù)限制插件
相信大家對(duì)twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時(shí)提示效果設(shè)計(jì)的非常人性化.2010-04-04
jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁(yè)面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
對(duì)從數(shù)據(jù)庫(kù)去的數(shù)據(jù)動(dòng)態(tài)生成樹形欄進(jìn)行增刪改查操作，可是用$(".XX").click();方法是不行的，關(guān)于這個(gè)問題的解決方法如下2014-08-08
BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范，則可能會(huì)導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示，顯示為方框。該怎么解決呢？下面小編給大家解答下2016-09-09
jQuery的ajax中使用FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新上傳功能
這篇主要寫如何利用ajax和FormData實(shí)現(xiàn)頁(yè)面無(wú)刷新的文件上傳效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。需要的的朋友參考下本文2017-01-01
jQuery實(shí)現(xiàn)折疊、展開的菜單組效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)折疊、展開的菜單組效果代碼,涉及jQuery針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,展開折疊效果平滑自然,需要的朋友可以參考下2015-09-09
本篇文章主要是對(duì)jquery取消選擇select下拉框示例代碼進(jìn)行了介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
JQuery 實(shí)現(xiàn)在同一頁(yè)面錨點(diǎn)鏈接之間的平滑滾動(dòng)
JQuery 原來(lái)比我想象的要強(qiáng)大的多，本文用 JQuery 實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)，在同一頁(yè)面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng)2014-10-10
jquery 單引號(hào)和雙引號(hào)的區(qū)別及使用注意
在js中單引號(hào)和雙引號(hào)都是一樣的，平時(shí)使用的時(shí)候盡量用單引號(hào)，只有碰到嵌套的時(shí)候才會(huì)同時(shí)用兩種引號(hào)，感興趣的朋友可以了解下2013-07-07