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

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

我们使用的是PrimeNG 1.0 -beta.16的p-dataTable。

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"> is working but rowStyleClass="missingPeriod" is not.

< span[class.missingPeriod]= " ! timePeriod。IsNext“>正在工作，但rowStyleClass=”missingPeriod”不是。

Please advice.

请建议。

Updated syntax:

更新的语法:

Updated to v1.0.1

更新为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>

And the typescript:

打字稿:

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

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

在customRowClass中没有日志记录。在我看来，这种方法没有被调用。

3 个解决方案

#1

rowStyleClass works a bit differently than you'd think; it takes a function as it's input, that returns a string (the CSS class name). It's listed in the PrimeNG DataTable docs.

rowStyleClass的工作方式与你想象的有点不同;它接受一个函数作为输入，返回一个字符串(CSS类名)。它在PrimeNG DataTable文档中列出。

In my HTML I've got:

在我的HTML中有:

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

In the component:

在组件:

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

In a global CSS file:

在全局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;
}

If this doesn't help, you need to upgrade to a more recent version. PrimeNG 1.0.0 RC5 is out as of November 2016.

如果这没有帮助，您需要升级到最新版本。PrimeNG 1.0.0 RC5截至2016年11月。

#2

It seems that scrollable="true" is the cause of this. When scrollable is set to true, a different template is used which doesn't have the binding for getRowStyleClass.

似乎scrollable="true"是这个的原因。当scrollable设置为true时，将使用一个不同的模板，该模板对getRowStyleClass没有绑定。

Here you can see the <tr> for a table that is not scrollable has a binding for getRowStyleClass: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180

在这里，您可以看到一个不可滚动的表的对getRowStyleClass有一个绑定:https://github.com/primefaces/primeng/blob/02e811a10d811a10d811a10d884bfb295d4c9 /datatable/datatable.ts#L180。

But the <tr> for the scrollable table does not have the binding: https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257

但是，可滚动表的没有绑定:https://github.com/primefaces/primeng/blob/02e88b16e811a10d811a10d884bfb295d4c9 /datatable/datatable.ts#L257。

You can see both cases in this Plunkr and I have posted an issue here.

你可以看到这两种情况，我在这里发布了一个问题。

I don't see any reason the method can't be used on scrollable tables, so I have submitted a PR with a fix for this that you can monitor here.

我看不出这个方法不能在可滚动的表上使用，所以我已经提交了一个修复程序，您可以在这里进行监视。

#3

-5

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

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

#1