如何在页面更改或 ag Grid 中的列排序后保留单元格样式更改

Question

我在 Angular 8 项目中使用 agGrid 社区版。每当有人编辑同一行中的 "Business Rule Description" 列时，我想更改 "Request Number" 列的单元格样式。一切正常，但是当我更改页面或对网格的列进行排序时，单元格样式将应用于整个 "Request Number" 列。

HTML 文件

<ag-grid-angular class="ag-theme-balham" [pagination]="true" [gridOptions]="busRuleGridOptions"
            [rowData]="busRuleRowData" [columnDefs]="busRuleColDef" [paginationPageSize]=10 [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>

TS 文件

export class BusinessRuleComponent implements OnInit {
    busRuleRowData: any[]; 
    busRuleGridOptions: any; 
    private domLayout;

    constructor(private businessRuleCommonService: CommonFunctionService) {       
    }

    ngOnInit() {
        this.domLayout = "autoHeight";        
        this.getAllBusinessRule();       
    }

    onGridReady(params: any) {            
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();                                     
    }

    getAllBusinessRule()
    {
        this.businessRuleCommonService.getEntityData('getallbusinessrules')
            .subscribe((rowData) => this.busRuleRowData = rowData,
                (error) => { alert(error) }); 
    }

    busRuleColDef = [
        {
            headerName: 'Business Rule Description', field: 'BusinessRuleDesc', resizable: true,
            editable: function (params: any) {
                return params.data.IsPublished;
            },            
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '255',
                cols: '20',
                rows: '3'
            },           
            onCellValueChanged: this.busRuleCellValueChanged.bind(this),
        },
        {
            headerName: 'Request Number', field: 'RequestNumber',                                    
        }
    ]

    busRuleCellValueChanged(event: any) {
        this.busRuleGridOptions.columnApi.getColumn("RequestNumber").colDef.cellStyle = { 'background-color': 'lightsalmon' };                                      
        const rowNode = this.busRuleGridOptions.api.getRowNode(event.node.rowIndex);
        event.api.refreshCells({
             force: true, 
             columns:["RequestNumber"],
             rowNodes: [rowNode]        
        });
    }
}

当我编辑第二行时效果很好，如下所示：-

当我更改页面或对列进行排序时出现问题。在这里，我更改了页面，你可以看到以前的单元格样式应用于所有行，即使我没有编辑任何内容：-

请建议我如何在 agGrid 中更改页面或对列进行排序后保留单元格样式更改？如果有更好的方法满足我objective那么也请指教

Answer 1

您应该在该行的数据中保存它的更改。并在 "RequestNumber" 单元格中使用条件样式。

尝试这样的事情：

busRuleColDef = [
  {
    ...
    {
      headerName: 'Request Number',
      field: 'RequestNumber',                                    
      cellStyle: function(params) {
        if (params.data.changed) {
          return { 'background-color': 'lightsalmon' };
        } else {
          return null;
        }
      }
    }
  ]

...

busRuleCellValueChanged(event: any) {
  event.data.changed = true;
}

如何在页面更改或 ag Grid 中的列排序后保留单元格样式更改

How to preserve cellStyle change after page change or column sort in agGrid

celleditingtemplate

typescript

angular

ag-grid-angular