我们正在使用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 ""; }
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月.
原文地址:https://www.jb51.cc/angularjs/143381.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。