angular - 如何在agGrid中的页面更改或列排序后保留cellStyle更改

Question

我在 Angular 8 项目中使用 agGrid 社区版本。每当有人在同一行中编辑“业务规则描述”列时，我想更改“请求编号”列的单元格样式。一切正常，但是当我更改页面或对网格的列进行排序时，单元格样式将应用于整个“请求编号”列。

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 中的排序列后保留单元格样式更改？如果有更好的方法来实现我的目标，那么也请提出建议。

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