如何在ngx-datatable中移除无子节点行的展开按钮

我使用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'"
  (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,
        };
    }
  }
}

解决方案 #

方法1：自定义树形列模板（推荐，完全控制显示逻辑）

ngx-datatable默认会给所有顶级行添加展开按钮，不管是否有子节点。我们可以通过自定义列模板，仅给有子节点的行渲染展开按钮：

1. 预处理数据，标记有子节点的行
   在组件初始化时，给每个行添加hasChildren属性，标识是否存在子节点：

ngOnInit() {
  this.rows.forEach(row => {
    row.hasChildren = this.rows.some(child => child.manager === row.id);
  });
}

2. 修改树形列的模板
   移除[isTreeColumn]="true"，自定义包含缩进和展开按钮的模板：

<ngx-datatable-column name="name" [flexGrow]="3">
  <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
    <!-- 树形缩进，根据treeLevel自动调整 -->
    <span [style.padding-left.px]="row.treeLevel * 20"></span>
    <!-- 仅当有子节点时显示展开按钮 -->
    <button 
      *ngIf="row.hasChildren" 
      (click)="toggleRow(row)" 
      class="datatable-icon datatable-tree-row-toggle"
    >
      {{ expanded ? '-' : '+' }}
    </button>
    {{ row.name }}
  </ng-template>
</ngx-datatable-column>

3. 实现行展开/折叠逻辑
   替换原来的onTreeAction方法，改为直接操作行的状态：

toggleRow(row: any) {
  row.treeStatus = row.treeStatus === 'expanded' ? 'collapsed' : 'expanded';
  // 触发视图更新
  this.rows = [...this.rows];
}

方法2：CSS隐藏（快速解决）

通过给无子节点的行添加自定义类，再用CSS隐藏展开按钮：

1. 修改getRowClass方法
   给没有子节点的行添加no-children类：

getRowClass(row: any) {
  const hasChildren = this.rows.some(child => child.manager === row.id);
  const classes = {};
  if (row.class === 'child-row-file') {
    classes['child-row-file'] = true;
  }
  if (!hasChildren) {
    classes['no-children'] = true;
  }
  return classes;
}

2. 添加CSS样式
   在组件的CSS文件中添加：

.datatable-row.no-children .datatable-tree-row-toggle {
  display: none;
}

内容的提问来源于stack exchange，提问作者Sunny