JS動態構建一棵目錄樹

2022-08-18 21:42:09 字數 1078 閱讀 6526

在使用frameset布局的時候,經常會用到目錄樹,我們可以把一棵樹寫死,但是更多的情況是,這棵樹需要隨時被改動,所以我們期望的是他能夠被動態的構建。

mvc,算是了解一點,那本文就把這棵樹根據m-v-c給拆開分解吧。

下面就來看看這棵樹是怎麼構建的。 

var tree =    

},"a2":

},"a3": }};

這是一顆兩層的目錄樹,用id來表示層級關係,name來表示改層的名字(也就是節點text內容吧)。

var tree = function ( module )

}else if(obj.id && obj.id == 1) }}

//返回開始構建的ul節點

return n;

}//隱藏及顯示 工具函式

function toggle(c)

function createtree( obj )

return root;

}var t = createtree(module);

var list = t.children;

for(var i = 0, len = list.length; i < len; i++)

}return t;

}

這裡邊建立了三個函式,其中

createnodelist() //適用於構建乙個樹子節點
其中使用documentfragment作為乙個節點快取器,先把節點放置到documentfragment中,然後統一插入到ul,這也是比較常用的使用方式。

createtree() //構建一棵樹
基本整棵樹的構建就是分為這兩步,前者負責建立乙個子節點,後者構建一棵樹。

在這顆樹中繫結了click事件,讓其可以摺疊,當然也可以在tree這個類裡繫結更多的方法,這個就靠自己發揮了。

window.onload = function()
整棵樹的構建,主要用到的是dom元素的處理,這個必須牢牢掌握!

js畫一棵樹

用純js畫一棵樹。思路 1 一棵樹的,作為頁面背景 2 通過html5中的canvas畫布進行遮罩 3 定時每隔10ms,從下往上清除1px的遮罩 doctype html html head meta charset utf 8 title my js tree title style body ...

用Python語音構建一棵樹

從每乙個樹杈開始 基本思路是畫乙個 y 型,從根部出發,然後再返回根部,然後根據需要進行轉向與迭代。只要注意筆尖的方向就好。1 def greeny 2 turtle.fd 40 3 turtle.left 30 4 turtle.fd 20 5 turtle.backward 20 6 turtl...

一棵受傷的樹

有乙個農場主為了方便拴牛,在莊園的一棵榆樹上箍了乙個鐵圈。隨著榆樹的長大,鐵圈慢慢嵌進了樹身,榆樹的表皮留下一道深深的傷痕。有一年,當地發生了一種奇怪的植物真菌疫病,方圓幾十公里的榆樹全部死亡,唯獨那顆箍了鐵圈的榆樹卻存活下來。為什麼這棵榆樹能倖存呢?植物學家對此產生了興趣,於是組織人員進行研究。結...