在ng-prime数据表中为动态列更新行时，如何更新行背景色? [英] How update row background colour when row updated in ng-prime datatable for dynamic columns?

问题描述

我要在更新行时更改行颜色.如何在成功更新记录时设置行背景色. .html

I want to change row colour when row updated.how set row background colour when record is updated successfully . .html

<p-dataTable emptyMessage="{{tbldatamsg}}" 
      [value]="dataset" scrollable="true" 
      [style]="{'overflow':'hidden!important'}"  
      [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue" [rows]="20" sortMode="multiple" [(selection)]="selectedRow"
       selectionMode="multiple"
      [resizableColumns]="true" columnResizeMode="expand" 
      [paginator]="true" 
      [globalFilter]="gb" 
      [rowsPerPageOptions]="[10,15,20,25]"
        appendTo="body" #dt>
        <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of cols;let j=index;"
         [style]="{'width':'130px','display':col.display} " 
          [field]="col.field" 
         [header]="col.header"
         [sortable]="true" 
         [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
          appendTo="body">
        </p-column>
   </p-dataTable>

推荐答案

已解决我使用了数据表属性并传递了函数名.

Solved I have used data table attribute and pass function name.

[rowStyleClass] ="lookupRowStyleClass"

[rowStyleClass]="lookupRowStyleClass"

.HTML

<p-dataTable emptyMessage="{{tbldatamsg}}" 
      [value]="dataset" scrollable="true" 
      [style]="{'overflow':'hidden!important'}" 
      [rowStyleClass]="lookupRowStyleClass"     
      [responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue" [rows]="20" sortMode="multiple" [(selection)]="selectedRow"
       selectionMode="multiple"
      [resizableColumns]="true" columnResizeMode="expand" 
      [paginator]="true" 
      [globalFilter]="gb" 
      [rowsPerPageOptions]="[10,15,20,25]"
        appendTo="body" #dt>
        <p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
        <p-column *ngFor="let col of cols;let j=index;"
         [style]="{'width':'130px','display':col.display} " 
          [field]="col.field" 
         [header]="col.header"
         [sortable]="true" 
         [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
          appendTo="body">
        </p-column>
   </p-dataTable>

---

.ts

---

.ts

 /* Function for set css for updated rows */
  lookupRowStyleClass(rowData) {
    return rowData['modified']==='U' ?'ui-widget-updated-row':'ui-widget-NoUpdated-row';
  }

---

.scss

---

.scss

//Updated row
::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-updated-row{
    background-color:$updated-row-color;
} 

这篇关于在ng-prime数据表中为动态列更新行时，如何更新行背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！