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算法记录