javascript-TreeView父子聯動效果保持節點狀態一致

2024-09-06 12:41:49

字體：大中小

來源：轉載

供稿：網友

我們大部分都用過TreeView控件，對這個控件的評價也是各式各樣的，但是我覺得不論如何它是一個免費的開源的控件，所以我還是在用它。在剛接觸ASP.NET的時候，記得需要做一個分配權限的權限樹，當時只知道有這個樹，經過一天的研究對其服務器端的行為基本以及搞清楚了，但是由于當時的js水平有限，所以對客戶端的代碼很畏懼，基本沒有看過。
當時有這樣一個要求：如果一個節點被選中則該節點的所有子節點都要選中，如果該節點的所有子節點取消選擇則該節點也要取消選擇（節點一致性），相反一樣。
還有一個要求就是：如果可以實現三態樹則更好（這個有點難，本文中不予討論）。本文將詳細介紹前面要求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;

上一篇：javascript下給元素添加事件的方法與代碼

下一篇：javascript引用對象的方法代碼