最简便的list数据转树形结构方法(递归详细)

时间:2025-03-05 15:14:31

后台返回数据是一行一行的,但是前端展示要树形结构数据,所以需要我们自己处理函数了,小编在此献丑了,小写一个简便函数供大家参考,希望反馈一下。

返回数据格式 :

var list = [

{ name: '根目录1' , id: 1, parentId: 0 }, 

{ name: '根目录2' , id: 2, parentId: 0 }, 

{ name: '目录1-1' , id: 3, parentId: 1 },

{name: '目录1-2' , id: 4, parentId: 1 },

{name: '目录2-1' , id: 5, parentId: 2 },

{name: '目录1-2-1' , id: 6, parentId: 4 }

];

看到数据格式,大家很明白,name用来显示的,id是唯一值,parentId是父目录的id,而且第一级的父id为0;所以根据这个我们就可以组装了,函数如下

 

function arrayToTree(arr, parentId) {

     //  arr 是返回的数据  parendId 父id

    let temp = [];

    let treeArr = arr;

    ((item, index) => {

        if ( == parentId) {

            if (arrayToTree(treeArr, treeArr[index].id).length > 0) {

                 // 递归调用此函数

              treeArr[index].children = arrayToTree(treeArr, treeArr[index].id);

            }

            (treeArr[index]);

        }

   });

   return temp;

}

(arrayToTree(list , 0));   // 第一级的父目录id是0;写死调用

// [{ name: ‘根目录1’ , id: 1: parentId: 0 , children:[{ name: ‘目录1-1’ , id: 3: parentId: 1 },{ name: ‘目录1-2’ , id: 4: parentId: 1              , children:[{name: ‘目录1-2-1’ , id: 6, parentId: 4 }]}]}, 

    { name: ‘根目录2’ , id: 2: parentId: 0 , children:[{ name: ‘目录2-1’ , id: 5: parentId: 2 } ]}

]