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
19
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
0
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
19
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
0
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版中,这是固定的。所以这个问题可以关闭。