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