后台数据转树形结构返回前台

本文介绍了一种将扁平数据转换为树形数据结构的方法,适用于前后端交互,通过定义实体类、创建工具类和使用递归算法实现数据的层次化展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前台向后台请求数据时可能会希望能得到一个树结构的数据结构,方便我们前台获取和使用,也能使得数据结构清晰。这时候需要,后台将数据转化为树形结构。整体思路为:

1. 定义树形结构的实体类
2. 新建工具类,利用递归算法,将数据循环遍历并且返回
3. 在controller层,将工具类开辟空间,调用其中的递归算法

代码如下:
1,实体类

public class Tree {

	private String id;//主键
	private String parent_code;//父级编码
	private String tree_name;//树结构的名字
	
	private String isparent;//是否是父极
	private String tree_sort;//排序
	private String tree_img;//树结构的图片
	//get和set方法省略,各位自己生成
}

2,定义工具类

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
public class MenuTreeUtil {
	   
	  public static Map<String,Object> mapArray = new LinkedHashMap<String, Object>(); 
	  public List<Tree> menuCommon; 
	  public List<Object> list = new ArrayList<Object>(); 
	    
	  public List<Object> menuList(List<Tree> menu){ //controller层调用的方法   ,并将数据以list的形式返回
	    this.menuCommon = menu; 
	    for (Tree x : menu) {   
	      Map<String,Object> mapArr = new LinkedHashMap<String, Object>(); 
	      if(x.getIsparent().equals("true")&&x.getParent_code().equals("0")){ //判断是否为父极
	        mapArr.put("id", x.getId()); 
	        mapArr.put("tree_name", x.getTree_name());  
	        mapArr.put("parent_code", x.getParent_code());
	        mapArr.put("hasChildren", x.getIsparent());
	        mapArr.put("tree_img", x.getTree_img());
	        mapArr.put("tree_sort", x.getTree_sort());
	        
	        
	        mapArr.put("child", menuChild(x.getId()));  //去子集查找遍历
	        list.add(mapArr); 
	      } 
	    }   
	    return list; 
	  } 
	   
	  public List<?> menuChild(String id){ //子集查找遍历
	    List<Object> lists = new ArrayList<Object>(); 
	    for(Tree a:menuCommon){ 
	      Map<String,Object> childArray = new LinkedHashMap<String, Object>(); 
	      if(a.getParent_code().equals(id) ){ 
	        childArray.put("id", a.getId()); 
	        childArray.put("tree_name", a.getTree_name()); 
	        childArray.put("parent_code", a.getParent_code());
	        
	        childArray.put("tree_img", a.getTree_img());
	        childArray.put("tree_sort", a.getTree_sort());
	        childArray.put("hasChildren", a.getIsparent());
	        childArray.put("child", menuChild(a.getId()));
	        lists.add(childArray); 
	      } 
	    } 
	    return lists; 
	  } 
	 
	}

3, controller层调用(代码有删减,主要思路1,循环遍历从数据库从查询的所有数据。2,为利用工具类方法的set和get方法,将数据放到list中3,将新生成的list数据,提交给工具类)

@PostMapping(value = "/queryTree")
	public Object findPage() {

		Map<String, Object> returnMap = new HashMap<>();
		List<PageData> lists = regionTreeService.findRegionTreePage(pd);//所有数据未转化成树结构
		
		MenuTreeUtil menuTree = new MenuTreeUtil();//定义工具类
		List<Tree> lt = new ArrayList<Tree>();//定义实体类
		for (int i = 0; i < lists.size(); i++) {//遍历获取数据
			Tree t = new Tree(); //转化成对象
			t.setId((String) lists.get(i).get("id"));//将数据赋给实体类
			t.setTree_name((String) lists.get(i).get("tree_name"));
			t.setParent_code((String) lists.get(i).get("parent_code"));
			t.setIsparent((String) lists.get(i).get("isparent"));
			t.setTree_img((String) lists.get(i).get("tree_img"));
			t.setTree_sort((String) lists.get(i).get("tree_sort"));
			t.setIsparent((String) lists.get(i).get("isparent"));
			lt.add(t);
		}
		System.out.println(lt);
		List<Object> menuList = menuTree.menuList(lt);//所有数据转化成树结构
		returnMap.put("list", menuList);
		return returnMap;
	}

总体效果:

{
    "total": 11,
    "list": [
        {
            "id": "954564617615548416",
            "tree_name": "中国",
            "parent_code": "0",
            "hasChildren": "true",
            "tree_img": "/img.aaa.jpg",
            "tree_sort": "0",
            "child": [
                {
                    "id": "954570573374636032",
                    "tree_name": "北京",
                    "parent_code": "954564617615548416",
                    "tree_img": "/img.aaa.jpg",
                    "tree_sort": "0",
                    "hasChildren": "true",
                    "child": [
                        {
                            "id": "954827144123908096",
                            "tree_name": "昌平",
                            "parent_code": "954570573374636032",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "0",
                            "hasChildren": "false",
                            "child": []
                        },
                        {
                            "id": "954827187873013760",
                            "tree_name": "丰台",
                            "parent_code": "954570573374636032",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "10",
                            "hasChildren": "false",
                            "child": []
                        }
                    ]
                },
                {
                    "id": "954826845157756928",
                    "tree_name": "太原",
                    "parent_code": "954564617615548416",
                    "tree_img": "/img.aaa.jpg",
                    "tree_sort": "0",
                    "hasChildren": "true",
                    "child": [
                        {
                            "id": "954925121096708096",
                            "tree_name": "太原火车",
                            "parent_code": "954826845157756928",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "10",
                            "hasChildren": "false",
                            "child": []
                        },
                        {
                            "id": "954925161051533312",
                            "tree_name": "太原景点",
                            "parent_code": "954826845157756928",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "10",
                            "hasChildren": "false",
                            "child": []
                        }
                    ]
                },
                {
                    "id": "954826941573419008",
                    "tree_name": "大同",
                    "parent_code": "954564617615548416",
                    "tree_img": "/img.aaa.jpg",
                    "tree_sort": "0",
                    "hasChildren": "true",
                    "child": [
                        {
                            "id": "954925603377143808",
                            "tree_name": "大同花园",
                            "parent_code": "954826941573419008",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "10",
                            "hasChildren": "false",
                            "child": []
                        },
                        {
                            "id": "954925632135364608",
                            "tree_name": "大同火车站",
                            "parent_code": "954826941573419008",
                            "tree_img": "/img.aaa.jpg",
                            "tree_sort": "10",
                            "hasChildren": "false",
                            "child": []
                        }
                    ]
                }
            ]
        }
    ]
}
<think>好的,用户想在泛微eCode中实现一个带有下拉和收缩行功能的表格树页面,而后台传递的是树形结构数据。我需要先理解用户的需求,然后思考如何结合eCode的特性来实现这个功能。 首先,用户提到的后端传输的是树形结构数据,这意味着数据可能有嵌套的子节点。前端需要将这些数据展示为可展开和折叠的表格树。泛微eCode通常使用JavaScript和jQuery进行前端交互,可能还需要一些CSS样式来控制显示效果。 接下来,我需要考虑如何将树形数据渲染到表格中。可能需要使用递归的方式来处理嵌套的子节点,同时为每个父节点添加点击事件来控制子行的显示与隐藏。此外,用户可能需要动态加载子节点数据,这时候需要考虑是否每次展开时从后端获取数据,或者一次性加载所有数据。 然后,关于前端实现,使用jQuery来绑定点击事件,切换子行的可见性。可能需要为每个父行添加一个按钮或图标,表示展开或折叠的状态。同时,CSS样式方面,通过缩进来区分不同层级的子行,这样用户看起来层次更清晰。 还要注意数据结构的处理,比如每个节点是否有唯一的标识符(如id),以及父节点如何关联子节点。这会影响前端如何递归生成HTML结构。 另外,考虑到性能问题,如果数据量较大,可能需要懒加载的方式,即只有在展开父节点时才请求子节点的数据。但根据用户提供的信息,后端已经传递了完整的树形结构数据,所以可能是一次性加载所有数据前端只需要控制显示和隐藏。 最后,可能需要参考泛微eCode的文档,查看是否有内置的组件或API可以简化实现,比如是否有树形表格的组件,或者是否有特定的方法处理动态内容加载。如果没有现成组件,就需要手动实现上述逻辑。 总结步骤应该是:解析树形数据生成HTML表格,为父行添加点击事件,控制子行的显示/隐藏,调整样式以显示层级结构,并确保与后端数据的正确交互。</think>在泛微eCode中实现可折叠的表格树组件,可通过以下步骤实现: 一、数据结构准备 建议后台返回包含层级标识的JSON数据,例如: ```json [{ "id": 1, "name": "父节点", "children": [ {"id": 2, "name": "子节点1"}, {"id": 3, "name": "子节点2"} ] }] ``` 二、前端渲染实现 1. 创建递归渲染函数 ```javascript function renderTree(data, level = 0) { let html = ''; data.forEach(node => { html += `<tr class="tree-level-${level}" data-id="${node.id}"> <td style="padding-left: ${level * 20}px"> ${node.children?.length ? `<span class="toggle-btn">▶</span>` : ''} ${node.name} </td> </tr>`; if(node.children) { html += renderTree(node.children, level + 1); } }); return html; } ``` 2. 初始化表格 ```javascript jQuery(document).ready(function(){ const tableBody = $('#treeTable tbody'); // 从后端获取数据 const treeData = getTreeData(); tableBody.html(renderTree(treeData)); // 绑定点击事件 $('.toggle-btn').click(function() { const row = $(this).closest('tr'); const children = row.nextUntil(':not(.tree-level-'+(row.data('level')+1)+')'); children.toggle(); $(this).text(children.is(':visible') ? '▼' : '▶'); }); }); ``` 三、CSS样式建议 ```css .toggle-btn { cursor: pointer; margin-right: 5px; } tr[data-level] > td { transition: background-color 0.3s; } tr.collapsed { display: none; } ``` 四、后端交互建议 使用泛微的ajax接口获取数据: ```javascript function getTreeData() { return ecode.ajax({ url: '/api/getTreeData', type: 'POST' }); } ```
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值