线性数据转树形结构

偶尔会遇到后端给个线性数据,而前端需要转成树形结构的... 简单的参考一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
</head>
<body>
<div>
</div>
<script>
$(function () {
var data = [
    {
       "ID": "892d6872-39d2-4a95-aae1-8226bdf28a0a",
       "PID": "00000000-0000-0000-0000-000000000000",
       "Name": "四川",
       "PName": "无",
       "ComID": ""
    },
    {
      "ID": "6682ceca-e526-4d10-b234-7bfd01126939",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0a",
      "Name": "成都",
        "PName": "四川",
       "ComID": ""
    },
    {
        "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0a",
       "Name": "绵阳",
       "PName": "四川",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0a",
       "Name": "德阳",
       "PName": "四川",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0a",
       "Name": "南充",
       "PName": "四川",
       "ComID": ""
    },
    {
       "ID": "892d6872-39d2-4a95-aae1-8226bdf28a0",
       "PID": "00000000-0000-0000-0000-000000000000",
       "Name": "广东",
       "PName": "无",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0",
       "Name": "广州市",
       "PName": "广东",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0",
       "Name": "深圳市",
       "PName": "广东",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0",
       "Name": "东莞市",
       "PName": "广东",
       "ComID": ""
    },
    {
       "ID": "6682ceca-e526-4d10-b234-7bfd0112693",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf28a0",
       "Name": "珠海市",
       "PName": "广东",
       "ComID": ""
    },
    {
       "ID": "892d6872-39d2-4a95-aae1-8226bdf268",
       "PID": "00000000-0000-0000-0000-000000000000",
       "Name": "重庆市",
       "PName": "无",
       "ComID": ""
    },
    {
       "ID": "892d6872-39d2-4a95-aae1-8226b",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf268",
       "Name": "渝北区",
       "PName": "重庆市",
       "ComID": ""
    },
    {
       "ID": "892d6872-39d2-4a95-aae1-8226sssb",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf268",
       "Name": "渝中区",
       "PName": "重庆市",
       "ComID": ""
    },
    {
       "ID": "892d6872-39d2-4a95-aae1-8226sssb",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf268",
       "Name": "沙坪坝区",
       "PName": "重庆市",
       "ComID": ""
    },
    {
     "ID": "892d6872-39d2-4a95-aae1-8226sssb",
       "PID": "892d6872-39d2-4a95-aae1-8226bdf268",
       "Name": "沙坪坝区",
       "PName": "重庆市",
      "ComID": ""
    }
];
// console.log(data);
var list =[
    {
        "id": 2,
        "title": "西安",
        "parent_id": 0
    },
    {
        "id": 3,
        "title": "成都",
        "parent_id": 0
    },
    {
        "id": 4,
        "title": "华阳",
        "parent_id": 3
    },
    {
        "id": 5,
        "title": "广都上街",
        "parent_id": 4
    },
    {
        "id": 18,
        "title": "广都上街156号",
        "parent_id": 5
    },
    {
        "id": 19,
        "title": "广都上街156号",
        "parent_id": 18
    },
    {
        "id": 6,
        "title": "龙泉",
        "parent_id": 3
    },
    {
        "id": 8,
        "title": "青白江",
        "parent_id": 3
    },
    {
        "id": 9,
        "title": "正北上街",
        "parent_id": 4
    },
    {
        "id": 10,
        "title": "重庆",
        "parent_id": 0
    },
    {
        "id": 11,
        "title": "长寿",
        "parent_id": 10
    }
];
/**
     * 线性数据转化为树
     * @param {Object} data 源数据
     * @param {Object} parentKey 父级id key
     * @param {childrenKey} childrenKey 子集key
     * @param {Object} pId 父级标识符
     */
    function toTree(data, parentKey,childrenKey, pId) {
        var tree = [];
        var temp;
        for (var i = 0; i < data.length; i++) {
            if (data[i][parentKey] == pId) {
                var obj = data[i];
                temp = toTree(data, parentKey,childrenKey,data[i][childrenKey]);
                if (temp.length > 0) {
                 obj.children = temp;
                }
                tree.push(obj);
            }
        }
        return tree;
    }
    
    console.log(toTree(data,'PID','ID','00000000-0000-0000-0000-000000000000'));
    
    document.write(JSON.stringify(toTree(data,'PID','ID','00000000-0000-0000-0000-000000000000')));
})
</script>
</body>
</html>
参考: http://hao2013.cn/?id=53
线性数据转树形结构

猜你喜欢
