zoukankan      html  css  js  c++  java
  • js中把ajax获取的数据转化成树状结构(并做成多级联动效果)

    1、首先通过ajax获取数据,此处省略,直接贴出获取到的数据格式

    var arr = [{
        id: 1,
        name: "一级标题",
        pid: 0
    }, {
        id: 2,
        name: "二级标题",
        pid: 0
    }, {
        id: 3,
        name: "2.1级标题",
        pid: 2
    }, {
        id: 4,
        name: "2.2级标题",
        pid: 2
    }, {
        id: 5,
        name: "1.1级标题",
        pid: 1
    }, {
        id: 6,
        name: "1.2级标题",
        pid: 1
    }, {
        id: 7,
        name: "1.21级标题",
        pid: 6
    }, {
        id: 8,
        name: "三级标题",
        pid: 0
    }, {
        id: 9,
        name: "1.22级标题",
        pid: 6
    }, {
        id: 10,
        name: "1.221级标题",
        pid: 9
    }, {
        id: 11,
        name: "1.2211级标题",
        pid: 10
    }, {
        id: 12,
        name: "1.2212级标题",
        pid: 10
    }

    2.定义函数 proJSON将获取到的数据转化为树状结构

    function proJSON(oldArr, pid) {
        var newArr = [];
        var self = this;
        oldArr.map(function(item) {
            if(item.pid == pid) {
                var obj = {
                    id: item.id,
                    value: item.name
                }
                var childs = self.proJSON(oldArr, item.id);
                if(childs.length > 0) {
                    obj.childs = childs
                }
                newArr.push(obj)
            }
     
        })
        return newArr;
    };

    3.调用函数,将原始数据转化为树状结构数据

    $(function(){
                var testdata = proJSON(arr,0);
                console.log(testdata);         
    })

    此时输出的即为以下格式的树状结构

    [{
        id: 1,
        value: "一级标题",
    }, {
        id: 2,
        value: "二级标题",
        childs:[{
            id:3,
            value:"2.1级标题"
        }]
    }
    ];
  • 相关阅读:
    poj 1860 Currency Exchange(最短路径的应用)
    poj 2965 The Pilots Brothers' refrigerator
    zoj 1827 the game of 31 (有限制的博弈论)
    poj 3295 Tautology (构造法)
    poj 1753 Flip Game(枚举)
    poj 2109 (贪心)
    poj 1328(贪心)
    Qt 对单个控件美化
    Qt 4基础
    Bash Shell
  • 原文地址:https://www.cnblogs.com/bing0709/p/10760743.html
Copyright © 2011-2022 走看看