如何将 primeng 数据表行标记为无效？

Question

我正在使用 primeng 数据表来显示一些包含可编辑单元格的数据，这些单元格触发组件中的函数来计算该行另一列中的值。这一点很简单。

现在我想将可编辑单元格或整行标记为无效，如果计算returns功能无效数据（即十进制数）。

我不知道如何实现这个。

我尝试使用自定义 css，但我尝试附加到 p 列的每个 class 对行或单元格没有影响。

这是我的数据表：

<p-dataTable #balanceTable [(value)]="denomValueContent" sortable="false" dataKey="id" rowGroupMode="subheader" groupField="valueEach" [sortableRowGroup]="false">
                <p-header>ATS name </p-header>
                <ng-template class="rowgroupSmall" pTemplate="rowgroupheader" let-rowData>{{rowData['valueEach'] | number:'.2-2'}}</ng-template>
                <p-column selectionMode="multiple"></p-column>
                <p-column header="Denomination" field="valueEach">
                    <ng-template let-col let-currentRow="rowData" pTemplate="body">
                        <div class="textAlignmentRight fontWeightBold">{{currentRow[col.field] | number:'.2-2'}}</div>
                    </ng-template>
                </p-column>
                    <p-column type="number" header="Notes" field="notes">                                                                                                                                                                                                                                                                                                                                        
                        <ng-template let-col let-notes="rowData" pTemplate="body"  let-i="rowIndex">
                            <input pInputText class="inputDenomField bottomBorder" placeholder="0"
                                currencyMask [options]="{prefix: '', suffix: '', allowNegative: false, allowZero: true, precision: 0}"
                                (blur)="recalculateNotes(i)"
                                [(ngModel)]="notes[col.field]" 
                                [ngModelOptions]="{standalone:true}" />
                        </ng-template>
                    </p-column>
                <p-column type="number" header="Amount" field="amount">
                    <ng-template let-col let-currentRow="rowData" pTemplate="body" let-i="rowIndex">
                        <input placeholder="0.00"
                            currencyMask [options]="{prefix: '', suffix: '', allowNegative: false, allowZero: true}" 
                            pInputText class="inputDenomField bottomBorder" 
                            (blur)="recalculateAmount(i)" 
                            [(ngModel)]="currentRow[col.field]" 
                            [ngModelOptions]="{standalone:true}"
                        />
                    </ng-template>
                </p-column>
                <p-column header="Locked"></p-column>
                <p-column header="State">
                    <ng-template pTemplate="body">
                        Ok
                    </ng-template>
                </p-column>
            </p-dataTable>

组件：

  export class EmptyAtsComponent implements OnInit {
  @ViewChild('balanceTable') balanceTable: DataTable;

  denomValueContent: DenomValueContent[] = [];
  // FIXME: id durch eingeloggten User via AuthGuard ersetzen, hier nur hardcoded zum testen, 0 oder 1 möglich
  tellerId = 0;
  constructor(private maintellerService: MaintellerService) { }

  ngOnInit() {
    this.maintellerService.getCounterCloseBalanceById(this.tellerId).then(mainteller => this.setBalance(mainteller));
  }

  setBalance(balance: TellerBalance) {
    this.denomValueContent = balance.denoms[0].content;
    console.log(this.denomValueContent);
  }

  recalculateAmount(index) {
    if (this.balanceTable.value[index].amount >= 0) {
      this.balanceTable.value[index].notes = this.balanceTable.value[index].amount / this.balanceTable.value[index].valueEach;
    } else {
      this.balanceTable.value[index].notes = undefined;
      this.balanceTable.value[index].amount = undefined;
    }
  }

  recalculateNotes(index) {
    if (this.balanceTable.value[index].notes >= 0) {
      this.balanceTable.value[index].amount = this.balanceTable.value[index].notes * this.balanceTable.value[index].valueEach;
    } else {
      this.balanceTable.value[index].amount = undefined;
      this.balanceTable.value[index].notes = undefined;
    }
  }
}

请注意，我的自定义 CSS 尝试在上面的代码中实现。

有人可以给我意见或建议，我如何将整行或单元格标记为无效，即带有红色边框？

非常感谢您的阅读。

Answer 1

你可以使用 rowStyleClass 属性。

HTML

<p-dataTable [value]="cars" [rowStyleClass]="isRowValid" [editable]="true">

其中 isRowValid 是在您的组件中声明的函数，它将检查该行是否有效，并且 return 一个 CSS 类名。

组件

isRowValid(rowData: any) {
    return (rowData.year<=2010) ? "danger" : "success";
}

CSS（"danger" 和 "success" 类）

tr.danger > td {
  background-color: red;
}

tr.success > td {
  background-color: green;
}

这是一个有效的 Plunker。

在那个 Plunker 中，年份列是可编辑的，如果年份字段小于或等于 2010，则一行被视为有效。

如何将 primeng 数据表行标记为无效？

How can i mark a primeng datatable row as invalid?

angular

primeng

primeng-datatable