Как добавить пользовательские столбцы в Nebular TreeGrid? - PullRequest
Новая
       66

Как добавить пользовательские столбцы в Nebular TreeGrid?

1 голос
/ 08 января 2020

В Nebular Tree Grid, как добавить пользовательские столбцы, которые на самом деле не связаны с данными? Например: добавить, изменить, удалить столбцы. Я только что назначил их свойствам моего класса (ref, city, address), но что, если у определения класса не было «запасных» свойств? Как добавить дополнительные столбцы?

В 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>
...