如何将样式 class 添加到 p-dataTable 行
How to add style class to p-dataTable row
我们使用 PrimeNG 1.0.0-beta.16 中的 p-dataTable
我想在值为真时向行添加样式。
我想出了如何对单元格执行此操作,但我需要整行更改其背景。
<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
内没有任何内容被记录。在我看来这个方法没有被调用。
rowStyleClass
的工作方式与您想象的有点不同;它需要一个函数作为输入,即 returns 一个字符串(CSS class 名称)。它列在 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 月发布。
看来是scrollable="true"
造成的。当 scrollable
设置为 true
时,将使用不具有 getRowStyleClass
.
绑定的不同模板
在这里你可以看到 table 的 <tr>
是 not 可滚动的 getRowStyleClass
的绑定:https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180
但是可滚动 table 的 <tr>
没有绑定:https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257
您可以在 this Plunkr and I have posted an issue here 中看到这两种情况。
我看不出有任何理由不能在可滚动的 table 上使用该方法,因此我提交了一个 PR,其中包含对此的修复,您可以监控 here。
在 PrimeNg 1.1.3 版本中,此问题已修复。所以这个问题可以关闭了。
我们使用 PrimeNG 1.0.0-beta.16 中的 p-dataTable
我想在值为真时向行添加样式。 我想出了如何对单元格执行此操作,但我需要整行更改其背景。
<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
内没有任何内容被记录。在我看来这个方法没有被调用。
rowStyleClass
的工作方式与您想象的有点不同;它需要一个函数作为输入,即 returns 一个字符串(CSS class 名称)。它列在 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 月发布。
看来是scrollable="true"
造成的。当 scrollable
设置为 true
时,将使用不具有 getRowStyleClass
.
在这里你可以看到 table 的 <tr>
是 not 可滚动的 getRowStyleClass
的绑定:https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L180
但是可滚动 table 的 <tr>
没有绑定:https://github.com/primefaces/primeng/blob/02e88b16e811a10d8842deb1f5e354bfb295d4c9/components/datatable/datatable.ts#L257
您可以在 this Plunkr and I have posted an issue here 中看到这两种情况。
我看不出有任何理由不能在可滚动的 table 上使用该方法,因此我提交了一个 PR,其中包含对此的修复,您可以监控 here。
在 PrimeNg 1.1.3 版本中,此问题已修复。所以这个问题可以关闭了。