研究了幾天，終于搞出自己的樹來。總結(jié)一下，留待以后改進用。

　　作為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)好像是從視覺上強調(diào)點擊連線圖標(biāo)會出現(xiàn)的效果，因此我們可以用CSS把它們整合到一起，以節(jié)省一個DOM。

it知識庫：javascript checkbox樹，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。