在Primeng p-table

时间:2018-03-05 16:23:44

标签: angular primeng

我正在使用primeng的新p-table组件。我的第一列是冻结的,每行包含三个按钮。其他列是动态生成的,简单的文本输出。 Primeng在自己的html表中生成标题,正文和冻结列。如果我点击冻结列中的一个按钮,我想通过我的表的指令#tableCol(不确定它是否是一个指令)来获取整行,并突出显示它,但我只得到冻结的列行。 突出显示在rowDeletionMark(tableCol)方法中。

如何在“主”表中获取实际数据/行所在的行?

我的表格:

<p-table #dt [columns]="header" [value]="data" [resizableColumns]="true" [frozenColumns]="frozenCols" [paginator]="true"
    [rows]="10" [rowsPerPageOptions]="[10,20,30]" sortMode="multiple" [reorderableColumns]="true" class="ptable row-cancel"
    [scrollable]="true" frozenWidth="150px">
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns" style="width:200px">
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" style="width:150px;font-size:13px" pResizableColumn pReorderableColumn 
          [pSortableColumn]="col.field !== 'ACTION' ? col.field : null">
          {{col.field}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
      <tr>
        <td #tableCol *ngFor="let col of columns" height="48" style="width:150px;padding:0 5px 0 5px;line-height: 1;" [ngStyle]="getRowMarking(rowData)"
          pEditableColumn>
          <div *ngIf="col.field === 'ACTION'">
            <button pButton type="button" class="row-btn" icon="fa fa-fw fa-save"></button>
            <button pButton type="button" class="row-btn ui-button-danger" icon="fa fa-fw fa-eraser" (click)="rowDeletionMark(tableCol)"></button>
            <button pButton type="button" class="row-btn ui-button-info" icon="far fa-clock-o" (click)="showRowHistory(rowData)"></button>
          </div>
          <div *ngIf="col.editable && col.field !== 'ACTION'">
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input type="text" [(ngModel)]="data[col.field]">
              </ng-template>
              <ng-template pTemplate="output">
                {{rowData[col.field]}}
              </ng-template>
            </p-cellEditor>
          </div>
          <div *ngIf="!col.editable">
            {{rowData[col.field]}}
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>

突出显示方法:

rowDeletionMark(tableCol) {
    tableCol.className += ' canceled';
  }

0 个答案:

没有答案