Angular2 PrimeNG条件行格式 [英] Angular2 PrimeNG Conditional row Formatting
问题描述
我的模型如下（非常简化）：
export类RepackRequest {
AdhereToLeadTime：boolean;
LeadTimeRemaining：string;
constructor（）{
var today = new Date（）;
if（this.AdhereToLeadTime）{
var difference = today.getTime（） - this.StartDate.getTime（）;
if（差异> = 3&&差异= 4）{
this.LeadTimeRemaining =orange;
}
else if（差异> = 5）{
this.LeadTimeRemaining =red;
}
}
else {
this.LeadTimeRemaining ='white';
}
}
}
所以基本上如果它坚持交货时间为5天，它会根据接近交货时间的不同而改变颜色。
在我的模板中，我有以下几点：
< p-dataTable [value] =approvalRepacks
[rows] =10
[paginator] = true
[pageLinks] =5
[rowsPerPageOptions] =[5,10,20]
selectionMode =single
[（selection）] = selectedRepack
（onRowSelect）=onSelect（）
[globalFilter] =na>
< header>
< div style =text-align：center;>
< button pButton type =buttonicon =fa-plusiconPos =leftlabel =创建新请求（click）=addNew（）>< / button>
< / div>
< / header>
< p-column field =DateRequestedheader =Date Requestedsortable =true>
< template let-col let-rep =rowDatapTemplate type =body>
< span [style.background] ={{rep.LeadTimeRemaining}}> {{rep [col.field] |日期：'dd / MM / yyyy'}}< / span>
< / template>
< / p-column>
< p-column field =OrderNumheader =Order Nosortable =truestyleClass =wordBreak>< / p-column>
< p-column field =Customerheader =Customersortable =true>< / p-column>
< p-column field =FromItemheader =Repack Fromsortable =truestyleClass =wordBreak>< / p-column>
< p-column field =ToItemheader =Repack Tosortable =truestyleClass =wordBreak>< / p-column>
< p-column field =FromWarehouseheader =From Whsesortable =true>< / p-column>
< p-column field =FromLocationheader =From Binsortable =true>< / p-column>
< p-column field =ToWarehouseheader =To Whsesortable =true>< / p-column>
< p-column field =ToLocationheader =To Binsortable =true>< / p-column>
< p-column field =Quantityheader =Qtysortable =true>< / p-column>
< p-column field =RequestedByheader =Requested Bysortable =truestyleClass =wordBreak>< / p-column>
< p-column header =Actions>
< template let-col let-rep =rowDatapTemplate type =body>
< button pButton type =buttonicon =fa-checklabel =Approve（click）=approve（rep.ID）>< / button>
< / template>
< / p-column>
< / p-dataTable>
如您所见，我有 [style.background] ={{ rep.LeadTimeRemaining}}尝试设置列的颜色。
我猜这是错误的方法，因为它的设置只是为了该列和id需要相同的每一列。
任何人都可以帮忙，我找不到任何信息。
非常感谢
编辑
在每个列上使用以下内容突出显示了一点，但它是非常难看的，您可以在下面看到它只是颜色div而不是td或tr。
< template let-col let-rep =rowDatapTemplate类型=body>
< div [style.background] =rep.LeadTimeRemainingstyle =margin：-50px;>
< span> {{rep [col.field]}}< / span>
< / div>
< / template>
div 周围的白色空间的原因是因为 padding 该primeng数据表适用于父 td 。要填充周围的空格，您可以将父元素 p-column 的填充设置为 0 （使用 styleClass ），然后将 padding 添加到datatable父元素中的 div code> td （见下面的例子）
采取这种方法的主要原因是如果你想改变背景根据当前行的数据，只有某些单元格的颜色。如果要使用这种方法根据其数据更改整行的背景颜色，则必须在每个 p列上应用这些样式。如果着色整个行是您的意图，请参阅此处以获取更简单的方法。 p>
CSS ：
.padding-none {
padding：0！important;
}
/ **（可选）在列设置为.padding-none * /
.ui-datatable thead th.padding-没有，.ui-datatable tfoot td.padding-none，
.ui-datatable tfoot th.padding-none {
/ **设置为任何你的默认datatable td padding是* /
padding：.25em .5em！important;
}
.ui-datatable tbody td.padding-none div {
/ **设置为任何默认的datatable td padding是* /
padding：。 25em。
}
模板：
< p-column field =...header =...styleClass =padding-nonesortable =true>
< template let-col let-rep =rowDatapTemplate>
< div [style.background] =rep.LeadTimeRemaining>
{{rep [col.field]}}
< / div>
< / template>
< / p-column>
I have an Angular2 app using PrimeNG components. I am attempting to make it so that when a field is of a certain value, the row in a DataTable is coloured a particular colour. I have another field which contains a colour value to use for the row highlight but cannot work out how to get it to work.
My Model is as follows (very simplified):
export class RepackRequest{
AdhereToLeadTime: boolean;
LeadTimeRemaining: string;
constructor() {
var today = new Date();
if(this.AdhereToLeadTime){
var difference = today.getTime() - this.StartDate.getTime();
if(difference >= 3 && difference <= 4){
this.LeadTimeRemaining = "orange";
}
else if(difference >= 5){
this.LeadTimeRemaining = "red";
}
}
else {
this.LeadTimeRemaining = 'white';
}
}
}
So basically if it adhered to the lead time of 5 days, it changes colour depending on how close to the lead time it is.
In my template i then have the following:
<p-dataTable [value]="approvalRepacks"
[rows]="10"
[paginator]="true"
[pageLinks]="5"
[rowsPerPageOptions]="[5,10,20]"
selectionMode="single"
[(selection)]="selectedRepack"
(onRowSelect)="onSelect()"
[globalFilter]="na">
<header>
<div style="text-align:center;">
<button pButton type="button" icon="fa-plus" iconPos="left" label="Create New Request" (click)="addNew()"></button>
</div>
</header>
<p-column field="DateRequested" header="Date Requested" sortable="true">
<template let-col let-rep="rowData" pTemplate type="body">
<span [style.background]="{{rep.LeadTimeRemaining}}">{{rep[col.field] | date:'dd/MM/yyyy'}}</span>
</template>
</p-column>
<p-column field="OrderNum" header="Order No" sortable="true" styleClass="wordBreak"></p-column>
<p-column field="Customer" header="Customer" sortable="true"></p-column>
<p-column field="FromItem" header="Repack From" sortable="true" styleClass="wordBreak"></p-column>
<p-column field="ToItem" header="Repack To" sortable="true" styleClass="wordBreak"></p-column>
<p-column field="FromWarehouse" header="From Whse" sortable="true"></p-column>
<p-column field="FromLocation" header="From Bin" sortable="true"></p-column>
<p-column field="ToWarehouse" header="To Whse" sortable="true"></p-column>
<p-column field="ToLocation" header="To Bin" sortable="true"></p-column>
<p-column field="Quantity" header="Qty" sortable="true"></p-column>
<p-column field="RequestedBy" header="Requested By" sortable="true" styleClass="wordBreak"></p-column>
<p-column header="Actions">
<template let-col let-rep="rowData" pTemplate type="body">
<button pButton type="button" icon="fa-check" label="Approve" (click)="approve(rep.ID)"></button>
</template>
</p-column>
</p-dataTable>
As you can see i have [style.background]="{{rep.LeadTimeRemaining}}" to attempt to set the colour of the column.
I guess this is the wrong way to go about it as its setting it just for that column and id need the same on every column.
Can anyone help with this i cannot find any information anywhere regarding it.
Many Thanks
EDIT
Using the following on every column highlights it to a point however it is very unsightly as you can see below as it just colours the div rather than the td or tr.
<template let-col let-rep="rowData" pTemplate type="body">
<div [style.background]="rep.LeadTimeRemaining" style="margin:-50px;">
<span>{{rep[col.field]}}</span>
</div>
</template>
The reason for the surrounding white space around the div is because of the padding that primeng datatables applies to the parent td. To fill the surrounding whitespace, you can set the padding of the parent p-column to 0 (using styleClass) and then add padding to the div inside the datatable parent td (see example below).
The main reason to take this approach would be if you wanted to change the background color of only certain cells, based on the current row's data. If you wanted to change the background color of the entire row based on its data using this approach, you'd have to apply these styles on each p-column. If coloring the entire row is your intent, see here for a simpler approach.
CSS:
.padding-none {
padding: 0 !important;
}
/** (optional) still pad table header and footer on datatables with columns set to .padding-none */
.ui-datatable thead th.padding-none, .ui-datatable tfoot td.padding-none,
.ui-datatable tfoot th.padding-none {
/** set to whatever your default datatable td padding is */
padding: .25em .5em !important;
}
.ui-datatable tbody td.padding-none div {
/** set to whatever your default datatable td padding is */
padding: .25em .5em;
}
Template:
<p-column field="..." header="..." styleClass="padding-none" sortable="true">
<template let-col let-rep="rowData" pTemplate>
<div [style.background]="rep.LeadTimeRemaining">
{{rep[col.field]}}
</div>
</template>
</p-column>
这篇关于Angular2 PrimeNG条件行格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
