Angular2 PrimeNG 条件行格式

Posted 2023-03-14

【中文标题】Angular2 PrimeNG 条件行格式

【英文标题】：Angular2 PrimeNG Conditional row Formatting

【发布时间】：2017-03-02 02:09:50

【问题描述】：

我有一个使用 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>

【问题讨论】：

你在这方面有什么进展吗？

不幸的是，我只能为文本着色而不是整行

【参考方案1】：

您可以使用 rowStyleClass 属性突出显示数据表中的行。 您应该将函数传递给此属性。该函数应返回将应用于表格行的类名。

模板：

<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; 

【参考方案2】：

div 周围出现空白的原因是因为primeng 数据表应用于父td 的padding。要填充周围的空白，您可以将父级p-column 的填充设置为0（使用styleClass），然后将padding 添加到数据表父级div 内的div 中（参见下面的示例） .

采用这种方法的主要原因是，如果您只想根据当前行的数据更改某些单元格的背景颜色。如果您想使用这种方法根据其数据更改整行的背景颜色，则必须在每个p-column 上应用这些样式。如果您打算为整行着色，请参阅here 了解更简单的方法。

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>

【参考方案3】：

请尝试使用这种方式：

[style]="'background':rep.LeadTimeRemaining"

代替：

[style.background]="rep.LeadTimeRemaining"

【讨论】：

那行不通。我通过在每一列上添加<div [style.background]="rep.LeadTimeRemaining"><span>rep[col.field]</span></div> 来使其工作，但这显然会为 t​​d 内部的 div 着色而不是整个 td 所以我需要一种方法来为 td 制作它，因为仍然存在大量空白，这是难看