Question

我在角度项目中使用TeraData Covalent的数据表。我使用的模板有以下动作按钮选项。

actionButtons: any[] = [
    {
        'title': "View",
        'icon': "visibility",
        'url': "/business-opps/contacts/view"
    },
    {
        'action':'update',
        'title': "Update",
        'icon': "edit",
    },
    {
        'action': 'delete',
        'title': "Delete",
        'icon': "delete",
        'url': ""
    }
]

我没有给出网址，而是打开对话框或者传递函数名称。

我的数据表html是：

<datatable *ngIf="eodReports" 
    [dataList]="eodReports" 
    [columns]="dtColumns" 
    [actionButtons]="actionButtons"
    [totalRecords]="totalRecords" 
    [sortBy]="'date'"
    (deleteRecord)="deleteRecord($event)"
    (nextPage)="nextPage($event)"
    (filterRecords)="filterRecords($event)" >
</datatable>

Answer 1

上述组件不是td-data-table的输入。 Covalent data table可以接受自定义单元格模板。

<table td-data-table>
  <th td-data-table-column>
    <md-icon>comment</md-icon>
    <span>Comments</span>
  </th>
  <th td-data-table-column
      *ngFor="let column of columns"
      [numeric]="column.numeric">
    {{column.label}}
  </th>
  <tr td-data-table-row *ngFor="let row of basicData">
    <td td-data-table-cell (click)="openPrompt(row, 'comments')">
      <button md-button [class.mat-accent]="!row['comments']">{{row['comments'] || 'Add Comment'}}</button>
    </td>
    <td td-data-table-cell *ngFor="let column of columns" [numeric]="column.numeric">
      {{column.format ? column.format(row[column.name]) : row[column.name]}}
    </td>
  </tr>
</table>

在此示例中，TdDialogService用于触发propmt，但您也可以custom dialog。

import { ITdDataTableColumn } from '@covalent/core';
import { TdDialogService } from '@covalent/core';
...
})
export class Demo {
  data: any[] = [
    { sku: '1452-2', item: 'Pork Chops', price: 32.11 },
    { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
  ];
  columns: ITdDataTableColumn[] = [
    { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' },
    { name: 'item', label: 'Item name' },
    { name: 'price', label: 'Price (US$)', numeric: true, format: v => v.toFixed(2) },
  ];

  constructor(private _dialogService: TdDialogService) {}

  openPrompt(row: any, name: string): void {
    this._dialogService.openPrompt({
      message: 'Enter comment?',
      value: row[name],
    }).afterClosed().subscribe((value: any) => {
      if (value !== undefined) {
        row[name] = value;
      }
    });
  }
}

从Teradata Covalent数据表

1 个答案: