若依框架学习-js将组织列表数据转换成前端通用树结构

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量502 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ulyssesaa/article/details/130604136
版权

 在项目中很多地方，后端都返回的是组织表的列表数据，例如下面数据

[{
		"createBy": "admin",
		"createTime": "2023-05-09 05:54:01",
		"updateBy": null,
		"updateTime": null,
		"remark": null,
		"deptId": 100,
		"parentId": 0,
		"ancestors": "0",
		"deptName": "若依科技",
		"orderNum": 0,
		"leader": "若依",
		"phone": "15888888888",
		"email": "ry@qq.com",
		"status": "0",
		"delFlag": "0",
		"parentName": null,
		"children": []
	}, {
		"createBy": "admin",
		"createTime": "2023-05-09 05:54:01",
		"updateBy": null,
		"updateTime": null,
		"remark": null,
		"deptId": 101,
		"parentId": 100,
		"ancestors": "0,100",
		"deptName": "深圳总公司",
		"orderNum": 1,
		"leader": "若依",
		"phone": "15888888888",
		"email": "ry@qq.com",
		"status": "0",
		"delFlag": "0",
		"parentName": null,
		"children": []
	}]

 但是我们使用一些前端ui组件需要传递指定格式的数据，才能展示树结构，页面样式如下

这种展示方式，同侧边栏展示方式如出一辙，那么就来学习一下若依的转换树结构吧 

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
  //增加灵活性 可配置children获取哪个字段
  let config = {
    // 例如id传入为'deptId' 则获取传入数据的'deptId'作为转换后数结构的id
    id: id || 'id',
    //同上，一般该参数不传递，传递也可支持，使该方法更加灵活     
    parentId: parentId || 'parentId', 
    childrenList: children || 'children'
  };
  //定义一个map key 使用parentId map用来获取该parentId下的所有子数据
  var childrenListMap = {};
  //这里就是传入data，只是key 为数据id map为该条数据
  var nodeIds = {};
  //这里用来装树结构，一般该数组只有一条数据，为没有parentId的数据
  var tree = [];
  //循环数据，收集到childrenListMap中，使所有数据有KEY: parentId value: 所有子数据
  for (let d of data) {
    //获取parentId 如果传递了parentId,则在data中获取你指定字段作为parentId
    let parentId = d[config.parentId];
    //如果没有parentId 说明是顶层数据
    if (childrenListMap[parentId] == null) {
      //例如 parentId=0 childrenListMap[0]为null 则初始化value为数组，用来装该parentId下的所有children节点
      childrenListMap[parentId] = [];
    }
    //这里将所有的data都装到了nodeIds中
    nodeIds[d[config.id]] = d;
    //添加该parentid下的一条chilren节点数据
    childrenListMap[parentId].push(d);
  }
  //填充一条顶层数据（没有parentId的数据）到tree中，配置正确tree只有一条数据
  for (let d of data) {
  //判断parentId为空，则说明该条数据为顶层数据，加入到tree中
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  //此时便利tree中数据，并挨个将下面的chilren填充
  for (let t of tree) {
    adaptToChildrenList(t);
  }

  //挨个向下填充children
  //第一次进来，说明该数据为顶层数据
  function adaptToChildrenList(o) {
    //获取收集好的，根据parentid可以获取到所有children 的map结构数据childrenListMap
    //顶层数据的id就是子节点数据的parentId，从childrenListMap获取该parentId所有的子节点填充到顶层数据的chilren字段中
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    //如果顶层数据的chilren节点有值，就是上面填充的chilren，说明还需要依次填充顶层节点下面chhilren的chilren，那么再挨个便利chilren再走一遍此方法，往下进行填充
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  //最后返回前端要的树节点
  return tree;
}

转换之后的json格式如下

[{
	"createBy": "admin",
	"createTime": "2023-05-09 05:54:01",
	"updateBy": null,
	"updateTime": null,
	"remark": null,
	"deptId": 100,
	"parentId": 0,
	"ancestors": "0",
	"deptName": "若依科技",
	"orderNum": 0,
	"leader": "若依",
	"phone": "15888888888",
	"email": "ry@qq.com",
	"status": "0",
	"delFlag": "0",
	"parentName": null,
	"children": [{
		"createBy": "admin",
		"createTime": "2023-05-09 05:54:01",
		"updateBy": null,
		"updateTime": null,
		"remark": null,
		"deptId": 101,
		"parentId": 100,
		"ancestors": "0,100",
		"deptName": "深圳总公司",
		"orderNum": 1,
		"leader": "若依",
		"phone": "15888888888",
		"email": "ry@qq.com",
		"status": "0",
		"delFlag": "0",
		"parentName": null,
		"children": [{
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:01",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 103,
			"parentId": 101,
			"ancestors": "0,100,101",
			"deptName": "研发部门",
			"orderNum": 1,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}, {
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:01",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 104,
			"parentId": 101,
			"ancestors": "0,100,101",
			"deptName": "市场部门",
			"orderNum": 2,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}, {
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:01",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 105,
			"parentId": 101,
			"ancestors": "0,100,101",
			"deptName": "测试部门",
			"orderNum": 3,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}, {
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:02",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 106,
			"parentId": 101,
			"ancestors": "0,100,101",
			"deptName": "财务部门",
			"orderNum": 4,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}, {
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:02",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 107,
			"parentId": 101,
			"ancestors": "0,100,101",
			"deptName": "运维部门",
			"orderNum": 5,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}]
	}, {
		"createBy": "admin",
		"createTime": "2023-05-09 05:54:01",
		"updateBy": null,
		"updateTime": null,
		"remark": null,
		"deptId": 102,
		"parentId": 100,
		"ancestors": "0,100",
		"deptName": "长沙分公司",
		"orderNum": 2,
		"leader": "若依",
		"phone": "15888888888",
		"email": "ry@qq.com",
		"status": "0",
		"delFlag": "0",
		"parentName": null,
		"children": [{
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:02",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 108,
			"parentId": 102,
			"ancestors": "0,100,102",
			"deptName": "市场部门",
			"orderNum": 1,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}, {
			"createBy": "admin",
			"createTime": "2023-05-09 05:54:02",
			"updateBy": null,
			"updateTime": null,
			"remark": null,
			"deptId": 109,
			"parentId": 102,
			"ancestors": "0,100,102",
			"deptName": "财务部门",
			"orderNum": 2,
			"leader": "若依",
			"phone": "15888888888",
			"email": "ry@qq.com",
			"status": "0",
			"delFlag": "0",
			"parentName": null
		}]
	}]
}]

尤里Ulyss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript将扁平的数据转为树形结构的高效率算法
10-15
主要介绍了javascript将扁平的数据转为树形结构的高效率算法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript将服务端平行数据转换成树形菜单形式
09-19
将平行数据转换成树形菜单，适用于服务端传递行级别数据，在前端展示树形菜单或者级联时的前置转换适配工具
JAVA后台转换成树结构数据返回给前端的实现方法
08-19
主要介绍了JAVA后台转换成树结构数据返回给前端的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
若依框架学习之获取菜单下拉树
qq_44654771的博客
04-21 653
【代码】若依框架学习之获取菜单下拉树。
若依框架学习(四)部门树状图
weixin_41262132的博客
02-08 5859
部门树状图的实现 点击用户管理，观察网络活动大概可以猜出treeselect应该是该方法，根据请求url：http://localhost/dev-api/system/dept/treeselect 可以找到对应的controller /** * 获取部门下拉树列表 */ @GetMapping("/treeselect") public AjaxResult treeselect(SysDept dept) { List<SysDept
若依框架-部门树状图
xwwwwww903的博客
07-21 2439
若依框架部门树状的实现流程
关于若依框架树形下拉结构数据的问题
qq_64180379的博客
08-18 2067
关于若依框架树形下拉结构数据的问题
若依(ruoyi)代码生成树表结构的那些坑
Javaの甘乃迪的博客
12-30 6164
若依(ruoyi)代码生成树表结构的那些坑
若依框架---数据转树状层级
02-10 2351
若依框架就是一个后台管理框架---数据转树状层级
若依生成树形结构数据
qq_34786108的博客
08-30 458
树形JSON
Java 将有父子关系的数据转换成树形结构数据
01-07
一、数据库父子结构数据设计  大部分采用 parentId的形式来存储父id，并且只存储父id，祖父Id不存储。也可以添加存储层级级别或者层级关系等字段。 CREATE TABLE `t_resource` ( `id` varchar(255) NOT NULL ...
实现数据的链式调用，把数组数据转换成树形结构数据
01-21
let data = [ { id: 1, name: "目录1", parentId: 0, }, { id: 2, name: "目录1-1", parentId: 1, }, { id: 3, name: "目录1-2", parentId: 1, }, { id: 4, name: "目录1-1-1", ...
把扁平化的数据转换成树形结构的JSON
08-12
把扁平化的数据转换成树形结构的JSON
若依框架 用户管理页面 公司树状图加载
hh_love_jx的博客
11-18 923
第二步 buildDeptTreeSelect(depts) 组装成树状结构。遍历所有节点 判断每一个节点发父节点是否存在集合中 不存在就是顶级节点。第一步selectDeptList（dept）查询部门数据。/system/user 在中这个类里面查找list。deptTreeSelect向后端发起请求。进入递归方法 获得顶级节点的子节点列表。通过发送的请求url找到后端代码。若依前端查询部门下拉树结构。遍历获取所有节点部门id。构建树形结构核心方法。新建两个list集合。
若依框架 - 代码生成树形结构
记录点滴
09-02 5153
（1）先建表： （2）导入表 编辑回显： 点击编辑时，前端会传给后端table_id，后端根据table_id 查询gen_table和gen_table_column两个表，基本信息和生成信息会查询出来，字典下拉列表通过单独接口全部查询出来；所有的菜单也是单独接口查询的（菜单这块是一个树形结构，它在前端递归组合的数据） 提交， 后端逻辑： 获取前端提交的信息，首先校验，完事，更新gen_table和gen_table_column 表 校验 更新 ...
如何将数组数据转化成树形结构（小案例演示）
背心的博客
11-07 2864
如何将数组数据转化成树形结构（小案例演示）
若依（ruoyi）树列表
TinpeaV的博客
01-30 864
使用Ruoyi现实树表下拉功能
若依前端构造树
m0_53871713的博客
03-27 416
【代码】若依前端构造树。
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 393
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
若依框架------树形菜单
09-06
树形菜单是一种常见的网页导航菜单样式，通常用于展示多层次的菜单选项。在若依框架中，你可以通过以下步骤来实现树形菜单： 1. 定义菜单数据：首先，你需要定义一个包含菜单选项的数据结构。可以使用 JSON 格式，每个菜单项可以包含 id、name、url 和 children 等属性。 2. 渲染菜单组件：在前端页面中，你可以使用递归的方式遍历菜单数据，根据层级关系来渲染菜单组件。可以使用 vue 的组件模板语法或者其他前端框架来实现。 3. 添加交互功能：为了使树形菜单具有交互功能，你需要为菜单项添加点击事件处理函数。可以通过绑定事件监听器，在用户点击菜单项时展开或折叠子菜单。 4. 样式设计：最后，你可以通过 CSS 来美化树形菜单的外观，如设置背景色、字体样式和动画效果等。 需要注意的是，若依框架本身提供了一些组件或插件，可能已经内置了树形菜单的实现，你可以查阅若依框架的文档或示例代码来了解更多细节。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值