建站
咨詢
售后
建站咨詢
新聞中心
對(duì)于Javascript中checkbox樹的功能，扥多人還不是很了解，究竟checkbox樹有何作用，希望本文能對(duì)大家有所幫助。研究了幾天，終于搞出自己的樹來?？偨Y(jié)一下，留待以后改進(jìn)用。
創(chuàng)新互聯(lián)公司專注于靖遠(yuǎn)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供靖遠(yuǎn)營(yíng)銷型網(wǎng)站建設(shè)，靖遠(yuǎn)網(wǎng)站制作、靖遠(yuǎn)網(wǎng)頁(yè)設(shè)計(jì)、靖遠(yuǎn)網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造靖遠(yuǎn)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供靖遠(yuǎn)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
作為UI控件的樹與數(shù)據(jù)結(jié)構(gòu)的樹有很大的不同，它分為根節(jié)點(diǎn)，枝節(jié)點(diǎn)與葉節(jié)點(diǎn)。根節(jié)點(diǎn)有子樹，并不隸屬于其他樹。枝節(jié)點(diǎn)有子樹，并作為某一子樹的節(jié)點(diǎn)而存在。葉節(jié)點(diǎn)只作為某一子樹的節(jié)點(diǎn)而存在，并且沒有子樹。但僅是這樣，無法繪制樹的。我們看下面的圖，樹在網(wǎng)頁(yè)中無論樣子如何，從上到下都是一行行分開的。每一行都有幾張圖片與文本。這些圖片大致分三類，一是虛線圖標(biāo)與加號(hào)圖標(biāo)與減號(hào)圖標(biāo)，我把它們統(tǒng)稱為連線圖標(biāo)；二是裝飾用的文件夾圖標(biāo)，或者根節(jié)點(diǎn)的那個(gè)地球，或者葉子節(jié)點(diǎn)的文檔，或者類似的電腦、蘋果、回收站等等，我稱之為裝飾圖標(biāo)；***是checkbox，它分三種狀態(tài)。圖標(biāo)的種類如此多，僅是根枝葉加關(guān)閉展開這兩種狀態(tài)，也只是六種可能，因此我們還得把枝節(jié)點(diǎn)細(xì)分為普通枝與末枝，葉節(jié)點(diǎn)也一樣。由于連線圖標(biāo)與裝飾圖標(biāo)的作用很相似，裝飾圖標(biāo)好像是從視覺上強(qiáng)調(diào)點(diǎn)擊連線圖標(biāo)會(huì)出現(xiàn)的效果，因此我們可以用CSS把它們整合到一起，以節(jié)省一個(gè)DOM。
我們單獨(dú)拿根節(jié)點(diǎn)分析。表面上，它有三個(gè)圖標(biāo)，一個(gè)文本，實(shí)質(zhì)上，只有兩個(gè)圖標(biāo)，第二作為***個(gè)的背景而存在，文本位于span元素中。如果想點(diǎn)擊文字跳轉(zhuǎn)，也可以換成A元素。此外，還隱藏***一個(gè)DIV元素。它是用于裝載子樹與縮進(jìn)子樹的。這四個(gè)元素都位于一個(gè)DIV中，我把它稱之為根節(jié)點(diǎn)，并設(shè)置index屬性，用于與原數(shù)據(jù)相比較取得父節(jié)點(diǎn)的index。
01.var data = [ 02. [0,-1,"中國(guó)"],//根節(jié)點(diǎn) 03. [1,0,"北京市"],//枝節(jié)點(diǎn) 04. [2,0,"天津市"],//葉節(jié)點(diǎn) 05. [3,1,"市轄區(qū)"],//枝節(jié)點(diǎn) 06. [4,3,"東城區(qū)"],//葉節(jié)點(diǎn) 07. [5,3,"西城區(qū)"],//葉節(jié)點(diǎn) 08. [6,3,"崇文區(qū)"],//葉節(jié)點(diǎn) 09. [7,3,"朝陽(yáng)區(qū)"],//葉節(jié)點(diǎn) 10. [8,3,"豐臺(tái)區(qū)"]//葉節(jié)點(diǎn) 11.]
接著我們給圖標(biāo)加入一些識(shí)別要素，這對(duì)樣式表控制還是事件綁定都很有無用，因?yàn)閮H僅是一個(gè)index是非常乏力的。當(dāng)我們點(diǎn)擊連線圖標(biāo)，那個(gè)加號(hào)或減號(hào)，我們?cè)鯓幼尦绦蛑朗屈c(diǎn)擊了它呢？！我們給它一個(gè)className，為collapse與unfold。只要有這兩個(gè)類之一，我們就重設(shè)它的className，原來是collapse就改成unfold，反之亦然，然后再更換其src，以達(dá)到切換圖片的目的。它后面的裝飾圖標(biāo)是用樣式表控制（內(nèi)部樣式），因此當(dāng)className變了它會(huì)reflow，重新渲染頁(yè)面。難點(diǎn)在checkbox，當(dāng)點(diǎn)擊它時(shí)，會(huì)有一連串反應(yīng)，更換其父級(jí)節(jié)點(diǎn)的checkbox，更換自身，再更換其子孫。它有三種狀態(tài)，對(duì)應(yīng)三個(gè)className。0為子孫元素?zé)o選中，1為子孫元素全選中，2為子孫元素部分選中。算法非常復(fù)雜，渲染也非常復(fù)雜，如img為checkbox圖標(biāo)，它的parentNode才為樹的節(jié)點(diǎn)元素，如果它非根節(jié)點(diǎn)，那它肯定還被一個(gè)DIV包裹著，img.parentNode.parentNode.parentNode才為其上級(jí)的樹節(jié)點(diǎn)元素，這個(gè)節(jié)點(diǎn)的第二個(gè)IMG元素就是它頂上的那個(gè)checkbox。要訪問其下級(jí)的checkbox，就更復(fù)雜了！總之，多處用到遞歸，自己看源碼吧。由于沒有學(xué)過數(shù)據(jù)結(jié)構(gòu)與算法，實(shí)現(xiàn)有點(diǎn)劣拙，功能這么少也得一百五十行，慚愧萬分。bug也無法自排，因此請(qǐng)勿用于商用，后果自負(fù)。
- var getPriorCheckbox = function(checkbox){
- var node = checkbox.parentNode;//取得對(duì)應(yīng)的樹節(jié)點(diǎn)
- if(/root/.test(node.className)){//判斷是否根節(jié)點(diǎn)
- return false;
- }else{
- var priorNode = node.parentNode.parentNode;//取得對(duì)應(yīng)的上級(jí)樹節(jié)點(diǎn)
- return priorNode.children[1];
- }
- }
樹 by 司徒正美
鏈接：http://www.cnblogs.com/rubylouvre/archive/2009/10/26/1589692.html
本文標(biāo)題：詳解Javascript中checkbox樹的功能
本文鏈接：http://m.5511xx.com/article/cddjpgo.html
