可爱又可恨的梅花雪
??? 最近的一個項目中要對頁面上的Filter中的菜單樹進行改造，原因是之前所采用的TreeView控件樹在頁面初次加載的時候耗時過長，效率低下（想必用過微軟TreeView樹控件的用戶都有過這樣的感受）。改造的基本想法是用客戶端樹來代替從服務器端加載的TreeView樹，客戶端構造樹只能用javascript了，要體現樹的UI和可操控性，就必須提供動態的HTML用事件來進行加載（DHTML部分），這是一件非常繁瑣的事情，于是我就想到了采用網絡上非常著名的“梅花雪樹控件”，不過期間遇到的問題很多，梅花雪的作者在需求方面考慮的問題還是不夠全面，使得我在改造梅花雪樹的過程中遇到了很多麻煩。
??? 首先說明一下，這個項目是建立在Microsoft最新的企業級Portal Sharepoint 2007平臺上，并且根據客戶的要求，所有的Custom Code只能寫在客戶端，也就是說整個項目不能在服務器上部署dll（不過前面提到的那個Filter的TreeView是個例外，那個是采用C# Webpart編寫的），UI的部分截圖在下面。
在選擇Filter之前
在選擇Filter中的Hierarchy之后
???? Hierarchy的下拉面板中有三棵樹，通過RadioButton進行切換。
??? 梅花雪網站上只能找到1.0版本的樹，經過改良后的2.0版本效果不錯，但是在梅花雪的網站上好像還沒有提供下載，我在Google上搜索了一下，也還是找到很多可供下載的地址。
梅花雪樹1.0
梅花雪樹2.0
??? 網絡上有很多版本的梅花雪樹，不過形態都大同小異，我所需要的是帶復選框的樹，并且綁定數據簡單，最好不要通過遞歸綁定數據（因為當節點數過多時，通過遞歸綁定數據效率太低，在瀏覽器中加載樹時通常都會“死機”）。其實需求很簡單，于是我選擇了上面的梅花雪2.0樹。這個版本確實不錯，除了可以通過不同的方式綁定數據外，還支持動態加載數據，也就是說在樹的節點展開時才去動態加載節點。只要不在頁面初始加載的時候全部展開樹的節點，頁面響應的時間會很短。我按照示例中的代碼進行了測試，編寫js腳本解析數據并綁定到樹上，然后運行看效果，還不錯，一切看起來都很正常，于是我很興奮，看來大功快要告成！
??? 進一步測試并添加相應的需求，問題馬上就來了：
??? 首先是我如何獲取到已選擇的節點？后來才知道這個其實是很容易的。設好debugger，調試js，跟一下node對象下有哪些屬性或方法，找到一個bool屬性checked，就是它了，通過遍歷MzTreeView下的nodes，判斷節點上的checked屬性，然后就可以直接取到節點的id或text（這兩個屬性也是在調試js的過程中發現的，這比直接去讀代碼要來得方便）。
???? 好，既然可以獲取到已選擇的節點，那么就允許設置哪些節點被選擇了，如何做呢？從上面的過程來看，我們只需要設置這些節點的checked屬性為true就行了，太容易了！那么果然如此嗎？前面我說了，梅花雪2.0的樹是動態加載節點的，也就是說，節點所在的分支如果沒有打開，你是獲取不到節點對象的，于是也就不能設置節點的checked屬性了。這就是我所遇到的其中一個問題，看來梅花雪樹的作者忽略了這個問題！問題的關鍵是我們首先要將那些你想設置屬性的節點所在的分支打開，但因為樹是層次結構，樹可能會有很多層，我們需要逐級將這些分支打開，只要分支打開了，就能獲取到節點對象，于是也就可以設置屬性的值了。這就要求你在綁定樹的數據時將這些節點的父節點從下向上依次保存起來，在設置時先按從上到下的順序打開分支，然后遍歷分支下的節點，最后設置這些節點的屬性值。下面是我實現這一過程的部分代碼。
? 1?var hashArea =?new Hashtable();? 2?var hashRegion =?new Hashtable();
? 3?var hashCountry =?new Hashtable();
? 4?var hashCompany =?new Hashtable();
? 5?var hashSelectedCompany =?new Hashtable();
? 6?var hashSelectedNodes =?new Hashtable();
? 7?
? 8?//該function用于解析綁定MzTreeView的數據
? 9?function FillData(arrAreaRegion, arrRegionCountry, arrCountryCompany, arrSelectedCompany) {
10???? hashArea.clear();
11???? hashRegion.clear();
12???? hashCountry.clear();
13???? hashCompany.clear();
14???? hashSelectedCompany.clear();
15???? hashSelectedNodes.clear();
16?????
17???? var data = {};
18?
19???? for (var i =?0; i < arrSelectedCompany.length; i++) {
20???????? hashSelectedCompany.add(arrSelectedCompany[i], arrSelectedCompany[i]);
21???? }
22?????
23???? data["-1_Root"] =?"text: Statuary;";
24?
25???? //fill Area and Region
26???? for (var i =?0; i < arrAreaRegion.length -?1; i++) {
27???????? if (arrAreaRegion[i] !=?"") {
28???????????? arrTmp = arrAreaRegion[i].split("`");
29???????????? if (arrTmp.length >?1) {
30???????????????? var a = arrTmp[0].trim();
31???????????????? var b = arrTmp[1].trim();
32???????????????? if (!hashArea.contains(a)) {
33???????????????????? hashArea.add(a, "Root");
34???????????????????? data["Root_"?+ a] =?"text:"?+ a +?";";//Area
35???????????????? }
36???????????????? if (!hashRegion.contains(b +?"1")) {
37???????????????????? hashRegion.add(b +?"1", a);
38???????????????????? data[a +?"_"?+ b +?"1"] =?"text:"?+ b +?";";//Region
39???????????????? }
40???????????? }
41???????? }
42???? }
43?
44???? //fill Country
45???? for (var j =?0; j < arrRegionCountry.length -?1; j++) {
46???????? if (arrRegionCountry[j] !=?"") {
47???????????? arrTmp = arrRegionCountry[j].split("`");
48???????????? if (arrTmp.length >?1) {
49???????????????? var a = arrTmp[0].trim();
50???????????????? var b = arrTmp[1].trim();
51???????????????? if (!hashCountry.contains(b +?"11")) {
52???????????????????? hashCountry.add(b +?"11", a +?"1");
53???????????????????? data[a +?"1_"?+ b +?"11"] =?"text:"?+ b +?";";//Country
54???????????????? }
55???????????? }
56???????? }
57???? }
58?
59???? //fill Company
60???? var t;
61???? for (var l =?0; l < arrCountryCompany.length -?1; l++) {
62???????? if (arrCountryCompany[l] !=?"") {
63???????????? arrTmp = arrCountryCompany[l].split("`");
64???????????? if (arrTmp.length >?1) {
65???????????????? t = arrTmp[1].split(";#");
66???????????????? if (t.length >?1) {
67???????????????????? var a = arrTmp[0].trim();
68???????????????????? var b = t[1].trim();
69???????????????????? if (!hashCompany.contains(b)) {
70???????????????????????? hashCompany.add(b, a);
71???????????????????????? data[a +?"11_"?+ t[0]] =?"text:"?+ b +?";";
72???????????????????????? if (hashSelectedCompany.contains(b.split("-")[0])) {
73???????????????????????????? data[a +?"11_"?+ t[0]] +=?"checked:true;"; //CompandCode
74???????????????????????????? hashSelectedNodes.add(a +?"11", "");
75???????????????????????? }
76???????????????????? }
77???????????????? }
78???????????? }
79???????? }
80???? }
81?????
82???? return data;
83?}
84?
85?//有選擇性地打開樹中的分支，只要分支打開了，該分支下設置為checked=true的節點就能自動被選擇上
86?function expandNodes(a) {
87???? if (hashSelectedNodes.count > hashCompany.count /?2) {
88???????? a.expandAll("Root");
89???????? return;
90???? }
91???? var _nodesCountry =?new Hashtable();
92???? var _nodesRegion =?new Hashtable();
93?
94???? for (var i in hashSelectedNodes._hash) {
95???????? if (hashCountry.contains(i)) {
96???????????? _nodesCountry.add(hashCountry.items(i), "");
97???????? }
98???? }
99???? for (var j in _nodesCountry._hash) {
100???????? if (hashRegion.contains(j)) {
101???????????? _nodesRegion.add(hashRegion.items(j), "");
102???????? }
103???? }
104???? //expand region level
105???? for (var i in _nodesRegion._hash) {
106???????? a.expand(i);
107???? }
108???? //expand country level
109???? for (var j in _nodesCountry._hash) {
110???????? a.expand(j);
111???? }
112???? //expand company level
113???? for (var k in hashSelectedNodes._hash) {
114???????? a.expand(k);
115???? }
116?}
??? 先說明一下，讀者可能看得不是很明白。首先我要構造的樹總共有四層，這是我預先知道的，Area-Region-Country-Company，我們要設置的節點位于葉子節點，也就是Company這一級，FillData函數中分三個for循環分別構造了這四層，在最后一層的時候我根據hashSelectedCompany中的值來判斷是否要將該節點的checked設置為true，如果設置為true，就需要保存它的父節點的id到hashSelectedNodes中。在expandNodes函數中，我們需要根據這個hashSelectedNodes來找到相應的Country和Region，然后逐級打開Area、Region、Country，設置為checked=true的節點就會自動被選擇上。當然，如果你初始設置時被選擇的節點數目很多，這個函數執行的效率不會很高，所以我在函數開始的地方添加了一個判斷，如果你所要設置的節點的數目超過所有節點數目的一半，那么我干脆就將樹全部展開，而不用再去逐級打開節點了。還有一個前提條件，那就是MzTreeView在Render完后，我們要默認expand第一級，否則expandNodes函數在expand Region的時候便會報找不到對象的錯誤。
??? 上面的代碼中，讀者可能會問，FillData的時候是用來給data數組按照MzTreeView所要求的格式填充數據的，為什么我會在里面加上1 和11呢？這也是我在使用MzTreeView時所遇到的另外一個問題，即節點id重復怎么辦？
??? 先分析MzTreeView中用于綁定數據時的結構，我用的不一定是數字，而是文本（因為后臺傳遞過來的數據只有這些）：
1?data["-1_Root"] =?"text: Statutory";2?data["Root_APAC"] =?"text: APAC";
3?data["APAC_Australia"] =?"text: Australia";
4?data["Australia_Australia"] =?"text: Australia";
5????? 問題是，子節點和父節點的id重復了。在Render樹的時候雖然不會報錯，但是生成的樹節點不全，那些與父節點id相同的子節點不會被Render出來。一個好的解決辦法就是在這些文本上添加額外的信息，使它們與父節點的id不重復，這就是我為什么要在Region這一層加1，而在Country這一層加11。代碼中使用到了一個Hashtable的對象，這個是自己編寫的方便存儲數據用的，讀者可以參考我之前的一篇日志《在Javascript中實現偽哈希表》。
??? 繼續測試，發現有些節點死活都沒有出現在樹中，為什么？調試，跟蹤，再調試，再跟蹤…后來終于發現問題所在，原來在我的數據源中含有小括號，又因為我是直接用節點的名稱作為id來綁定數據的，MzTreeView的代碼中使用了正則表達式來進行節點查找，而我后來在調試中發覺這個正則表達式沒有對特殊字符進行特殊處理，例如我這里遇到的小括號（小括號在正則表達式中也是特殊字符），下面是MzTreeView中mzdata.js文件中的原始代碼。
1?//public: getNode (has Builded) by sourceId2?MzData.prototype.getNodeById =?function(id)
3?{
4?? if(id==this.rootId&&this.rootNode.virgin) return?this.rootNode;
5?? var _=this.get__(), d =?this.dividerEncoding;
6?? var reg=new RegExp("([^"+_+ d +"]+"+ d + id +")("+_+"|$)");
7?? if(reg.test(this.indexes)){var s=RegExp.$1;
8?? if(s=this.dataSource[s].getAttribute("index_"+?this.hashCode))
9???? return?this.nodes[s];
10?? else{System._alert("The node isn't initialized!"); return?null;}}
11?? alert("sourceId="+ id +" is nonexistent!"); return?null;
12?};
??? reg.test(this.indexes)判斷的結果為false，也就是說reg的正則匹配失敗，原因就是id的值中含有了小括號。我的想法是在進行正則表達式之前將id值中的小括號統一替換成別的字符，然后進行正則表達式匹配，匹配完后再替換回小括號，下面是我修改之后的代碼。
1?MzData.prototype.getNodeById =?function(id)2?{
3?? if(id==this.rootId&&this.rootNode.virgin) return?this.rootNode;
4?? var _=this.get__(), d =?this.dividerEncoding;
5?? //----------------
6?? var _id = id;
7?? _id = _id.replace(/\(/g, "jackyxu").replace(/\)/g, "xujacky");
8?? var _indexes =?this.indexes;
9?? _indexes = _indexes.replace(/\(/g, "jackyxu").replace(/\)/g, "xujacky");
10?? var reg=new RegExp("([^"+_+ d +"]+"+ d + _id +")("+_+"|$)");
11?? if (reg.test(_indexes)) { var s = RegExp.$1.replace(/(jackyxu)/g, "(").replace(/(xujacky)/g, ")");
12?? //----------------
13?? if(s=this.dataSource[s].getAttribute("index_"+?this.hashCode))
14???? return?this.nodes[s];
15?? else{System._alert("The node isn't initialized!"); return?null;}}
16?? alert("sourceId="+ id +" is nonexistent!"); return?null;
17?};
??? 因為實在不知道用什么字符來替換小括號（很多鍵盤上的字符都被用作正則表達式的特殊字符了），我就用jackyxu來代替“(”，用xujacky來代替“)”，正則表達式匹配后再替換回來。在mzdata.js文件中還有一個地方也需要類似修改，下面是原始代碼和修改后的代碼。
1?MzDataNode.prototype.loadChildNodes =?function(DataNodeClass)2?{
3?? var $=this.$$caller,r=$.dividerEncoding,_=$.get__(), i, cs;
4?? var tcn=this.childNodes;tcn.length=0;if(this.sourceIndex){
5?? if((i=this.get("JSData"))) $.loadJsData((/^\w+\.js(\s|\?|$)/i.test(i)?$.jsDataPath:"")+i);
6?? if((i=this.get("ULData"))) $.loadUlData(i, this.id);
7?? if((i=this.get("XMLData")))$.loadXmlData((/^\w+\.xml(\s|\?|$)/i.test(i)?$.xmlDataPath:"")+i,this.id);}
8?? var reg=new RegExp(_ +?this.id + r +"[^"+ _ + r +"]+", "g");?
9?? if((cs=$.indexes.match(reg))){for(i=0;i<cs.length;i++){
10???? tcn[tcn.length]=this.DTO(DataNodeClass, cs[i].substr(_.length));}}
11?? this.isLoaded =?true;
12?};
?
1?MzDataNode.prototype.loadChildNodes =?function(DataNodeClass)2?{
3?? var $=this.$$caller,r=$.dividerEncoding,_=$.get__(), i, cs;
4?? var tcn=this.childNodes;tcn.length=0;if(this.sourceIndex){
5?? if((i=this.get("JSData"))) $.loadJsData((/^\w+\.js(\s|\?|$)/i.test(i)?$.jsDataPath:"")+i);
6?? if((i=this.get("ULData"))) $.loadUlData(i, this.id);
7?? if((i=this.get("XMLData")))$.loadXmlData((/^\w+\.xml(\s|\?|$)/i.test(i)?$.xmlDataPath:"")+i,this.id);}
8?? //----------------
9?? var _id =?this.id;
10?? _id = _id.replace(/\(/g, "jackyxu").replace(/\)/g, "xujacky");
11?? var _indexes = $.indexes;
12?? _indexes = _indexes.replace(/\(/g, "jackyxu").replace(/\)/g, "xujacky");
13?? var reg=new RegExp(_ + _id + r +"[^"+ _ + r +"]+", "g");?
14?? if((cs=_indexes.match(reg))){for(i=0;i<cs.length;i++){
15???? tcn[tcn.length]=this.DTO(DataNodeClass, cs[i].substr(_.length).replace(/(jackyxu)/g, "(").replace(/(xujacky)/g, ")"));}}
16?? //----------------
17?? this.isLoaded =?true;
18?};
??? 當然，可能需要替換的字符不止是小括號，或者中括號、大括號等，但在我的項目中只會遇到使用小括號的情況，于是我也就只做了這樣的修改，如果想一勞永逸，讀者可以按照相似的方式專門編寫一個function進行正則表達式中特殊字符的處理。經過修改后的代碼可以使名稱中帶有小括號的的節點成功在樹中顯示，于是這個問題就解決了。
??? 接下來是不是就沒有問題了呢？不然！梅花雪的示例頁面中樹是在頁面load的時候加載上去的，沒有通過按鈕事件進行加載，就是說在頁面上沒有反復加載的過程，而在我的需求中是需要這么做的，于是我把樹的加載過程放在一個按鈕的事件中，這樣當我想重新加載樹的時候只需要點擊按鈕即可，不過這個時候問題就來了，每次我點擊按鈕重新加載樹的時候根節點前面都出現了莫名其妙的空白！看看下面的截圖。
???? Statutory是根節點，可是前面卻出現了空白，似乎梅花雪在樹加載的時候將它作為一個子節點處理了。我試著點了點這個空白的地方，發現是一張圖片，就是子節點前面的虛線。找到問題所在就好辦了，看看代碼吧！根節點只會在樹Render的時候顯示出來，那么問題應該出現在MzTreeView.js文件的Render方法中。
1?MzTreeView.prototype.render =?function()2?{
3?? function loadImg(C){for(var i in C){if("string"==typeof C[i]){
4?? var a=new Image(); a.src=me.iconPath + C[i]; C[i]=a;}}} var me=this;
5?? loadImg(MzTreeView.icons.expand);loadImg(MzTreeView.icons.collapse);
6?? loadImg(MzTreeView.icons.line); me.firstNode=null;
7?? loadCssFile(this.iconPath +"mztreeview.css", "MzTreeView_CSS");
8?
9?? this.initialize(); var str="no data", i, root=this.rootNode;
10?? if (root.hasChild){var a = [], c = root.childNodes; me.firstNode=c[0];
11?? for(i=0;i<c.length;i++)a[i]=c[i].render(i==c.length-1);str=a.join("");}
12?? setTimeout(function(){me.afterRender();}, 10);
13?? return?"<div class='mztreeview' id='MTV_root_"+?this.index +"' "+
14???? "οnclick='Instance(\""+ this.index +"\").clickHandle(event)' "+
15???? "οndblclick='Instance(\""+ this.index +"\").dblClickHandle(event)' "+
16???? ">"+ str +"</div>";
17?};???? 然而這個方法只是在頁面上加載了一些圖片和樣式表的引用，并畫出了一個div并給出了事件句柄，沒有什么特別的東西。上下隨意看了一下別的部分，發現有一個MzTreeNode對象，其中也有一個Render方法，仔細看了一下，問題就出現在這里。 1?MzTreeNode.prototype.render =?function(last)
2?{
3?? var $=this.$$caller, s=$.dataSource[this.sourceIndex],target,data,url;
4?? var icon=s.getAttribute("icon");
5?? if(!(target=s.getAttribute("target")))target=$.getDefaultTarget();
6?? var hint=$.showToolTip ? s.getAttribute("hint") ||?this.text : "";
7?? if(!(url=s.getAttribute("url"))) url = $.getDefaultUrl();
8?? if(data=s.getAttribute("data"))url+=(url.indexOf("?")==-1?"?":"&")+data;
9?
10?? var id=this.index, s="";
11?? var isRoot=this.parentNode==$.rootNode;
12?? if( isRoot && $.convertRootIcon &&?!icon) icon =?"root";
13?? if(!isRoot)this.childPrefix=this.parentNode.childPrefix+(last?",ll":",l4");
14?? if(!icon ||?typeof(MzTreeView.icons.collapse[icon])=="undefined")
15?? this.icon =?this.hasChild ??"folder" : "file"; else?this.icon = icon;
16?? this.line =?this.hasChild ? (last ??"pm2" : "pm1") : (last ??"l2" : "l1");
17?? if(!$.showLines) this.line =?this.hasChild ??"pm3" : "ll";
18?
19?? s +=?"<div><table border='0' cellpadding='0' cellspacing='0'>"+
20??????? "<tr title='"+ hint +"'><td>"; if (MzTreeNode.htmlChildPrefix)
21?? s += MzTreeNode.htmlChildPrefix +"</td><td>"; if(!isRoot)
22?? s +=?"<img border='0' id='"+ $.index +"_expand_"+ id +"' src='"+
23??????? (this.hasChild ? MzTreeView.icons.collapse[this.line].src :?
24??????? MzTreeView.icons.line[this.line].src)+"'>"; if($.showNodeIcon)
25?? s +=?"<img border='0' id='"+ $.index +"_icon_"+ id +"' src='"+?
26??????? MzTreeView.icons.collapse[this.icon].src +"'>"; if($.useCheckbox)
27?? s +=?"<img border='0' id='"+$.index +"_checkbox_"+ id +"' src='"+?
28??????? MzTreeView.icons.line["c"+ (this.checked?1:0)].src +"'>";
29?? s +=?"</td><td style='padding-left: 3px' nowrap='true'><a href='"+ url +
30??????? "' target='"+ target +"' id='"+$.index +"_link_"+ id +
31??????? "' class='MzTreeView'>"+?this.text +"</a></td></tr></table><div ";
32??????? if(isRoot&&this.text=="") s="<div><div ";
33?? s +=?"id='"+$.index+"_tree_"+id+"' style='display: none;'></div></div>";
34?? return s;
35?};???? if (MzTreeNode.htmlChildPrefix)這句話是用來判斷當前節點是否為子節點，如果是的話則會添加圖片在前面，莫名其妙的是我的當前節點是根節點，怎么也會符合這個判斷條件呢？這個應該還是梅花雪的一個Bug，不管這么多了，直接在if中添加一個判斷，即if (MzTreeNode.htmlChildPrefix && !isRoot)，如果當前節點是根節點，則不再添加圖片了。重新試了一下，果然可以了。接下來就是一些需求方面的小問題了，例如樹在初始化完畢之后總是會默認將焦點放在根節點上，這個問題很容易解決，可以修改樣式表將節點獲取焦點的樣式修改掉，或者在MzTreeView.js文件中將節點獲取焦點的代碼去掉。 1?MzTreeView.prototype.afterRender=function()
2?{
3?? var me=this;
4?? if(document.getElementById("MTV_root_"+ me.index))
5?? {
6???? //if(me.firstNode)(me.currentNode=me.firstNode).focus();
7???? this.dispatchEvent(new System.Event("onrender"));
8???? if(me.useArrow) me.attachEventArrow();
9?? }
10?? else setTimeout(function(){me.afterRender();}, 100);
11?};???? 還有一個問題，梅花雪樹在動態加載節點時是異步完成的，代碼中有判斷，當子節點的數目超過400個時，父節點打開的時候會顯示“正在加載...”，其實這個效果還是不錯的，給用戶的體驗不錯。但是現在樹在默認加載時要將所有節點全部展開，如果節點數目過多，加載時間也是很長的，這個時候并沒有顯示“正在加載”（梅花雪只對節點加載做了處理，而沒有對樹加載做處理），頁面會一直等待直到整棵樹全部加載完。這個時候的用戶體驗特別不好，如何解決這個問題呢？看來我們只有自己寫代碼來處理了！js中有一個系統方法setInterval，它可以在指定的時間間隔內執行代碼，我們可以規定一個時間段，每隔一個時間段就進行檢查，如果樹已經加載完畢就顯示樹，如果樹沒有加載完畢就給出一個提示（文字或圖片都可以），這個時候的用戶體驗相對會好很多。不過梅花雪樹本身并沒有提供用于判斷樹被加載完畢的標識，所以我們需要在MzTreeView.js文件中添加標識。
??? isend——判斷樹是否被加載完畢
??? lastNode——最后的節點
??? 在樹Render之前給lastNode賦值（最后一個節點的id），setInterval方法中不斷判斷樹是否已被加載完畢，然后做相應的處理，讀者可以參考我附件中的例子。需要修改MzTreeView.js文件中的MzTreeNode.prototype.expandLevel方法如下。
1?MzTreeNode.prototype.expandLevel =?function(level) {2???? if (level <=?0) return;
3???? level--; var me =?this;
4???? if (this.hasChild &&?!this.expanded) this.expand();
5???? if (level ==?1) {
6???????? if (this.hasChild) {
7???????????? var $ =?this.$$caller;
8???????????? for (i =?0; i <?this.childNodes.length; i++)
9???????????? if ($.lastNode !=?""?&&?this.childNodes[i].text == $.lastNode) $.isend =?true;
10???????? }
11???? }
12???? for (var x =?this.$$caller.index, i =?0, n =?this.childNodes.length; i < n; i++) {
13???????? var node =?this.childNodes[i], d = node.index; if (node.hasChild)
14???????????? setTimeout("Instance('"?+ x +?"').nodes['"?+ d +?"'].expandLevel("?+ level +?")", 1);
15???? }
16?};
??? 不過有個小小的缺陷，那就是采用上述方式loading樹的時候用于提示用戶的gif圖片不動了，直到整棵樹加載完成。這個問題是由于js本身是單線程處理的語言造成的，當js在采用setInterval方法加載樹的過程中一直會占用CPU的處理時間，這時便沒有功夫去處理gif圖片的動畫了。感興趣的讀者可以改造附件中的代碼，自己模擬多線程使gif圖片動起來。不過我最終還是放棄了使用gif圖片進行提示，改用文字了，反正達到預期的效果就好。
??? 結論：總體來說，梅花雪樹的效果還是不錯的，尤其在動態加載樹的節點，采用不同的方式綁定數據，并且還可以為樹的節點提供右鍵菜單，功能很強大，也為采用客戶端樹的開發人員提供了很大的便利。個人認為，web開發中采用客戶端樹總比采用服務器端樹效率要高，但復雜度高并且難以控制，適當并合理地借鑒前人的經驗，將會省去很多不必要的麻煩。雖然梅花雪樹經過了2個版本，但是在實際應用中還是暴露了不少的問題，作者給出的開發文檔和注釋也不全面，園子里有不少熱心的朋友都對梅花雪樹改造過，希望大家可以共同努力，打造一個功能更強大、更完美的梅花雪樹！！
??? 順便給出梅花雪樹2.0中重要文件的說明，其中標記為紅色的是主要修改的文件或資源。為了適應我的項目，經過修改后的梅花雪樹中刪除了部分沒有用的文件（如采用js和xml文件綁定數據等），修改了部分加載資源的路徑等。
| scripts\csdn\community\treedata\ | 該目錄下的文件用于綁定樹的數據源，包括js文件和xml文件。 |
| scripts\jsframework.js | mztreeview主框架代碼文件。 |
| scripts\system\_resource\mztreeview\ | 主要資源文件，包括樣式表和圖片。 |
| scripts\system\data\mzdata.js | 用于處理mztreeview節點數據。 |
| scripts\system\net\mzcookie.js | mztreeview的狀態可以保存到cookie中，該文件用于處理cookie的保存和獲取。 |
| scripts\system\plugins\ | 支持多瀏覽器版本數據加載的處理。 |
| scripts\system\web\ui\webcontrols\mztreeview.js | 生成mztreeview主結構的代碼文件。 |
| scripts\system\web\forms\mzeffect.js | mztreeview特殊效果處理文件。 |
| scripts\system\xml\mzxmldocument.js | 用于處理xml文檔。 |
| scripts\system\global.js | mztreeview全局配置文件。 |
梅花雪樹1.0下載
梅花雪樹2.0下載
經過修改后的梅花雪樹
轉載于:https://www.cnblogs.com/jaxu/archive/2009/03/16/1407972.html
總結
- 上一篇： libvirt虚拟化技术介绍
- 下一篇： LeetCode刷题：871. Mini