//通过子级的pid找到父级对应的id,制作树状图
         var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];
function toTree(data) {
// 删除 所有 children,以防止多次调用
data.forEach(function (item) {
delete item.children;
}); // 将数据存储为 以 id 为 KEY 的 map 索引数据列
var map = {};
data.forEach(function (item) {
map[item.id] = item;
});
//console.log(map);
var val = [];
data.forEach(function (item) {
// 以当前遍历项,的pid,去map对象中找到索引的id
item.label = item.name;
var parent = map[item.pid];
// 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
if (parent) {
(parent.children || ( parent.children = [] )).push(item);
} else {
//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级 val.push(item);
}
});
return val;
}
console.log(toTree(data))
//假如后台返回的数据是树状图的结构,获取每层当中的每一个固定的字段,比如获取每一层数据中的id字段
getIds(me.d_center); //me.d_center是后台返回的树状图结构形式的数据
function getIds(data){
for(let i in data){
me.idArr.push(data[i].id);
if(data[i].children){
getIds(data[i].children)
}
}
}


对同层数据进行处理,做成树状图形式的数据结构,并符合elementui中的tree结构的更多相关文章

  1. python爬取股票最新数据并用excel绘制树状图

    大家好,最近大A的白马股们简直 跌妈不认,作为重仓了抱团白马股基金的养鸡少年,每日那是一个以泪洗面啊. 不过从金融界最近一个交易日的大盘云图来看,其实很多中小股还是红色滴,绿的都是白马股们. 以下截图 ...

  2. 简单excel饼状图怎么做,bi工具怎么做饼状图

    饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...

  3. ComponentOne的C1Chart做饼状图怎么显示其百分比

    问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...

  4. 用FusionChartsFree做饼状图、柱状图、折线图的实例

    1.先来看看要进行表现的页面:myChart.jsp <%@ page language="java" contentType="text/html; charse ...

  5. Python数据可视化:画饼状图、折线图、圈图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. from math import pi import matplotlib ...

  6. echarts中饼状图数据太多进行翻页

    echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...

  7. BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)

    2014-12-25 Created By BaoXinjian

  8. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  9. arcgis api for flex之专题图制作(饼状图,柱状图等)

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

随机推荐

  1. GridBagLayout使用案例+获取目录下所有的文件+获取创建时间及最后修改时间

    package vvv; import java.awt.Dimension;import java.awt.GridBagConstraints;import java.awt.GridBagLay ...

  2. 20 个让你效率更高的 CSS 代码技巧

    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...

  3. 记录——本地minikube安装ubuntu镜像总是报 Back-off restarting failed container问题 -已解决(更新)

    1.环境介绍 使用本机系统:macX minikube镜像:安装的阿里云提供的镜像(否则总是提示访问google的api,不FQ无法成功) 虚拟机情况:使用Virtual box 的虚拟机环境 min ...

  4. NYOJ 737 石子合并(一)

    题意 排成一排的石子,每次合并相邻两堆并由一定的代价,求合并成一堆的最小代价 解法 区间dp 枚举长度 dp[i,j]表示合并石子堆编号从i到j为一堆所需的最小代价(这个题目的代价是sum(i..j) ...

  5. HDU 2150 Pipe( 判断线段相交水 )

    链接:传送门 题意:略 思路:数据量很小,直接暴力所有线段 /********************************************************************* ...

  6. cogs 2056. 无平方因子数

    2056. 无平方因子数 ★☆   输入文件:non.in   输出文件:non.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 给出正整数n,m,区间[n,m]内的无 ...

  7. HDU 4301 Contest 1

    开始时设的是第一.二行前i,j列有k种的方法数,但是,这根本转移不了--! 难点在于1,2行的讨论啊... 设f[i][j][0]为前i列分成j个部分,且第i列的两个为同一部分的方法数. f[i][j ...

  8. aliyun Ubuntu 14.04 64bit OpenJDK Tomcat7 install

    my work environment: aliyun Ubuntu 14.04 64位 first phase:apt-get update    (it is very important,oth ...

  9. Residual Networks &lt;2015 ICCV, ImageNet 图像分类Top1&gt;

    本文介绍一下2015 ImageNet中分类任务的冠军--MSRA何凯明团队的Residual Networks.实际上.MSRA是今年Imagenet的大赢家.不单在分类任务,MSRA还用resid ...

  10. 当我们谈论Erlang Maps时,我们谈论什么 Part 2

    声明:本文讨论的Erlang Maps是基于17.0-rc2,时间2014-3-4.兴许Maps可能会出现语法或函数API上的有所调整,特此说明. 前情提要: [Erlang 0116] 当我们谈论E ...