詳解Javascript中checkbox樹的功能
對于Javascript中checkbox樹的功能，扥多人還不是很了解，究竟checkbox樹有何作用，希望本文能對大家有所幫助。研究了幾天，終于搞出自己的樹來。總結一下，留待以后改進用。
作為UI控件的樹與數據結構的樹有很大的不同，它分為根節點，枝節點與葉節點。根節點有子樹，并不隸屬于其他樹。枝節點有子樹，并作為某一子樹的節點而存在。葉節點只作為某一子樹的節點而存在，并且沒有子樹。但僅是這樣，無法繪制樹的。我們看下面的圖，樹在網頁中無論樣子如何，從上到下都是一行行分開的。每一行都有幾張圖片與文本。這些圖片大致分三類，一是虛線圖標與加號圖標與減號圖標，我把它們統稱為連線圖標；二是裝飾用的文件夾圖標，或者根節點的那個地球，或者葉子節點的文檔，或者類似的電腦、蘋果、回收站等等，我稱之為裝飾圖標；***是checkbox，它分三種狀態。圖標的種類如此多，僅是根枝葉加關閉展開這兩種狀態，也只是六種可能，因此我們還得把枝節點細分為普通枝與末枝，葉節點也一樣。由于連線圖標與裝飾圖標的作用很相似，裝飾圖標好像是從視覺上強調點擊連線圖標會出現的效果，因此我們可以用CSS把它們整合到一起，以節省一個DOM。
我們單獨拿根節點分析。表面上，它有三個圖標，一個文本，實質上，只有兩個圖標，第二作為***個的背景而存在，文本位于span元素中。如果想點擊文字跳轉，也可以換成A元素。此外，還隱藏***一個DIV元素。它是用于裝載子樹與縮進子樹的。這四個元素都位于一個DIV中，我把它稱之為根節點，并設置index屬性，用于與原數據相比較取得父節點的index。
01.var data = [ 02. [0,-1,"中國"],//根節點 03. [1,0,"北京市"],//枝節點 04. [2,0,"天津市"],//葉節點 05. [3,1,"市轄區"],//枝節點 06. [4,3,"東城區"],//葉節點 07. [5,3,"西城區"],//葉節點 08. [6,3,"崇文區"],//葉節點 09. [7,3,"朝陽區"],//葉節點 10. [8,3,"豐臺區"]//葉節點 11.]接著我們給圖標加入一些識別要素，這對樣式表控制還是事件綁定都很有無用，因為僅僅是一個index是非常乏力的。當我們點擊連線圖標，那個加號或減號，我們怎樣讓程序知道是點擊了它呢？！我們給它一個className，為collapse與unfold。只要有這兩個類之一，我們就重設它的className，原來是collapse就改成unfold，反之亦然，然后再更換其src，以達到切換圖片的目的。它后面的裝飾圖標是用樣式表控制（內部樣式），因此當className變了它會reflow，重新渲染頁面。難點在checkbox，當點擊它時，會有一連串反應，更換其父級節點的checkbox，更換自身，再更換其子孫。它有三種狀態，對應三個className。0為子孫元素無選中，1為子孫元素全選中，2為子孫元素部分選中。算法非常復雜，渲染也非常復雜，如img為checkbox圖標，它的parentNode才為樹的節點元素，如果它非根節點，那它肯定還被一個DIV包裹著，img.parentNode.
- var getPriorCheckbox = function(checkbox){
- var node = checkbox.parentNode;//取得對應的樹節點
- if(/root/.test(node.className)){//判斷是否根節點
- return false;
- }else{
- var priorNode = node.parentNode.parentNode;//取得對應的上級樹節點
- return priorNode.children[1];
- }
- }
原文標題：javascript checkbox樹
鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/10/26/1589692.html
【編輯推薦】
