完美解决前后端交互中后端返回树形结构数据 |
您所在的位置：网站首页 › 挂图作战实施方案怎么写好 › 完美解决前后端交互中后端返回树形结构数据 |
完美解决前后端交互中后端返回树形结构数据
|
在我们开发中，前端有些树形组件需要的数据类型更多是树形类型，比如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 children = new ArrayList(); }（2）创建一个工具类，工具类里添加以下这个方法：该方法是使用递归去遍历去添加构成树形结构。 public class TreeNodeUtil { public static List transformData(List treeNodeList, String pid){ List list=new LinkedList(); for (TreeNode node:treeNodeList){ if (node.getPid().equals(pid)){ node.setChildren(transformData(treeNodeList,node.getId())); list.add(node); } } return list; } }（3）创建一个List集合，并在里面添加对应的信息，并在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 } ] |
【本文地址】
今日新闻 |
推荐新闻 |