[JavaScript知识库]前端二维表转化树结构。支持无限套娃

支持无限套娃的一个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=index
      if(this.v_former_id!='')//判断是否有之前点击过的行。有就把之前选的行颜色变成黑色。本次的变成蓝色
      {
        document.getElementById(this.v_former_id).style.color="#000000"
        this.v_former_id=dm//记录本次变色的ID
        document.getElementById(dm).style.color="#0089FF"
      }
      else{//第一次点，就直接变成当前选择的行
        this.v_former_id=dm
        document.getElementById(dm).style.color="#0089FF"
      }
  
      if(this.data[index].children.length>0)//判断当前选择的对象有没有子节点
      {  
        this.type='show'+index//用来展示到对应的节点下面
        this.v_former_type_i=index//记录展开的节点index
        this.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=dm
        document.getElementById(dm).style.color="#0089FF"
      }
      else{
        this.v_former_id=dm
        document.getElementById(dm).style.color="#0089FF"
      }
      
      this.v_index=index
      if(this.data[index].children.length>0)//判断当前选择的对象有没有子节点
      {
        
        this.type='show'+index//用来展示到对应的节点下面
        this.v_former_type_i=index//记录展开的节点index
        this.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>