|
|
當(dāng)時(shí)有這樣一個(gè)要求：如果一個(gè)節(jié)點(diǎn)被選中則該節(jié)點(diǎn)的所有子節(jié)點(diǎn)都要選中，如果該節(jié)點(diǎn)的所有子節(jié)點(diǎn)取消選擇則該節(jié)點(diǎn)也要取消選擇（節(jié)點(diǎn)一致性），相反一樣。
還有一個(gè)要求就是：如果可以實(shí)現(xiàn)三態(tài)樹則更好（這個(gè)有點(diǎn)難，本文中不予討論）。本文將詳細(xì)介紹前面要求1。
首先我們要慶幸微軟的這個(gè)TreeView控件是開源的，不論是客戶端代碼還是服務(wù)器端代碼您都可以輕松獲得，可以去微軟的網(wǎng)站上下載。在網(wǎng)上也見過一些講述該問題的文章，他們大多是使用一個(gè)TreeView之外的js實(shí)現(xiàn)，我個(gè)人認(rèn)為從面向?qū)ο蟮挠^點(diǎn)，該功能屬于TreeView，所以沒有理由將它分離出去，因此今天我將修改TreeView.htc來實(shí)現(xiàn)上面的功能。要想獲得該文件（TreeView.htc）可以去微軟的網(wǎng)站上下載之。
說實(shí)在的該功能曾經(jīng)也困擾了我很久，一直想解決這個(gè)問題，但是一直沒有時(shí)間來研究TreeView.htc中的代碼，今天終于下決心搞定它。
我們知道在TreeView的oncheck中需要激發(fā)該事件處理函數(shù)，這個(gè)函數(shù)很容易找到，可以在TreeView生成的客戶度腳本中找到，代碼片斷如下：
oncheck="Javascript: if (this.clickedNodeIndex != null) this.queueEvent('oncheck', this.clickedNodeIndex)"
由此我們可以去htc（以后說的htc都指的是TreeView.htc），找到doCheckboxClick方法，只要看名字就知道它是干什么的（命名實(shí)在太重要了，否則在3000行代碼中找某個(gè)函數(shù)真的很累）。
該方法是當(dāng)用戶點(diǎn)擊CheckBox的使用要處理的函數(shù)，函數(shù)如下所示：
function doCheckboxClick(el){
var checked = private_getAttribute(el,"checked")
el.checked = !checked;
var evt = createEventObject();
evt.treeNodeIndex = getNodeIndex(el);
g_nodeClicked = el;
_tvevtCheck.fire(evt);
setNodeState(el,el.checked);// maybe need el only,but I think it's safly
}
其中第一行、第二行以及最后一行是我添加的，第一二行是為了在頁面回傳以后checked屬性無效時(shí)所做的修改，按照原來的方法在提交后el.checked是undefined，所以導(dǎo)致無法正確同步節(jié)點(diǎn)，如果讀者有興趣可以試一試。setNodeState函數(shù)，從名字上可以看出該函數(shù)是用來設(shè)置節(jié)點(diǎn)狀態(tài)的，它將當(dāng)前你選擇的節(jié)點(diǎn)作為參數(shù)傳遞到函數(shù)內(nèi)部。如注釋中所說實(shí)際上你可以只傳遞el進(jìn)去，而無需再傳一個(gè)布爾值，不過我想這樣傳遞可能更安全，不過沒有關(guān)系，你覺得不爽可以修改:。
下面看看setNodeState的函數(shù)體，該函數(shù)由兩個(gè)方法組成，一個(gè)是設(shè)置所有孩子節(jié)點(diǎn)的狀態(tài)，一個(gè)是設(shè)置該節(jié)點(diǎn)的父節(jié)點(diǎn)狀態(tài)。代碼如下：
function setNodeState(el,state){
_setChildNode(el,state);
_setParentNode(el,state);
}
為了可以設(shè)置當(dāng)前節(jié)點(diǎn)的所有孩子節(jié)點(diǎn)是否和父節(jié)點(diǎn)（本節(jié)點(diǎn)）狀態(tài)一至我們需要函數(shù)_setChildNode，同理為了使節(jié)點(diǎn)的父節(jié)點(diǎn)和該節(jié)點(diǎn)狀態(tài)一至我們需要_setParentNode函數(shù)。兩個(gè)函數(shù)都是遞歸函數(shù)，將會(huì)遍歷所有的子節(jié)點(diǎn)和所有的父節(jié)點(diǎn)以及兄弟節(jié)點(diǎn)（為什么要遍歷兄弟節(jié)點(diǎn)稍候再說），下面我們先看看遍歷孩子節(jié)點(diǎn)的代碼，代碼如下所示：
function _setChildNode(el,state){
var childNodes = el.children;
if(childNodes.length > 0){// if has childs
for(var i = 0 ;i<=childNodes.length-1;i++){
private_setAttribute(childNodes[i],"Checked",state);
_saveCheckState(childNodes[i]);
_setChildNode(childNodes[i],state);
}
}
}
該函數(shù)先獲得當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)，這里可以直接使用TreeView提供的函數(shù)getChildren方法，而我使用的使html的原始方法。如果該節(jié)點(diǎn)存在子節(jié)點(diǎn)則遍歷所有子節(jié)點(diǎn)，同時(shí)設(shè)置子節(jié)點(diǎn)的狀態(tài)和當(dāng)前節(jié)點(diǎn)的狀態(tài)一致，_saveCheckState函數(shù)的作用稍候會(huì)介紹。private_setAttribute方法為TreeView提供的一個(gè)內(nèi)部設(shè)置屬性的方法（js沒有private關(guān)鍵字，這里只是做說明而已），該方法將設(shè)置每一個(gè)節(jié)點(diǎn)的Checked屬性為當(dāng)前這個(gè)節(jié)點(diǎn)的狀態(tài)。
下面是如何設(shè)置父節(jié)點(diǎn)狀態(tài)的代碼：
function _setParentNode(el,state){
var parentNode = el.parentElement;
if(parentNode){
if(!_checkSiblingdNode(el)){
private_setAttribute(parentNode,"Checked",state);
_saveCheckState(parentNode);
_setParentNode(parentNode,state);
}
}
}
該函數(shù)先獲得其父節(jié)點(diǎn)，如果父節(jié)點(diǎn)存在則檢查當(dāng)前節(jié)點(diǎn)的兄弟節(jié)點(diǎn)，上面有提到了需要檢查兄弟節(jié)點(diǎn)，這里檢查兄弟節(jié)點(diǎn)的目的是：父節(jié)點(diǎn)的狀態(tài)不是由當(dāng)前節(jié)點(diǎn)一個(gè)節(jié)點(diǎn)控制的（這種情況只存在于當(dāng)前節(jié)點(diǎn)沒有兄弟節(jié)點(diǎn)的情況下），如果有其他兄弟是選中的，那么父節(jié)點(diǎn)是不能被取消了，這樣將導(dǎo)致兄弟節(jié)點(diǎn)和父子節(jié)點(diǎn)不一致不一致。該函數(shù)里面也調(diào)用了_saveCheckState函數(shù)，在后面將介紹之。
下面的代碼描述了如何檢查兄弟節(jié)點(diǎn)的狀態(tài)，代碼如下：
function _checkSiblingdNode(el){
var parentNode = el.parentElement;// you can use getParentTreeNode function in this htc,but I like this usage.
for(var i = 0;i<=parentNode.children.length-1;i++){
if(el != parentNode.children[i]){
if(private_getAttribute(parentNode.children[i],"Checked")){
return true;
}
}
}
return false;
}
正如注釋所述，你可以使用getParentTreeNode方法來獲得節(jié)點(diǎn)的父節(jié)點(diǎn)，但是我比較喜歡使用原始的方法:。這里將排除自己（if(el!=parentNode.children[i])）。
有了上面的代碼我們就可以做到客戶端無刷新的父子節(jié)點(diǎn)一致的選擇，那么我們現(xiàn)在來介紹一下_saveCheckState函數(shù)，如果沒有該函數(shù)頁面提交以后，剛才除了手工點(diǎn)擊的節(jié)點(diǎn)以外其他的節(jié)點(diǎn)都不能保存狀態(tài)。所以該函數(shù)的作用就是要保存所有節(jié)點(diǎn)的狀態(tài)（主要是自動(dòng)選擇的節(jié)點(diǎn)），保證在回傳之后樹的狀態(tài)依然存在。下面的代碼描述了_saveCheckState函數(shù)，代碼如下：
function _saveCheckState(el){
if(getNodeIndex(el))
queueEvent('oncheck', getNodeIndex(el));
}
該方法首先檢查當(dāng)前節(jié)點(diǎn)的index是否有效，如果有效則保存狀態(tài)。這里需要說一下queueEvent方法做了什么，代碼我就不帖了，該函數(shù)的實(shí)際意義是將客戶端的操作保存在一個(gè)名為__TreeView1_State__的隱藏域中，這樣在回傳的時(shí)候服務(wù)器端會(huì)根據(jù)該隱藏域，初始化樹的狀態(tài)。其中TreeView1是我在測(cè)試系統(tǒng)中TreeView的名字。
最后的問題就是部署的問題了，因?yàn)樾薷牧薶tc，所以在部署的時(shí)候需要替換原來的htc文件。
如果有需要修改之后的TreeView.htc（格式化之后的），可以在CSDN上改我留言留下email。我的CSDN帳號(hào)是cuike519。
希望微軟可以早日將這個(gè)功能添加到TreeView控件中，最好也能實(shí)現(xiàn)多態(tài)的樹結(jié)構(gòu)。請(qǐng)瀏覽blog的相關(guān)評(píng)論，我會(huì)在評(píng)論中更新文章！
JavaScript技術(shù)：javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
