nzTree 樹形結構資料準備
阿新 • • 發佈:2018-12-17
前言
需要從後臺資料中獲取陣列結構的資料經過處理轉換為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;