完美解决前后端交互中后端返回树形结构数据

原创已于 2022-03-19 16:51:01 修改 · 8.9k 阅读

86 ·

CC 4.0 BY-SA版权

文章标签：

#树形结构json #treenode #vue #java #树形结构数据

于 2021-03-17 22:36:53 首次发布

实际中一些问题专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种将扁平化的列表数据转换成树形结构的方法。通过定义TreeNode类及利用递归方法，实现了从前端所需的树形数据到后端处理的转换过程。此方法能够有效地组织层次分明的数据。

在我们开发中，前端有些树形组件需要的数据类型更多是树形类型，比如Element中的树节点：

前端需要补充的数据类型是：

[{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]

为了将计算放在后端，而不将复杂的计算放置在前端上，我们后端就要对返回的普通list进行处理。

我们需要以下步骤：

（1）先创建TreeNode类

@Data
public class TreeNode {
    private String id;
    private String label;//名称
    private String pid;//级别，用于识别在树形结构归属问题
    private List<TreeNode> children = new ArrayList<>();

}

（2）创建一个工具类，工具类里添加以下这个方法：该方法是使用递归去遍历去添加构成树形结构。

public class TreeNodeUtil {

    public static List<TreeNode> transformData(List<TreeNode> treeNodeList, String pid){
        List<TreeNode> list=new LinkedList<TreeNode>();
        for (TreeNode node:treeNodeList){
            if (node.getPid().equals(pid)){
                node.setChildren(transformData(treeNodeList,node.getId()));
                list.add(node);
            }
        }
        return list;
    }

}

（3）创建一个List<TreeNode>集合，并在里面添加对应的信息，并在pid字段赋值归属的父类id（比如我当前的数据是架构组，我希望的归属于研发中心，研发中心的id是100086，那么我可以在当前信息中添加pid为100086，这样就可以归属于研发中心）。同时我们给根目录的pid设置为0。

list.add(new TreeNodeVo(100235,“架构组”,"100086",null));
。。。。。。

（4）将数据信息集合赋值给transformData方法，完成属性结构转换。

result = TreeNodeUtil.transformData(list,"0");

最后result的结构如下：

[
    {
        "id": "100086",
        "name": "研发中心",
        "pid": "0",
        "children": [
            {
                "id": "100235",
                "name": "架构组",
                "pid": "100086",
                "children": [
                    {
                        "id": "26666",
                        "name": "架构组二部",
                        "pid": "100235",
                        "children": null
                    }
                ]
            }
        ]
    },
    {
        "id": "444444",
        "name": "人力资源部",
        "pid": "0",
        "children": null
    }
]