Angular2 PrimeNG 条件行格式化
Angular2 PrimeNG Conditional row Formatting
我有一个使用 PrimeNG 组件的 Angular2 应用程序。我试图做到这一点,以便当一个字段具有特定值时,DataTable 中的行被着色为特定颜色。我有另一个字段,其中包含用于行突出显示的颜色值,但无法弄清楚如何让它工作。
我的模型如下(非常简化):
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';
}
}
}
所以基本上如果它坚持 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="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>
如您所见,我 [style.background]="{{rep.LeadTimeRemaining}}"
尝试设置列的颜色。
我想这是错误的做法,因为它只是为该列设置它,并且 id 在每一列上都需要相同。
任何人都可以帮助解决这个问题吗?我找不到任何相关信息。
非常感谢
编辑
在每一列上使用以下内容将其突出显示到一个点,但是它非常难看,正如您在下面看到的那样,因为它只是为 div 而不是 td 或 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>
请尝试使用这种方式:
[style]="{'background':rep.LeadTimeRemaining}"
而不是:
[style.background]="{{rep.LeadTimeRemaining}}"
div
周围的白色space是因为primeng数据表应用于父td
的padding
。要填充周围的白色space,可以将父p-column
的padding设置为0
(使用styleClass
),然后将padding
添加到div
在父数据表 td
中(参见下面的示例)。
采用这种方法的主要原因是,如果您只想根据当前行的数据更改某些单元格的背景颜色。如果您想使用这种方法根据其数据更改整行的背景颜色,则必须在每个 p-column
上应用这些样式。如果您打算为整行着色,请参阅 了解更简单的方法。
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;
}
模板:
<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>
您可以使用 rowStyleClass 属性突出显示数据中的行table。
您应该将函数传递给此属性。该函数应 return class 将应用于 table 行的名称。
模板:
<p-dataTable [rowStyleClass]="highlightRow" ...>
组件代码:
highlightRow(rowData: any, rowIndex: number) {
return rowData.LeadTimeRemaining + '-highlighting';
}
CSS:
.red-highlighting { background-color: red; }
.white-highlighting { background-color: white; }
.orange-highlighting { background-color: orange; }
我有一个使用 PrimeNG 组件的 Angular2 应用程序。我试图做到这一点,以便当一个字段具有特定值时,DataTable 中的行被着色为特定颜色。我有另一个字段,其中包含用于行突出显示的颜色值,但无法弄清楚如何让它工作。
我的模型如下(非常简化):
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';
}
}
}
所以基本上如果它坚持 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="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>
如您所见,我 [style.background]="{{rep.LeadTimeRemaining}}"
尝试设置列的颜色。
我想这是错误的做法,因为它只是为该列设置它,并且 id 在每一列上都需要相同。
任何人都可以帮助解决这个问题吗?我找不到任何相关信息。
非常感谢
编辑
在每一列上使用以下内容将其突出显示到一个点,但是它非常难看,正如您在下面看到的那样,因为它只是为 div 而不是 td 或 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>
请尝试使用这种方式:
[style]="{'background':rep.LeadTimeRemaining}"
而不是:
[style.background]="{{rep.LeadTimeRemaining}}"
div
周围的白色space是因为primeng数据表应用于父td
的padding
。要填充周围的白色space,可以将父p-column
的padding设置为0
(使用styleClass
),然后将padding
添加到div
在父数据表 td
中(参见下面的示例)。
采用这种方法的主要原因是,如果您只想根据当前行的数据更改某些单元格的背景颜色。如果您想使用这种方法根据其数据更改整行的背景颜色,则必须在每个 p-column
上应用这些样式。如果您打算为整行着色,请参阅
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;
}
模板:
<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>
您可以使用 rowStyleClass 属性突出显示数据中的行table。 您应该将函数传递给此属性。该函数应 return class 将应用于 table 行的名称。
模板:
<p-dataTable [rowStyleClass]="highlightRow" ...>
组件代码:
highlightRow(rowData: any, rowIndex: number) {
return rowData.LeadTimeRemaining + '-highlighting';
}
CSS:
.red-highlighting { background-color: red; }
.white-highlighting { background-color: white; }
.orange-highlighting { background-color: orange; }