javascript checkbox樹
研究了幾天，終于搞出自己的樹來。總結一下，留待以后改進用。
作為UI控件的樹與數據結構的樹有很大的不同，它分為根節點，枝節點與葉節點。根節點有子樹，并不隸屬于其他樹。枝節點有子樹，并作為某一子樹的節點而存在。葉節點只作為某一子樹的節點而存在，并且沒有子樹。但僅是這樣，無法繪制樹的。我們看下面的圖，樹在網頁中無論樣子如何，從上到下都是一行行分開的。每一行都有幾張圖片與文本。這些圖片大致分三類，一是虛線圖標與加號圖標與減號圖標，我把它們統稱為連線圖標；二是裝飾用的文件夾圖標，或者根節點的那個地球，或者葉子節點的文檔，或者類似的電腦、蘋果、回收站等等，我稱之為裝飾圖標；最后是checkbox，它分三種狀態。圖標的種類如此多，僅是根枝葉加關閉展開這兩種狀態，也只是六種可能，因此我們還得把枝節點細分為普通枝與末枝，葉節點也一樣。由于連線圖標與裝飾圖標的作用很相似，裝飾圖標好像是從視覺上強調點擊連線圖標會出現的效果，因此我們可以用CSS把它們整合到一起，以節省一個DOM。
我們單獨拿根節點分析。表面上，它有三個圖標，一個文本，實質上，只有兩個圖標，第二作為第一個的背景而存在，文本位于span元素中。如果想點擊文字跳轉，也可以換成A元素。此外，還隱藏最后一個DIV元素。它是用于裝載子樹與縮進子樹的。這四個元素都位于一個DIV中，我把它稱之為根節點，并設置index屬性，用于與原數據相比較取得父節點的index。
var data = [ [0,-1,"中國"],//根節點 [1,0,"北京市"],//枝節點 [2,0,"天津市"],//葉節點 [3,1,"市轄區"],//枝節點 [4,3,"東城區"],//葉節點 [5,3,"西城區"],//葉節點 [6,3,"崇文區"],//葉節點 [7,3,"朝陽區"],//葉節點 [8,3,"豐臺區"]//葉節點 ]
接著我們給圖標加入一些識別要素，這對樣式表控制還是事件綁定都很有無用，因為僅僅是一個index是非常乏力的。當我們點擊連線圖標，那個加號或減號，我們怎樣讓程序知道是點擊了它呢？！我們給它一個className，為collapse與unfold。只要有這兩個類之一，我們就重設它的className，原來是collapse就改成unfold，反之亦然，然后再更換其src，以達到切換圖片的目的。它后面的裝飾圖標是用樣式表控制（內部樣式），因此當className變了它會reflow，重新渲染頁面。難點在checkbox，當點擊它時，會有一連串反應，更換其父級節點的checkbox，更換自身，再更換其子孫。它有三種狀態，對應三個className。0為子孫元素無選中，1為子孫元素全選中，2為子孫元素部分選中。算法非常復雜，渲染也非常復雜，如img為checkbox圖標，它的parentNode才為樹的節點元素，如果它非根節點，那它肯定還被一個DIV包裹著，img.parentNode.parentNode.parentNode才為其上級的樹節點元素，這個節點的第二個IMG元素就是它頂上的那個checkbox。要訪問其下級的checkbox，就更復雜了！總之，多處用到遞歸，自己看源碼吧。由于沒有學過數據結構與算法，實現有點劣拙，功能這么少也得一百五十行，慚愧萬分。bug也無法自排，因此請勿用于商用，后果自負。
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]; } }
留言列表
