把平级数据变成树形数据

最新推荐文章于 2023-11-28 21:29:39 发布

奥皮

最新推荐文章于 2023-11-28 21:29:39 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： js 树形数据扁平数据递归

原文链接：https://segmentfault.com/a/1190000010400342

版权

js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

把平级数据转换成树形数据

[
    {element:'图片',id:'1',pid:'0'},//count=1
    {element:'大图片',id:'2',pid:'1'},
    {element:'png',id:'3',pid:'2'},
    {element:'jpeg',id:'4',pid:'2'},
    {element:'gif',id:'5',pid:'2'},
    {element:'gif11',id:'6',pid:'5'},
    {element:'gif111',id:'7',pid:'6'},
    {element:'gif222',id:'8',pid:'6'},
    {element:'文字',id:'9',pid:'0'},
    {element:'宋体',id:'10',pid:'9'},
    {element:'宋体111',id:'11',pid:'10'},
    {element:'宋体222',id:'12',pid:'10'},
    {element:'黑体',id:'13',pid:'9'},
]

把上面代码转化成树形数组

<html>
<head>
    <title>tree</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var data=[
    {element:'图片',id:'1',pid:'0'},//count=1
    {element:'大图片',id:'2',pid:'1'},
    {element:'png',id:'3',pid:'2'},
    {element:'jpeg',id:'4',pid:'2'},
    {element:'gif',id:'5',pid:'2'},
    {element:'gif11',id:'6',pid:'5'},
    {element:'gif111',id:'7',pid:'6'},
    {element:'gif222',id:'8',pid:'6'},
    {element:'文字',id:'9',pid:'0'},
    {element:'宋体',id:'10',pid:'9'},
    {element:'宋体111',id:'11',pid:'10'},
    {element:'宋体222',id:'12',pid:'10'},
    {element:'黑体',id:'13',pid:'9'},
]
function transTreeData(items){
    if(items.length>0){
        var curPid= 0 //pid=0，为最上层节点 ，即无父节点
        var parent=findChild(curPid);//数组
        return parent;
    }else{
        return [];
    }
}
//找子节点
function findChild (curPid){
    var _arr = [];
    var items=data;
    var length=items.length;
    for(var i = 0; i < length; i++){
        if(items[i].pid == curPid){
            var _obj = items[i];
            _obj.children = findChild(_obj.id);
            _arr.push(_obj);
        }
    }
    return _arr;
}
console.log(transTreeData(data));
</script>

打印出来的结果

打印出来的树形数据

奥皮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
把平级数据变成树形数据

把平级数据转换成树形数据[ {element:'图片',id:'1',pid:'0'},//count=1 {element:'大图片',id:'2',pid:'1'}, {element:'png',id:'3',pid:'2'}, {element:'jpeg',id:'4',pid:'2'}, {element:'gif',id:'5',pid:'2...
复制链接

扫一扫