1

我在我的 Angular 项目中使用 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': ""
    }
]

我不想给出一个 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>
4

1 回答 1

0

上述组件不是td-data-table. Covalent 数据表可以接受自定义单元格模板。

<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用于触发提示，但您也可以使用自定义对话框。

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;
      }
    });
  }
}
于 2017-08-29T19:41:59.820 回答