好看的言情小说,玄幻小说完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

詳解Javascript中checkbox樹的功能

對于Javascript中checkbox樹的功能，扥多人還不是很了解，究竟checkbox樹有何作用，希望本文能對大家有所幫助。研究了幾天，終于搞出自己的樹來?？偨Y(jié)一下，留待以后改進(jìn)用。

創(chuàng)新互聯(lián)公司專注于靖遠(yuǎn)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供靖遠(yuǎn)營銷型網(wǎng)站建設(shè)，靖遠(yuǎn)網(wǎng)站制作、靖遠(yuǎn)網(wǎng)頁設(shè)計、靖遠(yuǎn)網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造靖遠(yuǎn)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供靖遠(yuǎn)網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

作為UI控件的樹與數(shù)據(jù)結(jié)構(gòu)的樹有很大的不同，它分為根節(jié)點，枝節(jié)點與葉節(jié)點。根節(jié)點有子樹，并不隸屬于其他樹。枝節(jié)點有子樹，并作為某一子樹的節(jié)點而存在。葉節(jié)點只作為某一子樹的節(jié)點而存在，并且沒有子樹。但僅是這樣，無法繪制樹的。我們看下面的圖，樹在網(wǎng)頁中無論樣子如何，從上到下都是一行行分開的。每一行都有幾張圖片與文本。這些圖片大致分三類，一是虛線圖標(biāo)與加號圖標(biāo)與減號圖標(biāo)，我把它們統(tǒng)稱為連線圖標(biāo)；二是裝飾用的文件夾圖標(biāo)，或者根節(jié)點的那個地球，或者葉子節(jié)點的文檔，或者類似的電腦、蘋果、回收站等等，我稱之為裝飾圖標(biāo)；***是checkbox，它分三種狀態(tài)。圖標(biāo)的種類如此多，僅是根枝葉加關(guān)閉展開這兩種狀態(tài)，也只是六種可能，因此我們還得把枝節(jié)點細(xì)分為普通枝與末枝，葉節(jié)點也一樣。由于連線圖標(biāo)與裝飾圖標(biāo)的作用很相似，裝飾圖標(biāo)好像是從視覺上強(qiáng)調(diào)點擊連線圖標(biāo)會出現(xiàn)的效果，因此我們可以用CSS把它們整合到一起，以節(jié)省一個DOM。

我們單獨(dú)拿根節(jié)點分析。表面上，它有三個圖標(biāo)，一個文本，實質(zhì)上，只有兩個圖標(biāo)，第二作為***個的背景而存在，文本位于span元素中。如果想點擊文字跳轉(zhuǎn)，也可以換成A元素。此外，還隱藏***一個DIV元素。它是用于裝載子樹與縮進(jìn)子樹的。這四個元素都位于一個DIV中，我把它稱之為根節(jié)點，并設(shè)置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.
]

接著我們給圖標(biāo)加入一些識別要素，這對樣式表控制還是事件綁定都很有無用，因為僅僅是一個index是非常乏力的。當(dāng)我們點擊連線圖標(biāo)，那個加號或減號，我們怎樣讓程序知道是點擊了它呢？！我們給它一個className，為collapse與unfold。只要有這兩個類之一，我們就重設(shè)它的className，原來是collapse就改成unfold，反之亦然，然后再更換其src，以達(dá)到切換圖片的目的。它后面的裝飾圖標(biāo)是用樣式表控制（內(nèi)部樣式），因此當(dāng)className變了它會reflow，重新渲染頁面。難點在checkbox，當(dāng)點擊它時，會有一連串反應(yīng)，更換其父級節(jié)點的checkbox，更換自身，再更換其子孫。它有三種狀態(tài)，對應(yīng)三個className。0為子孫元素?zé)o選中，1為子孫元素全選中，2為子孫元素部分選中。算法非常復(fù)雜，渲染也非常復(fù)雜，如img為checkbox圖標(biāo)，它的parentNode才為樹的節(jié)點元素，如果它非根節(jié)點，那它肯定還被一個DIV包裹著，img.parentNode.parentNode.parentNode才為其上級的樹節(jié)點元素，這個節(jié)點的第二個IMG元素就是它頂上的那個checkbox。要訪問其下級的checkbox，就更復(fù)雜了！總之，多處用到遞歸，自己看源碼吧。由于沒有學(xué)過數(shù)據(jù)結(jié)構(gòu)與算法，實現(xiàn)有點劣拙，功能這么少也得一百五十行，慚愧萬分。bug也無法自排，因此請勿用于商用，后果自負(fù)。

 
 
 
  
  
  var getPriorCheckbox = function(checkbox){  
  
  
     var node = checkbox.parentNode;//取得對應(yīng)的樹節(jié)點  
  
  
     if(/root/.test(node.className)){//判斷是否根節(jié)點  
  
  
      return false;  
  
  
     }else{  
  
  
      var priorNode = node.parentNode.parentNode;//取得對應(yīng)的上級樹節(jié)點  
  
  
      return priorNode.children[1];  
  
  
    }  
  
  
   }

樹 by 司徒正美

鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/10/26/1589692.html

當(dāng)前標(biāo)題：詳解Javascript中checkbox樹的功能
鏈接URL：http://fisionsoft.com.cn/article/cddjpgo.html

新聞中心

樹 by 司徒正美

其他資訊