dtree的使用和扩展
相信用過dtree的童靴的不在少數(shù)，網(wǎng)絡(luò)上流傳的JS樹有很多，例如雪花樹MzTreeView,EXT、Struts2出來(lái)之后，也有自己的樹控件，但是這么多風(fēng)姿卓約的倩影中，我獨(dú)愛，獨(dú)愛dtree那一棵。原因有二:1.簡(jiǎn)單易用，能滿足基本需要 2.代碼簡(jiǎn)單，擴(kuò)展起來(lái)也很容易。 這就像找MM一樣，簡(jiǎn)單單純傻傻的MM好，那些復(fù)雜要猜心的就讓她靠邊吧，不能把握的再美再好咋都不要，哈哈，扯遠(yuǎn)了。
言歸正傳，先介紹dtree的基本使用。第一步，引用dtree的資源，在你的頁(yè)面文件head標(biāo)簽中引用dtree的js文件和css樣式文件。例如我的代碼如下，路徑視你存放dtree資源的具體情況而定:
第二步，定義和展示樹。dtree通常可放在一個(gè)div中，在你的頁(yè)面文件中要顯示樹的地方，添加下列代碼:
<div class="dtree" > <script type="text/javascript">/* 1. 定義一個(gè)樹對(duì)象 */ var d = new dTree('d'); // 隱含創(chuàng)建一個(gè)根節(jié)點(diǎn),id等于-1，不可見/* 2. 添加一級(jí)節(jié)點(diǎn) */ d.add("0","-1","所有類別"); //這里-1是前面根節(jié)點(diǎn)的id，說明是新增的節(jié)點(diǎn)是d的直接子節(jié)點(diǎn)/* 循環(huán)添加其他節(jié)點(diǎn) */ /* 3. 參數(shù)說明:1.ID 2.父ID 3.名稱 4.URL 5.熱點(diǎn)提示 6.URL顯示目標(biāo)target 7.節(jié)點(diǎn)關(guān)閉時(shí)圖標(biāo) 8.節(jié)點(diǎn)打開時(shí)圖標(biāo) 9.判斷節(jié)點(diǎn)是否打開 */ <c:forEach items="${userLogSortList}" var="treeNode">d.add( "${treeNode.sortId}","${treeNode.parentId}","${treeNode.sortName}", "${treeNode.url}","${treeNode.sortName}","logList");</c:forEach> /* 4.寫的div中展示 */ document.write(d);</script> </div>對(duì)前面代碼，簡(jiǎn)單說明:其中注釋里1到3步是對(duì)樹各節(jié)點(diǎn)的定義，注釋4是把樹最終展示到頁(yè)面，其中1到3步的代碼中用到EL循環(huán)和表達(dá)式，EL是什么就不要我解釋了吧？！如果你不想使用dtree默認(rèn)的節(jié)點(diǎn)關(guān)閉和打開的圖標(biāo)，你也可以在add函數(shù)的第7個(gè)和第8個(gè)參數(shù)中填上你自己中意的圖標(biāo)路徑。
怎么樣，很簡(jiǎn)單吧，當(dāng)然，樹的數(shù)據(jù)需要你在后臺(tái)準(zhǔn)備好，這對(duì)那種樹控件都是逃避不了的工作。 但在實(shí)際使用中，dtree會(huì)有不足，在有些應(yīng)用場(chǎng)景不能滿足我們的需求，所以有必要對(duì)dtree進(jìn)行擴(kuò)展，這就好比為了愛，我們會(huì)不斷使自己進(jìn)步，讓自己變得更優(yōu)秀，盡力把最美好的一面展示給對(duì)方，我想dtree如果有靈性，她也希望如此的，呵呵。但是在向完美靠近的過程中，需要根據(jù)自身實(shí)際情況采取合適的方法，否則適得其反，所以我們有必要先了解dtree，打開你的dtree.js文件吧，讓我們感受感受dtree的內(nèi)心，就像感受和情人之間的心靈默契，有些東西語(yǔ)言是多余的。
dtree.js中最主要有下面幾個(gè)函數(shù)：
1.節(jié)點(diǎn)定義函數(shù)：function Node(id, pid, name, url, title, target, icon, iconOpen, open)
其中函數(shù)中_is屬性表示是否被選擇，_ls屬性表示是否為最后一個(gè)兄弟節(jié)點(diǎn)，_hc表示是否有子節(jié)點(diǎn)，_p指向父節(jié)點(diǎn).
2.樹對(duì)象定義函數(shù)：function dTree(objName) :
該函數(shù)完成后述功能：a.定義樹全局配置信息 b.定義樹默認(rèn)圖標(biāo) c.創(chuàng)建樹對(duì)象和根節(jié)點(diǎn)，創(chuàng)建根節(jié)點(diǎn)時(shí)會(huì)調(diào)用函數(shù)1.
3.節(jié)點(diǎn)添加函數(shù)：dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) 實(shí)際是調(diào)用函數(shù)1定義節(jié)點(diǎn)屬性，同時(shí)把節(jié)點(diǎn)增加到樹對(duì)象的aNodes節(jié)點(diǎn)數(shù)組中
4.dTree.prototype.node = function(node, nodeId)?
根據(jù)定義構(gòu)建節(jié)點(diǎn)的圖標(biāo)、url(關(guān)聯(lián)展開和關(guān)閉函數(shù)到非末節(jié)點(diǎn))以及顯示文本。
5.dTree.prototype.addNode = function(pNode)?
根據(jù)定義構(gòu)建樹首次展示的結(jié)構(gòu)模型，會(huì)調(diào)用函數(shù)4
6.dTree.prototype.toString = function()?
調(diào)用函數(shù)4、5，串化dtree展示到頁(yè)面div中。
以上函數(shù)1到3在前面代碼中定義的步驟時(shí)會(huì)調(diào)用，函數(shù)4到5在前面代碼中展示樹的步驟會(huì)調(diào)用，這是最重要的幾個(gè)函數(shù)了，
是dtree的思想精華所在了，呵呵，其他的是事件觸發(fā)函數(shù)。學(xué)習(xí)prototype的童靴也可以用dtree.js作為學(xué)習(xí)的入門課本，不錯(cuò)的。
了解了dtree的內(nèi)心，我們?cè)賮?lái)說說擴(kuò)展，我這里的第一個(gè)需求是為dtree增加checkbox按鈕，我想這個(gè)是很多童靴都想要的吧，網(wǎng)上已經(jīng)有很多這樣的例子，我也就借花獻(xiàn)佛了、拋金引玉了。
步驟1，把函數(shù)1頭修改為function Node(id, pid, name, url, title, target, icon, iconOpen, open,checked,isBottom) ，在函數(shù)體增加下列代碼:
?
步驟2，在函數(shù)2的函數(shù)體的config信息中增加下列代碼：
check: false , useAllData: false?
其中useAllData這個(gè)屬性及相關(guān)代碼可能不是你想要的，但這里我一起給列出來(lái)了。
步驟3，函數(shù)3的函數(shù)體修改后如下：
var node = new Node(id, pid, name, url, title, target, icon, iconOpen, open, checked,isBottom);this.aNodes[this.aNodes.length] = node; var n; var len = this.aNodes.length; if ( node.checked ){ var pid = node.pid; var bSearch; do{ bSearch = false; for( n = 0; n < len; n++){ if ( this.aNodes[n].id == pid){ if (this.aNodes[n].checked == false){ this.aNodes[n].checked=true; pid = this.aNodes[n].pid; bSearch= true; break; } } } }while(bSearch==true); }?
后面兩重循環(huán)的作用是，當(dāng)一個(gè)節(jié)點(diǎn)被勾選時(shí)候，改變其父輩祖宗節(jié)點(diǎn)的選擇狀態(tài)定義。
步驟4，在函數(shù)4中創(chuàng)建圖標(biāo)的代碼段中增加下列代碼，該代碼的作用是用來(lái)構(gòu)建節(jié)點(diǎn)checkbox的圖標(biāo)以及為節(jié)點(diǎn)關(guān)聯(lián)checkbox勾選觸發(fā)函數(shù)：
if(this.config.check == true){ if(node.checked ==true){ str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" '; if (this.config.useAllData) { str+= ' name="dataId" '; } if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; } str+= ' οnclick="javascript:'+this.obj+'.cc('+nodeId+')" checked />'; }else{ str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" '; if (this.config.useAllData) { str+= ' name="dataId" '; } if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; } str+= ' οnclick="javascript:'+this.obj+'.cc('+nodeId+')" />'; } }?
步驟5，增加一個(gè)新的函數(shù)，就是步驟4的cc函數(shù)，作用是單節(jié)點(diǎn)checkbox勾選狀態(tài)改變時(shí)，改變相應(yīng)祖宗節(jié)點(diǎn)和子孫節(jié)點(diǎn)checkbox的狀態(tài)，如下：
dTree.prototype.cc=function(nodeId){ var cs = document.getElementById("c"+this.obj+nodeId).checked; var n,node = this.aNodes[nodeId]; var len =this.aNodes.length;for (n=0; n<len; n++) {if (this.aNodes[n].pid == node.id) { document.getElementById("c"+this.obj+n).checked=cs; this.cc(n); } } if (cs ==f alse){ var clicknode=node do{ for( j=0; j<l en; j++){ if(this.aNodes[j].pid==clicknode.pid&&document.getElementById ("c"+this.obj+j).checked==true){ return; } } if ( j == len) { for(k=0;k<len;k++){ if (this.aNodes[k].id == clicknode.pid ){ document.getElementById("c"+this.obj+k).checked=false; clicknode=this.aNodes[k]; break; } } }}while(clicknode.pid!=-1);} if(cs==true){ var pid=node.pid; var bSearch; do{ bSearch=false; for(n=0;n<len;n++){ if (this.aNodes[n].id == pid ){ document.getElementById("c"+this.obj+n).checked = true; pid = this.aNodes[n].pid; bSearch = true; break; } } }while(bSearch==true); }}?
稍微麻煩點(diǎn)，但是看到checkbox出來(lái)時(shí)，我想你會(huì)有成就感，就象歷盡艱辛情路追到你心儀女孩后時(shí)內(nèi)心的雀躍。
最后講講擴(kuò)展的第二個(gè)需求，為末級(jí)節(jié)點(diǎn)增加外部js函數(shù)調(diào)用，外部js函數(shù)是留給童靴們?cè)谑褂脮r(shí)去實(shí)現(xiàn)的，這樣子，童靴們可以在這個(gè)外包js函數(shù)去定制和樹有關(guān)的其他業(yè)務(wù)動(dòng)作，甚至是異步調(diào)用，實(shí)現(xiàn)ajax的無(wú)刷新效果。具體擴(kuò)展方法是，在函數(shù)4中判斷url的代碼中再增加一個(gè)分支，代碼如下：
else if ((!this.config.folderLinks || !node.url) && !node._hc && node.pid != this.root.id){ str += '<a href="javascript: ' + this.obj + 'treeNodeClick(' + node.id + ');" class="node">'; }?
轉(zhuǎn)載于:https://www.cnblogs.com/iteakey/p/4052167.html
總結(jié)
以上是生活随笔為你收集整理的dtree的使用和扩展的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： text-overflow
- 下一篇： ida提取hashab算法记录