js中将有层级关系的一维数据转换为父子级关系的二维数据、菜单权限三级层级数据实现（树形结构数据）

很久没有发文了，今天发点不一样的，如下：

  <script>// 一维数据：let arrData=[{ r_id: 1, role_name: '开发商', n_id: 1, txt: '主页' },{ r_id: 1, role_name: '开发商', n_id: 2, txt: '项目' },{ r_id: 1, role_name: '开发商', n_id: 3, txt: '报警' },{ r_id: 1, role_name: '开发商', n_id: 4, txt: '客户' },{ r_id: 1, role_name: '开发商', n_id: 5, txt: '设备' },{ r_id: 1, role_name: '开发商', n_id: 6, txt: '设置' },{ r_id: 1, role_name: '开发商', n_id: 7, txt: '集中监控' },{ r_id: 1, role_name: '开发商', n_id: 9, txt: '用户列表' },{ r_id: 1, role_name: '开发商', n_id: 10, txt: '系统设置' },{ r_id: 1, role_name: '开发商', n_id: 11, txt: '报警设置' },{ r_id: 1, role_name: '开发商', n_id: 12, txt: '我的项目' },{ r_id: 1, role_name: '开发商', n_id: 13, txt: '增加项目' },{ r_id: 1, role_name: '开发商', n_id: 14, txt: '权限' },{ r_id: 1, role_name: '开发商', n_id: 15, txt: '角色列表' },{ r_id: 1, role_name: '开发商', n_id: 16, txt: '权限列表' },{ r_id: 1, role_name: '开发商', n_id: 17, txt: '报警日志' },{ r_id: 1, role_name: '开发商', n_id: 18, txt: '报警管理' },{ r_id: 1, role_name: '开发商', n_id: 19, txt: '设备列表' },{ r_id: 2, role_name: '厂商', n_id: 1, txt: '主页' },{ r_id: 2, role_name: '厂商', n_id: 2, txt: '项目' },{ r_id: 3, role_name: '用户', n_id: 2, txt: '项目' },{ r_id: 3, role_name: '用户', n_id: 1, txt: '主页' },{ r_id: 4, role_name: '普通员工', n_id: 3, txt: '报警' },{ r_id: 4, role_name: '普通员工', n_id: 5, txt: '设备' }]// 进行转换：let newArr = [...new Set(arrData.map(item => item.role_name))] // 找出arrData数据中的role_name的多个数据：{role_name:'值'},通过set去重，之后在解构成数组：[]let list = []newArr.forEach(names => {list.push(arrData.filter(item => item.role_name === names))})let mlist = []list.forEach((e,i)=>{let arr = []e.forEach(its=>{arr.push({n_id:its.n_id,txt:its.txt})})mlist.push({r_id:e[0].r_id,role_name:newArr[i],children: arr})})console.log(mlist)//转换后具有父子级关系的数据console.log(mlist)打印的结果如下：[{r_id: 1,role_name: '开发商',children: [{ n_id: 1, txt: '主页' },{ n_id: 2, txt: '项目' },{ n_id: 3, txt: '报警' },{ n_id: 4, txt: '客户' },{ n_id: 5, txt: '设备' },{ n_id: 6, txt: '设置' },{ n_id: 7, txt: '集中监控' },{ n_id: 9, txt: '用户列表' },{ n_id: 10, txt: '系统设置' },{ n_id: 11, txt: '报警设置' },{ n_id: 12, txt: '我的项目' },{ n_id: 13, txt: '增加项目' },{ n_id: 14, txt: '权限' },{ n_id: 15, txt: '角色列表' },{ n_id: 16, txt: '权限列表' },{ n_id: 17, txt: '报警日志' },{ n_id: 18, txt: '报警管理' },{ n_id: 19, txt: '设备列表' }]},{r_id: 2,role_name: '厂商',children: [ { n_id: 1, txt: '主页' }, { n_id: 2, txt: '项目' } ]},{r_id: 3,role_name: '用户',children: [ { n_id: 2, txt: '项目' }, { n_id: 1, txt: '主页' } ]},{r_id: 4,role_name: '普通员工',children: [ { n_id: 3, txt: '报警' }, { n_id: 5, txt: '设备' } ]}]// 对let newArr = [...new Set(arrData.map(item => item.role_name))]的详细解说如下：let obj = arrData.map(item => item.role_name) console.log(obj) //['开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '开发商', '厂商', '厂商', '用户', '用户', '普通员工', '普通员工']let res = new Set(obj)console.log(res) //{'开发商', '厂商', '用户', '普通员工'}let arrs = [...res]console.log(arrs) //['开发商', '厂商', '用户', '普通员工']// 注意：上面只是简单的实现具有层级关系的数据处理，实际工作中常常出现三级层级关系的数据，就权限功能而言，每个主菜单（一级菜单）和负极菜单（二级菜单或更多级菜单）之间应该是嵌套的父子级关系，而并非是上面的同级非嵌套关系，优化后的代码如下：let arrdatas=[{r_id: 1,role_name: '开发商',n_id: 1,txt: '主页',pid: null},{r_id: 1,role_name: '开发商',n_id: 2,txt: '项目',pid: null},{r_id: 1,role_name: '开发商',n_id: 3,txt: '报警',pid: null},{r_id: 1,role_name: '开发商',n_id: 4,txt: '客户',pid: null},{r_id: 1,role_name: '开发商',n_id: 5,txt: '设备',pid: null},{r_id: 1,role_name: '开发商',n_id: 6,txt: '设置',pid: null},{r_id: 1,role_name: '开发商',n_id: 7,txt: '集中监控',pid: 1},{r_id: 1,role_name: '开发商',n_id: 9,txt: '用户列表',pid: 4},{r_id: 1,role_name: '开发商',n_id: 10,txt: '系统设置',pid: 6},{r_id: 1,role_name: '开发商',n_id: 11,txt: '报警设置',pid: 6},{r_id: 1,role_name: '开发商',n_id: 12,txt: '我的项目',pid: 2},{r_id: 1,role_name: '开发商',n_id: 13,txt: '增加项目',pid: 2},{r_id: 1,role_name: '开发商',n_id: 14,txt: '权限',pid: null},{r_id: 1,role_name: '开发商',n_id: 15,txt: '角色列表',pid: 14},{r_id: 1,role_name: '开发商',n_id: 16,txt: '权限列表',pid: 14},{r_id: 1,role_name: '开发商',n_id: 17,txt: '报警日志',pid: 3},{r_id: 1,role_name: '开发商',n_id: 18,txt: '报警管理',pid: 3},{r_id: 1,role_name: '开发商',n_id: 19,txt: '设备列表',pid: 5},{r_id: 2,role_name: '厂商',n_id: 1,txt: '主页',pid: null},{r_id: 2,role_name: '厂商',n_id: 2,txt: '项目',pid: null},{r_id: 3,role_name: '用户',n_id: 2,txt: '项目',pid: null},{r_id: 3,role_name: '用户',n_id: 1,txt: '主页',pid: null},{r_id: 4,role_name: '普通员工',n_id: 3,txt: '报警',pid: null},{r_id: 4,role_name: '普通员工',n_id: 5,txt: '设备',pid: null}]let newarr = [...new Set(arrdatas.map(item => item.role_name))]let lists = []newarr.forEach(names => {lists.push(result.filter(item => item.role_name === names))})let mlists = []list.forEach((e,i)=>{let arr = []e.forEach(its=>{arr.push({n_id:its.n_id,txt:its.txt,pid:its.pid})})// 对没有层级关系的菜单数组进arr行处理的方法：function tree(data,pid,child){let parents = data.filter(p => p[pid] === null),children = data.filter(c => c[pid] !== null);function dataToTree(parents, children){parents.map(p => {children.map((c, i) => {if(c[pid] === p.n_id){let _children = JSON.parse(JSON.stringify(children));_children.splice(i, 1);dataToTree([c], _children);if(p[child]){p[child].push(c);}else{p[child] = [c];};};});});};dataToTree(parents, children);return parents;};let arrTree = tree(arr,'pid','childs');//调用方法最终实现具有嵌套关系的层级菜单数组mlists.push({r_id:e[0].r_id,role_name:newArr[i],childrens: arrTree})})// 最终实现的三级菜单效果如下图：</script>

