Question

我正在使用一个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尝试在上面的代码中没有实现。

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

非常感谢您阅读。

Answer 1

您可以使用rowStyleClass属性。

<强> HTML

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

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

<强>组件

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

CSS （＆＃34;危险＆＃34;以及＆＃34;成功＆＃34;类）

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

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

这是一个有效的Plunker。

在该Plunker中，如果年份字段小于或等于2010年，则列可编辑，并且行被视为有效。

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

1 个答案: