如何将样式类添加到 p-dataTable 行

Question

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

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

<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 内的任何内容都没有记录。在我看来，这个方法没有被调用。

Answer 1

rowStyleClass 的工作方式与您想象的有些不同；它接受一个函数作为输入，该函数返回一个字符串（CSS 类名）。它在PrimeNG DataTable docs 中列出。

在我的 HTML 中，我有：

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>

在组件中：

lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

在全局 CSS 文件中：

/* TODO: this should really be in the component's CSS file, but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important', but you might need it */
    color: silver !important;
}

如果这没有帮助，您需要升级到更新的版本。 PrimeNG 1.0.0 RC5 已于 2016 年 11 月发布。

Answer 2

看来scrollable="true" 是造成这种情况的原因。当scrollable 设置为true 时，将使用不具有getRowStyleClass 绑定的不同模板。

在这里您可以看到<tr> 对应于一个不可 可滚动的表格具有getRowStyleClass 的绑定：https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

但是可滚动表格的<tr>没有绑定：https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

您可以在this Plunkr 中看到这两种情况，我已经发布了一个问题here。

我看不出该方法不能用于可滚动表的任何原因，因此我提交了一个带有修复此问题的 PR，您可以监控 here。

Answer 3

在 PrimeNg 的 1.1.3 版本中，此问题已得到修复。所以这个问题可以结束了。