6

在星云树网格中，如何添加未真正链接到数据的自定义列？例如：添加、编辑、删除列。我刚刚将它们分配给我的类的属性（参考、城市、地址），但是如果类定义没有“备用”属性怎么办？如何添加额外的列？

在 treegrid.component.ts 中：

nameColumn = 'name';
editColumn = 'ref';
addColumn = 'city';
deleteColumn = 'address';
defaultColumns = [ 'description' ];
allColumns = [ this.nameColumn, ...this.defaultColumns, this.editColumn, this.addColumn, this.deleteColumn ];
headers = ['Name', 'Description', 'Edit', 'Add', 'Delete'];

在 treegrid.component.html 中：

<table [nbTreeGrid]="datasource" [nbSort]="datasource" (sort)="updateSort($event)">

      <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
      <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

      <ng-container [nbTreeGridColumnDef]="nameColumn">
        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(nameColumn)" *nbTreeGridHeaderCellDef>
          {{headers[0]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <mybe-fs-icon [children]="row.children" [expanded]="row.expanded"></mybe-fs-icon>
          {{row.data[nameColumn]}}
        </td>
      </ng-container>

      <ng-container *ngFor="let column of defaultColumns; let index = index"
                    [nbTreeGridColumnDef]="column"
                    [showOn]="getShowOn(index)">
        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef>
          {{headers[index+1]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="editColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 3]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="edit-2-outline" (click)="editOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="addColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 2]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="plus-circle-outline" (click)="addOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="deleteColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 1]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="minus-circle-outline" (click)="confirmDeleteOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

    </table>
4

0 回答 0