使用JS動態(tài)構(gòu)建目錄樹
在使用frameset布局的時候,經(jīng)常會用到目錄樹,我們可以把一棵樹寫死,但是更多的情況是,這棵樹需要隨時被改動,所以我們期望的是他能夠被動態(tài)的構(gòu)建。
MVC,算是了解一點,那本文就把這棵樹根據(jù)M-V-C給拆開分解吧。
下面就來看看這棵樹是怎么構(gòu)建的。
Module [數(shù)據(jù)層]
var tree = { "id": 0, "a1": { "id": 1, "name": "a1", "children": { "b1": "b1_1", "b2": "b1_2", "b3": "b1_3" } }, "a2": { "id": 1, "name": "a2", "children": {} }, "a3": { "id": 1, "name": "a3", "children": { "b1": "b3_1", "b2": "b3_2", "b3": "b3_3" } } };
這是一顆兩層的目錄樹,用ID來表示層級關(guān)系,name來表示改層的名字(也就是節(jié)點Text內(nèi)容吧)。
Control [控制層]
var Tree = function ( module ){ function createNodeList( obj ) { //創(chuàng)建ul節(jié)點和documentFragmeng中間變量 var n = document.createElement("ul"), docfrag = document.createDocumentFragment(); //判斷obj是根節(jié)點還是孩子節(jié)點 if(obj.id == 0) { n.setAttribute("class", "tree_0"); for(var key in obj) { if(key == "id") continue; //將節(jié)點插入 var c = document.createElement("li"), span = document.createElement("span"); span.appendChild(document.createTextNode( obj[key].name )); c.appendChild(span); docfrag.appendChild( c ); } }else if(obj.id && obj.id == 1) { n.setAttribute("class", "tree_1"); for(var key in obj) { if(key == "id" || key == "name" || !obj.children) continue; for( var item in obj.children){ //將節(jié)點插入 var c = document.createElement("li"); c.appendChild(document.createTextNode( obj.children[item] )); docfrag.appendChild( c ); } } } n.appendChild( docfrag ); //返回開始構(gòu)建的ul節(jié)點 return n; } //隱藏及顯示 工具函數(shù) function toggle(c){ c.style.display = ((c.style.display == "none") ? "" : "none"); } function createTree( obj ) { var root, child, count = 0; root = createNodeList( obj ); for(var key in obj){ if(obj[key] == "id" || !obj[key].children) continue; child = createNodeList(obj[key]); root.children[count].appendChild( child ); //count來判斷插入的位置 count++; } return root; } var T = createTree(module); var list = T.children; for(var i = 0, len = list.length; i < len; i++){ list[i].getElementsByTagName("span")[0].onclick = function(){ var obj = this.nextSibling; toggle(obj); } } return T; }
這里邊創(chuàng)建了三個函數(shù),其中
createNodeList() //適用于構(gòu)建一個樹子節(jié)點
其中使用documentFragment作為一個節(jié)點緩存器,先把節(jié)點放置到documentFragment中,然后統(tǒng)一插入到ul,這也是比較常用的使用方式。
createTree() //構(gòu)建一棵樹
基本整棵樹的構(gòu)建就是分為這兩步,前者負(fù)責(zé)創(chuàng)建一個子節(jié)點,后者構(gòu)建一棵樹。
在這顆樹中綁定了click事件,讓其可以折疊,當(dāng)然也可以在Tree這個類里綁定更多的方法,這個就靠自己發(fā)揮了。
View [視圖層]
window.onload = function(){ var T = new Tree(tree); document.getElementsByTagName("body")[0].appendChild(T); }
整棵樹的構(gòu)建,主要用到的是DOM元素的處理,這個必須牢牢掌握!
到此這篇關(guān)于使用JS動態(tài)構(gòu)建目錄樹的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ajax中g(shù)et和post的說明及使用與區(qū)別
對付亂碼我都是用過濾器做字符編碼過濾的,Get方法過濾器監(jiān)聽不到,所以我一直喜歡使用Post方法,下面對Ajax Get和Post方法做一對比,需要了解的朋友可以 參考下2012-12-12javascript 手動給表增加數(shù)據(jù)的小例子
這篇文章介紹了js手動給表增加數(shù)據(jù)的實例代碼,有需要的朋友可以參考一下2013-07-07學(xué)習(xí)使用bootstrap的modal和carousel
這篇文章主要教大家學(xué)會用bootstrap的modal和carousel,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12玩轉(zhuǎn)JavaScript OOP - 類的實現(xiàn)詳解
下面小編就為大家?guī)硪黄孓D(zhuǎn)JavaScript OOP - 類的實現(xiàn)詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06用js實現(xiàn)的檢測瀏覽器和系統(tǒng)的函數(shù)
檢測各種瀏覽器、系統(tǒng)的JS代碼2009-04-04