前端二维表转化树结构。支持无限套娃

支持无限套娃的一个function。

  regroup(data,parent_id){var arr=[]//建立一个新的数组用来存储结果数据var temp;//临时变量for (var i = 0; i < data.length; i++) {//循环传进来的二维表数组if (data[i].parent_id == parent_id) {//判断当前数组中是否有子节点----panrent_id =parent_id，有相同的就存储起来var obj = {mc: data[i].mc,dm: data[i].dm,parentdwdm: data[i].parent_id,children:[]};temp = this.regroup(data, data[i].dm);//再去找这个对象在整个数组中有没有子节点if (temp&&temp.length > 0) {//如果有子节点就赋值给obj.children.obj.children = temp;}arr.push(obj);//把obj存储到数组中。}}return arr;}

同理还有一个组件支持显示无线套娃。这个是我手写的。
A.HTML

<!-- 无限套娃，树组件 --><ion-list class="listclass" *ngFor="let fl of data;let i=index"><ion-item class="itemclasswbj" (click)="lxlbcx(fl.mc,fl.dm,fl.parentdwdm,i)" [id]="fl.dm"><span class="bttop ">I</span> {{fl.mc}}<ion-icon name="ios-arrow-down" style="color: #c6c6c6; " item-right *ngIf="fl.type=='show'"></ion-icon><ion-icon name="ios-arrow-forward" style="color: #c6c6c6; " item-right *ngIf="fl.type=='hide'"></ion-icon></ion-item>
<!--这里最关键。如果点击的对象有子节点。就循环套当前组件 --><ion-card *ngIf="type=='show' +i " style="margin-top: 10px;margin-left:5px; "><ion-tree [data]='children_data' (out)='outpust($event)'></ion-tree></ion-card>
</ion-list>

A.TS

import { NavController } from 'ionic-angular';
import {  Component,Input,Output,EventEmitter } from '@angular/core';@Component({selector: 'ion-tree',templateUrl: 'ion-tree.html'
})
export class IonTreeComponent {@Input() data: any = []; //获取从父组件传递过来的数据@Output() out: EventEmitter<any> = new EventEmitter;//返回数据constructor(public navCtrl:NavController) {
}type: string='hide'//状态v_index:any=-1//用来记录上次选择的是哪个对象children_data:any=[]//子节点数组v_former_id:any=''//旧ID，用来变色v_former_type_i:any=''//旧index，用来记录上次是显示的哪个lxlbcx(mc,dm,parentdwdm,index){//点击进来就先关闭子节点this.type='hide'if(  this.v_former_type_i!='')//判断旧index是否存在this.data[this.v_former_type_i].type='hide'//存在就把上次点击的图片按钮变换回来（↓变成→）if(this.v_index==-1)//有没有打开的节点，-1没有{this.v_index=indexif(this.v_former_id!='')//判断是否有之前点击过的行。有就把之前选的行颜色变成黑色。本次的变成蓝色{document.getElementById(this.v_former_id).style.color="#000000"this.v_former_id=dm//记录本次变色的IDdocument.getElementById(dm).style.color="#0089FF"}else{//第一次点，就直接变成当前选择的行this.v_former_id=dmdocument.getElementById(dm).style.color="#0089FF"}if(this.data[index].children.length>0)//判断当前选择的对象有没有子节点{  this.type='show'+index//用来展示到对应的节点下面this.v_former_type_i=index//记录展开的节点indexthis.data[index].type='show'this.children_data=this.data[index].children//给子节点数组赋值}var obj = {mc:mc,dm:dm,parentdwdm:parentdwdm}this.out.emit(obj)//回传当前选择的行}else if(this.v_index==index)//点击了之前点击的行{if( this.data[index].type=='show')//判断当前是否是展开的是就隐藏起来this.data[index].type='hide'this.v_index=-1//变成从来没有选择过的状态。第一次打开}else{//有进行过选择行的操作if(this.v_former_id!='')//判断是否有之前点击过的行。有就把之前选的行颜色变成黑色。本次的变成蓝色{document.getElementById(this.v_former_id).style.color="#000000"this.v_former_id=dmdocument.getElementById(dm).style.color="#0089FF"}else{this.v_former_id=dmdocument.getElementById(dm).style.color="#0089FF"}this.v_index=indexif(this.data[index].children.length>0)//判断当前选择的对象有没有子节点{this.type='show'+index//用来展示到对应的节点下面this.v_former_type_i=index//记录展开的节点indexthis.data[index].type='show'this.children_data=this.data[index].children//给子节点数组赋值}var obj = {mc:mc,dm:dm,parentdwdm:parentdwdm}this.out.emit(obj)//回传当前选择的行}}outpust(res){this.out.emit(res)//监听子节点返回的参数}
}

