我使用以下代码在 ngx-datatable 中生成树视图:
HTML:
<ngx-datatable
[rows]="rows"
class="material"
[loadingIndicator]="false"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[columns]="columns"
[rowClass]="getRowClass"
[reorderable]="reorderable"
[treeFromRelation]="'manager'"
[treeToRelation]="'id'"
[rows]="rows"
(treeAction)="onTreeAction($event)"
>
<ngx-datatable-column name="name" [flexGrow]="3" [isTreeColumn]="true">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="gender" [flexGrow]="3">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
TS:
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
reorderable: boolean = true;
loadingIndicator: boolean = true;
rows = [
{
id: 1,
name: 'Austin',
gender: 'Male',
company: 'Swimlane',
},
{ id: 2, name: 'Dany', gender: 'Male', company: 'KFC' },
{
id: 3,
name: 'Molly',
gender: 'Female',
company: 'Burger King',
manager: 1,
class: 'child-row-file',
},
];
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
onTreeAction(event: any) {
console.log('toggle');
const index = event.rowIndex;
const row = event.row;
if (row.treeStatus === 'collapsed') {
row.treeStatus = 'expanded';
} else {
row.treeStatus = 'collapsed';
}
this.rows = [...this.rows];
}
getRowClass(event) {
console.log(event);
if (event.class) {
if (event.class == 'child-row-file')
return {
'child-row-file': true,
};
}
}
}
代码工作正常,我能够生成树视图。 运行示例
问题: 因为,您可以检查第二个父级没有子级,但它仍然显示展开按钮。如果没有孩子在场,我如何删除此按钮。
我目前正在寻找相同的东西。你解决这个问题了吗?