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>表格不可滚动具有[{1}}的约束：https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

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

您可以在this Plunkr中看到这两个案例，我发布了一个问题here。

我认为这个方法无法在可滚动表格上使用，所以我已经提交了一个PR，其中包含一个可以监视{PR $ {3}}的修复程序。

Answer 3

在PrimeNg的1.1.3版中，这是固定的。所以这个问题可以关闭。

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

3 个答案: