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

【问题标题】：How can i mark a primeng datatable row as invalid?如何将primeng数据表行标记为无效？
【发布时间】：2017-11-07 08:52:31
【问题描述】：

我正在使用primeng数据表来显示一些带有可编辑单元格的数据，这些单元格正在触发组件中的函数来计算行的另一列中的值。到此为止非常简单。

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

我不知道如何实现。

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

这是我的数据表：

<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 尝试。

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

非常感谢您的阅读。

【问题讨论】：

标签： angular primeng primeng-datatable

【解决方案1】：

您可以为此使用rowStyleClass 属性。

HTML

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

isRowValid 是在组件中声明的函数，它将检查行是否有效并返回 CSS 类名。

组件

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

CSS（“危险”和“成功”类）

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

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

这是一个有效的Plunker。

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

【讨论】：