如何将样式类添加到 p-dataTable 行 [英] How to add style class to p-dataTable row

问题描述

我们使用的是来自 PrimeNG 1.0.0-beta.16 的 p-dataTable

We're using p-dataTable from PrimeNG 1.0.0-beta.16

当值为 true 时，我想向行添加样式.我想出了如何对单元格执行此操作，但我需要整行更改其背景.

I want to add a style to the row when a value is true. I figured it out how to do this with the cell, but I need the whole row the change its background.

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

<span [class.missingPeriod]="!timePeriod.IsNext"> 有效，但 rowStyleClass="missingPeriod" 无效.

请指教.

更新的语法:

更新到 v1.0.1

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

还有打字稿:

public customRowClass(rowData, rowIndex): string {
    console.log("In customRowClass");
    console.log(rowData);
    console.log(rowIndex);
    return "";
}

customRowClass 内没有任何内容被记录.在我看来，这个方法没有被调用.

Nothing inside customRowClass is logged. It seems to me this method isn't called.

推荐答案

在 PrimeNg 1.1.3 版中，此问题已修复.所以这个问题可以关闭了.

In version 1.1.3 of PrimeNg this is fixed. So this question can be closed.

这篇关于如何将样式类添加到 p-dataTable 行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！