最近參與了一個jsp項目，其間要處理一個用戶對權限的關系，權限列表用帶checkbox的樹型結構來展示，于是到網(wǎng)上找“js 樹形結構”，很快便找到了dtree，找到連接，下載了一個帶ｃｈｅｃｋｂｏｘ的ｄｔｒｅｅ，又找到一篇動態(tài)構建樹形結構的文章（http://zc4530.blog.51cto.com/96735/29722 ）， 三下五除二，根據(jù)自己使用的數(shù)據(jù)庫寫了一個符合例子數(shù)據(jù)庫要求的ｓｑｌ，往數(shù)據(jù)庫中插入三十幾條數(shù)據(jù)，中間遇到幾個小問題，但很快就解決了，最后打開頁 面，一顆帶有ｃｈｅｃｋｂｏｘ的樹形菜單展示出來了，心里興奮了一陣，大贊ｄｔｒｅｅ的輕便易用，就接著做下面的事情了。

過了幾天版本發(fā)布，交付測試，很快測試找到了我，我過去一看，頁面上只有一個小窗口：“stack overflow at line:。。。”，暈倒！！

我立刻意識到性能問題，于是很快找到了ｄｔｒｅｅ的致命遞歸（http://tech.ddvip.com/2009-03/1237891234112143.html ），我們的實際庫數(shù)據(jù)量上幾千，看來ｄｔｒｅｅ是無能為力了，前功盡棄！唉，這就是開發(fā)人員的命運，繼續(xù)找資料，于是找到了被稱為大蝦的梅花雪，以及他的成名作：MzTreeView！我找到了救星，事不宜遲，時間不多了！

首先還是下載控件，構建動態(tài)樹形結構，循環(huán)結果集的代碼：

???String tree = "";
???tree += "var data={}; ";

???while (rs.next()) {
????String id = String.valueOf(rs.getString("id"));
????String pid = String.valueOf(rs.getString("parentId"));
????String text = rs.getString("text");
????String hint = rs.getString("hint");
????String url = rs.getString("url");
????String target = rs.getString("target");
????tree += "/n" + "data" + "[/'" + pid + "_" + id
????+ "/']= /'";
????if (text != null && text.trim() != "") {
?????tree += "text:" + text + ";";
????}
????if (hint != null && !hint.trim().equals("")) {
?????tree += "hint:" + hint + ";";
????}
????//tree += "checked:false;";
????if (url != null && !url.trim().equals("")) {
?????tree += "url:" + url + ";";
????}
????if (target != null && !target.trim().equals("")) {
?????tree += "target:" + target + ";";
????}
????tree += "/';";
???}

我興奮地輸入網(wǎng)址，空白！立刻查看源文件，文本顯示類似：
??????? data['1_9001'] = 'text: 我感興趣的社區(qū);'; //JSData: myselect.aspx
??????? data['1_9002'] = 'text: 我的技術社區(qū) xml; XMLData: mycommunity.xml ';
??????? data['1_9009'] = 'text: 開發(fā)語言; url:/Expert/ForumsList.asp?typenum=1&roomid=1 ; JSData: scripts/csdn/community/treedata/language.js ';
??????? data['1_54'] = 'text: Java 技術; url:/Expert/ForumsList.asp?typenum=1&roomid=54 ; JSData: scripts/csdn/community/treedata/java.js ';

有什么問題嗎？我又找到了梅花雪的例子，一步一步對比，原來問題出在這里，根節(jié)點！這個錯誤有點幼稚，但不注意還是真困惑，根節(jié)點必須以－１作為父結點ｉｄ，于是修改代碼：

???String tree = "";
???tree += "var data={}; data['-1_0']='text:預算單位';";

刷新頁面，可愛的梅花雪數(shù)終于出來了！

文章寫到這里才開始進入主題，相信用不到的人是看不下去的， ，僅以上述文字，紀念我悲慘的經(jīng)歷， ，好，第一個問題，如何獲取選中值？這個網(wǎng)上資料較多：

var nodes = Tree.nodes;

??????? for(var i in nodes) {
??????????? if(nodes[i].checked){
??????????????? text = nodes[i].text ;
??????????? }
??????? }

當然，也可通過nodes.parentId nodes.id獲取父節(jié)點ｉｄ，節(jié)點ｉｄ，這里注意，梅花雪樹節(jié)點是沒有l(wèi)ength屬性的，所以不能通過for(var i=0;i<nodes.length;i++)來循環(huán)。第二個問題，如何設置默認值？有人給出了一個解決方案，就是在創(chuàng)建節(jié)點時添加屬性：

data['1_9001'] = 'text: 我感興趣的社區(qū);checked:true';

經(jīng)驗證，確實是可以的，但是不能滿足我們的需求，我的項目需要動態(tài)選中checkbox，如選擇一個用戶，動態(tài)顯示用戶對應的權限，到網(wǎng)上查了很多 資料，很多人都有類似需求，但卻沒有人給出有效的解決方案，有人說節(jié)點的checkbox是圖片，要想辦法改變圖片之類，真是越看越困惑，無意中看到了梅 花雪大蝦的ｑｑ：梅花雪(112889082);我滿懷興奮，添加了好友，但是。。。。。沒有反應！

估計大蝦也很忙啊，我給出自己一個解釋，可是我的問題怎么辦？時間越來越近了

問題的解決很多時候都是一時的靈感，拿著梅花雪的例子點來點去，我突然想到，既然可以通過選中父級來選中子節(jié)點，一定可以通過事件來選中了，接下來只有一個辦法，閱讀源碼，找到單擊事件！

最為ｊａｖａ開發(fā)人員，估計大多數(shù)都不愿意閱讀ｊｓ的代碼的，不是逼到這步田地，我也不會耐下心來的

//private: attachEvent tree onClick
MzTreeView.prototype.clickHandle = function(e)
{
? e = window.event || e; var B;
? e = e.srcElement || e.target;
? if(B=(e.id && 0==e.id.indexOf(this.index +"_")))
? {
??? var n=this.currentNode=this.nodes[e.id.substr(e.id.lastIndexOf("_")+1)];
? }
? switch(e.tagName)
? {
??? case "IMG" :
????? if(B)
????? {
??????? if(e.id.indexOf(this.index +"_expand_")==0){
????????? n.expanded ? n.collapse() : n.expand();}
??????? else if(e.id.indexOf(this.index +"_icon_")==0){
????????? n.focus();}
??????? else if(e.id.indexOf(this.index +"_checkbox_")==0){
????????? n.check(!n.checked); n.upCheck();}
????? }
????? break;
??? case "A":
????? if(B){ n.focus(); this.dispatchEvent(new System.Event("onclick"));}
????? break;
??? default :
????? if(System.ns) e = e.parentNode;
????? break;
? }
};

看到這里估計你已經(jīng)很清楚了，? n.check(!n.checked); n.upCheck();，就是這里，是通過函數(shù)check(true);來實現(xiàn)的，終于可以盡快結束這段噩夢了

總結

以上是生活随笔為你收集整理的梅花雪MzTreeView2.0 的checkbox完全攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。