树形列表

新手上路

树形结构json数据：

    根据json自带的树形结构行进递归便利

var json={"ul":[
        {
            "id": "1",
            "name": "父元素1",
            "child": [
                {
                    "id": 2,
                    "name": "子元素11"
                },
                {
                    "id": 6,
                    "name": "子元素12",
                }
            ]
        },
        {
            "id": "15",
            "name": "父元素2",
            "child": [{
                id: 1,
                name: "父元素21"
            }]
        }
    ]};
// 树形结构的json数据可以直接循环出结果

function tree (o) {
        var str = "";     // 定义一个str的全局字符串
        var ulstr = document.createElement("ul");  // 创建外框ul，用ul能很清晰看出层级
        child(o);                                  // 调用child函数 
            function  child(o) {
                for (var oj = 0; oj < o.length; oj++) {    // 遍历参数o
                    if(o[oj].child && o[oj].child.length){ // 检测是否有child，主要是检测child长度 
                        str += "<li>"+o[oj].name+"<ul>";   // 有下一级，在最后加入ul作为下一级的分割符
                        child(o[oj].child);                // 再次调用child，传入需要生成的数据
                        str += "</ul></li>";               // 递归完成时，加上后面的/ul，/li  
                    }else {
                        str += "<li>"+o[oj].name+"</li>";  //没有child，或者child长度为空，直接添加列     

                    }
            }
        }
        ulstr.innerHTML = str;                              
        document.getElementsByTagName("body")[0].appendChild(ulstr);
    }
tree(json.ul);

非树形结构json数据：

    非属性结构的数据我们需要进行一定的数据组装，才能获取到成功的解析，下面那种数据结构的好处是，后台能很方便的返回数据给前台，数据结构没有受到破坏。

var jsp = [
        {"id":1,name:"第一"},
        {"id":2,name:"第二",pid: 1},
        {"id":3,name:"第三",pid: 2},
        {"id":4,name:"第四",pid: 2},
        {"id":5,name:"第五",pid: 1},
        {"id":6,name:"第六"},
        {"id":7,name:"第七",pid:4},
        {"id":8,name:"第八",pid:6}
    ];
// pid代表parentId,意思就是有pid的就是同他相同的id的子元素

 function tree(jsp) {
        var str;
        str = "";
        var ulstr = document.createElement("ul");
        for( var i = 0; i< jsp.length; i++){
            if (!jsp[i].pid) {                        //找出没有pid的，没pid的代表是第一级
                pids(jsp[i]);
            }
        }
        function pids(o) {
            var child = [];                                // d用来存每一级的数据,并用来判断是否有下一级
            for (var i = 0; i < jsp.length; i++) {     // 循环找出所有的下一级   
                if (o.id == jsp[i].pid) {
                    child.push(jsp[i]);                 // 添加到child,现在的数据和上面那个demo的数据结构相同
                }
            }
            if (child.length) {                             //判定是否有下一级，接下来就是相同的了
                str += "<li>"+o.name+"<ul>";                 
                for(var g = 0; g < child.length ; g++){      
                    pids(child[g]);
                }
                str += "</ul></li>";
            } else {
                str += "<li>"+o.name+"</li>";
            }

        }

        ulstr.innerHTML = str;
        document.getElementsByTagName("body")[0].append(ulstr);
    }

代码下载地址：：

http://git.oschina.net/beginnerL/codes/zgfr4havpjt6lskmcx7eb72

转载于:https://my.oschina.net/u/3177810/blog/839535