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