调用上面封装的组件

 <ion-tree [data]='v_data' (out)='outpust($event)' style="height: 100%;"></ion-tree>

前端二维表转化树结构。支持无限套娃相关推荐

python一维表二维表转化
效果: import pandas as pd# 读入数据: df = pd.read_excel(r'C:\Users\lihwa11\Desktop\Python\code\data\one.xl ...
python二维表转一维表_Excel、Power BI及Python系列：使用Power BI转化一维表与二维表...
上篇文章,老海分享了如何使用Excel完成一维表与二维表之间的转化本篇老家继续分享使用Power BI来完成一维表与二维表的转化操作. 可能很多小伙伴,不太了解Power BI Power BI是什 ...
mysql第三章关系模型_一个MySQL关系模型只有三个关系(二维表)组成。_学小易找答案...
[判断题]DELETE语句功能是对表中所有记录或满足条件的记录进行批量删除. [填空题]The computer's entire ____ was on a single board. [单选题]下 ...
java 导出excel二维表,如何轻松将EXCEL二维统计表转为数据清单？
Excel二维统计表转为数据清单的方法主要有多重数据透视法和Power Query逆透视法两种,其中多重数据透视法比较繁琐,而且数据源发生变化时,得重新操作,而使用Excel的新功能Power Que ...
一维转二维_Excel – 一维表和二维表相互转换，只要一个“=”搞定
关于一维表和二维表的互相转化方法,我真的写过很多种了.且不说在各种案例中顺带提到的技巧,单独开篇讲的,就有以下这些: (头条号功能维护中,暂时无法添加超链接,有兴趣的读者请关注我,查看下历史记录吧) ...
二维表转一维表 mysql_Excel二维表转换成一维表（2种方法）
今天大年初四,春节假期还剩三天了,每逢佳节胖三斤,亲们可要注意控制饮食了,要不然春节后无脸见人哟.闲话少说,今日分享如下. 在做数据处理的时候,有的时候为了处理方便我们需要将二维的数据表处理成一维的数 ...
PyQt5最全39 表格之QTableView显示二维表数据
PyQt5最全39 表格之QTableView显示二维表数据 from PyQt5.QtWidgets import * from PyQt5.QtGui import * import syscla ...
linux音源管理二维表,Oracle【二维表管理：约束】
1.简单的表创建和字段类型最简单的方式去创建表(没有添加主键之类的约束条件) [Oracle的字段类型] number:数值类型 --整数类型:number(a) 总长度a --小数类型:numbe ...
MySql 如何将一维表变成二维表
将一维表变成二维表, 实际上是一个双循环的查询操作, 需要用的sum(if(...))和group by. 例如: select item_index, item_name, item_target, ...
java父子表_数据库二维表转父子关系，java，stream，list
需求描述:把数据库中的省市二维表,查询到内存中后,转换为父子层级关系.通过jdk8中的stream方式实现. 数据关系: 320004 福建省 320507 南平市 430000 ...

前端二维表转化树结构。支持无限套娃

前端二维表转化树结构。支持无限套娃相关推荐

最新文章

热门文章