1. 程式人生 > >nzTree 樹形結構資料準備

nzTree 樹形結構資料準備

前言

    需要從後臺資料中獲取陣列結構的資料經過處理轉換為nzTree的樹形結構資料
本例中裝換為帶虛線的樹形結構,其他的類似。
在這裡插入圖片描述

轉換程式碼

思路:
1、 先通過一個數組將樹的分組類獲取到
2、 將獲取的資料和分組陣列比較將獲取的資料以children陣列形式劃分到不同的分組類中

Result是從後臺獲取到的陣列;
在這裡插入圖片描述

import {NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd';
    
nodes:NzTreeNodeOptions[];
  
var classifyname =[];
var NzTreeNodeArr = [];
if(result.length != 0){
    classifyname.push(result[0].classifyname);
    for(let i=0;i<result.length;i++){
      if(!(classifyname.indexOf(result[i].classifyname) > -1)){
        classifyname.push(result[i].classifyname);
      }
}
for(let i=0;i<classifyname.length;i++){
  var classifyObj ={};
  classifyObj["title"] = classifyname[i];
  classifyObj["key"] = "100"+i;
  classifyObj["children"] = [];
  for(let k=0;k<result.length;k++){
    if(classifyname[i]===result[k].classifyname){
      var classifyItem ={};
      classifyItem["title"] = result[k].aliasname;
      classifyItem["key"] = "100"+i+k;
      classifyItem["isLeaf"] = true;
      classifyObj["children"].push(classifyItem);
    }
  }
  NzTreeNodeArr.push(new NzTreeNode({
    title   : classifyObj["title"],
    key     : classifyObj["key"],
    children: classifyObj["children"]
  }));
}
This.nodes = NzTreeNodeArr;