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

最新評論