亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)

 更新時(shí)間：2022年01月12日 11:45:19   作者：Barret李靖  
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在使用frameset布局的時(shí)候，經(jīng)常會(huì)用到目錄樹(shù)，我們可以把一棵樹(shù)寫(xiě)死，但是更多的情況是，這棵樹(shù)需要隨時(shí)被改動(dòng)，所以我們期望的是他能夠被動(dòng)態(tài)的構(gòu)建。

MVC，算是了解一點(diǎn)，那本文就把這棵樹(shù)根據(jù)M-V-C給拆開(kāi)分解吧。

下面就來(lái)看看這棵樹(shù)是怎么構(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"
                }
            }
        };

這是一顆兩層的目錄樹(shù)，用ID來(lái)表示層級(jí)關(guān)系，name來(lái)表示改層的名字（也就是節(jié)點(diǎn)Text內(nèi)容吧）。

Control [控制層]

var Tree = function ( module ){
    function createNodeList( obj ) {
        //創(chuàng)建ul節(jié)點(diǎn)和documentFragmeng中間變量
        var n = document.createElement("ul"),
            docfrag = document.createDocumentFragment();

        //判斷obj是根節(jié)點(diǎn)還是孩子節(jié)點(diǎn)
        if(obj.id == 0) {
            n.setAttribute("class", "tree_0");

            for(var key in obj) {
                if(key == "id") continue;
                //將節(jié)點(diǎn)插入
                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é)點(diǎn)插入
                    var c = document.createElement("li");
                    c.appendChild(document.createTextNode( obj.children[item] ));
                    docfrag.appendChild( c );
                }
            }
        }
        n.appendChild( docfrag );
        //返回開(kāi)始構(gòu)建的ul節(jié)點(diǎn)
        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來(lái)判斷插入的位置
            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)建了三個(gè)函數(shù)，其中

createNodeList() //適用于構(gòu)建一個(gè)樹(shù)子節(jié)點(diǎn)

其中使用documentFragment作為一個(gè)節(jié)點(diǎn)緩存器，先把節(jié)點(diǎn)放置到documentFragment中，然后統(tǒng)一插入到ul，這也是比較常用的使用方式。

createTree() //構(gòu)建一棵樹(shù)

基本整棵樹(shù)的構(gòu)建就是分為這兩步，前者負(fù)責(zé)創(chuàng)建一個(gè)子節(jié)點(diǎn)，后者構(gòu)建一棵樹(shù)。

在這顆樹(shù)中綁定了click事件，讓其可以折疊，當(dāng)然也可以在Tree這個(gè)類里綁定更多的方法，這個(gè)就靠自己發(fā)揮了。

View [視圖層]

window.onload = function(){
    var T = new Tree(tree);
    document.getElementsByTagName("body")[0].appendChild(T);
}

整棵樹(shù)的構(gòu)建，主要用到的是DOM元素的處理，這個(gè)必須牢牢掌握！

到此這篇關(guān)于使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論