close
===scss==
// tree test
mat-tree {
margin: 24px;
}
mat-nested-tree-node {
display: block;
margin-left: 16px;
line-height: 24px;
}
.node-detail:hover {
color: steelblue;
cursor: pointer;
}
.highlight_2 {
color: steelblue;
}
<mat-tree [dataSource]="tempTree" [treeControl]="treeControl">
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild ">
<button mat-icon-button type="button" (click)="treeControl.toggle(node)" >
<mat-icon *ngIf="node.childern" class="mat-icon-rtl-mirror">
<!-- {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} -->
{{treeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
</mat-icon>
<mat-icon *ngIf="!node.childern" class="mat-icon-rtl-mirror">
list_alt
</mat-icon>
</button>
{{node.FOLDER_NAME}}
{{node.HEADER_NAME}}
<span class="node-detail" (click)="submitForm(node)" [ngClass]="{'highlight_2': selectedNode == node.KEY_NO } " > {{node.DETAIL_NAME}} </span>
<!-- {{node.KEY_NO}} -->
<ng-container matTreeNodeOutlet *ngIf="treeControl.isExpanded(node)"></ng-container>
</mat-nested-tree-node>
</mat-tree>
====== ts =======
selectedNode: Number = -1;
treeControl;
tempTree: any[];
constructor(
// database: FileDatabase,
formBuilder: FormBuilder,
private Service: WebApService,
private http: HttpClient) {
this.treeControl = new NestedTreeControl<ClassTree>(node => observableOf(node.childern));
}
createTree() {
this.tempTree = [];
settingmodel.NODE_1.forEach((val, idx, array) => {
this.tempTree.push(val);
let i = 0;
settingmodel.NODE_2.forEach((val_2, idx_2, array_2) => {
if (array_2[idx_2].F_KEY_NO === array[idx].KEY_NO) {
// console.log(val_2.HEADER_NAME);
if (!this.tempTree[idx].childern) {
this.tempTree[idx].childern = [];
}
this.tempTree[idx].childern.push(val_2);
this.tempTree[idx].childern[i].childern = [];
settingmodel.NODE_3.forEach((val_3, idx_3, array_3) => {
if (val_3.F_KEY_NO === val_2.KEY_NO) {
this.tempTree[idx].childern[i].childern.push(val_3);
}
});
i += 1;
}
});
});
console.log(this.tempTree);
}
export class ClassTree {
FOLDER_NAME: string;
HEADER_NAME: string;
DETAIL_NAME: string;
KEY_NO: string;
name: string;
childern: ClassTree[];
}
export const settingmodel = {
NODE_1: [
{
KEY_NO: 1,
FOLDER_NAME: '[FEE113256]-20180530 1900'
}, {
KEY_NO: 2,
FOLDER_NAME: '[EQU201805]-20180515 2033'
}
],
NODE_2: [
{
KEY_NO: 10,
F_KEY_NO: 1,
HEADER_NAME: '1234- $1234 (20180627)'
}, {
KEY_NO: 20,
F_KEY_NO: 1,
HEADER_NAME: '1000- $1000 (2018065)'
}, {
KEY_NO: 30,
F_KEY_NO: 2,
HEADER_NAME: '32426- $588.48 (20180507)'
}, {
KEY_NO: 40,
F_KEY_NO: 2,
HEADER_NAME: '32427- $1470.72 (20180507)'
}
],
NODE_3: [
{
KEY_NO: 100,
F_KEY_NO: 10,
DETAIL_NAME: '[E3A001][FIKTK][$656]'
}, {
KEY_NO: 200,
F_KEY_NO: 10,
DETAIL_NAME: '[E5A001][FIKTK][$496.35]'
}, {
KEY_NO: 300,
F_KEY_NO: 20,
DETAIL_NAME: '[E4A02A][FIHEL][$335.59]'
}
, {
KEY_NO: 400,
F_KEY_NO: 30,
DETAIL_NAME: '[E3A001][FIHEL][$80]'
}, {
KEY_NO: 500,
F_KEY_NO: 40,
DETAIL_NAME: '[E5A001][FIHEL][$218.4]'
}
]
};
全站熱搜
留言列表