三级权限菜单数据如下图：

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

js中将有层级关系的一维数据转换为父子级关系的二维数据、菜单权限三级层级数据实现（树形结构数据）相关推荐

List集合对象处理父子级关系的数据
需求是查询一张分类表,里面的结构是有一个父级id,然后展示的JSON格式是那种树状的层级关系,类似于: { "父级id":id "父级名称":name &quo ...
获取树形数据（区域，父子级关系的树形数据）
获取树形数据(区域,父子级关系的树形数据) public function getAreaTree($code) { $where = ''; if ($code){ $where = ['b.cod ...
numpy使用[]语法索引二维numpy数组中指定范围数据行的数值内容(accessing rows in numpy array with specific range)
numpy使用[]语法索引二维numpy数组中指定范围数据行的数值内容(accessing rows in numpy array with specific range) 目录
php将从数据库取出的数据分为6个一组的二维数组
$presell = M('presell')->field('id,sname,num,weight,shop_price,endtime,supply,givetime')->wher ...
微信小程序扫一扫和微信自带的扫一扫获取二维码的url包括参数数据
微信扫一扫二维码跳转指定的页面,而指定的页面获取二维码的url包括参数在指定的页面.js 我们先以index来为列子吧 index.js onLoad: function(options) {con ...
java父子表_数据库二维表转父子关系，java，stream，list
需求描述:把数据库中的省市二维表,查询到内存中后,转换为父子层级关系.通过jdk8中的stream方式实现. 数据关系: 320004 福建省 320507 南平市 430000 ...
数据建模步骤文档_二维溃坝洪水模拟（五）二维模型建模
1 前言本文主要说明案例中水库下游区域HEC-RAS二维建模的过程.文章首先给出建模的基本原则与建模的注意事项,确定了大致的研究区域.其次,整个下游洪水演进区域由单一二维模型模拟,下游存在一条较大的 ...
向函数传递一维数组和已知大小的二维数组
一维数组在C语言中,向函数传递参数只有一种形式--值传递.不管是传递一个整型变量,还是传递一个指针,函数得到的都只是实参的拷贝值. 先定义一个一维整型数组: int a[] = { 0, 1, 2, ...
c++如何打印一维数组首地址_C语言之二维数组和指针的结合
最近在练习 C 语言计算机二级的程序设计题,碰到了二维数组和指针的结合,当时怎么调试都不对,自己也记不清楚该怎么用了就跑去看书翻资料重新复习.自己纠结的问题是二维数组 int a[3][4]的数组名是 ...

js中将有层级关系的一维数据转换为父子级关系的二维数据、菜单权限三级层级数据实现（树形结构数据）

js中将有层级关系的一维数据转换为父子级关系的二维数据、菜单权限三级层级数据实现（树形结构数据）相关推荐

最新文章

热门文章