使用 Ag Grid 动态改变单元格颜色

Posted 2023-03-28

【中文标题】使用 Ag Grid 动态改变单元格颜色

【英文标题】：Dynamic change of cell color with Ag Grid

【发布时间】：2019-08-04 09:08:01

【问题描述】：

我们正在尝试动态更改 Ag Grid 中列的单元格颜色。这是代码。我没有包含从数据库中提取数据的代码，因为它工作得很好。

html（定义网格）：

<ag-grid-angular
   #eventsGrid2
   style="width: 1200px; height:300px;"
   class="ag-theme-balham"
   [rowData]="myEventsGrid"
   [columnDefs]="eventsCols"
   (gridReady)="onGridReady($event)">
</ag-grid-angular>

JS：

export class DataVis 
  @ViewChild('eventsGrid2') eventsGridComponent2: agGridNg2;
  selectedRows = [];
  eventsCols = [
    headerName: '', field: 'colorId', colId: 'colorId',
    headerName: 'Id', field: 'id',
    headerName: 'File Id', cellClass: this.setColor.bind(this), field: 'fileId'
  ]

  setColor(params) 
    this.selectedRows = [];
    this.eventsGridComponent2.api.forEachNode(node => this.selectedRows.push(node.data));
    console.log("SelectedRows:"+JSON.stringify(this.selectedRows));
    //I can see that it printed out the rows that show up in the grid
    this.selectedRows.forEach(function(element) 
      if(element.fileId == "1") 
         //trying to set the cellStyle in case that would work
         element.cellStyle = 'blue';
         //returning color to calling function
         return 'blue';
       else 
         return 'red';
      
      return 'green';

  

如果我将日志语句放在颜色块中，我可以看到它在应该是blue 的地方变成蓝色，在应该是red 的地方变成红色。但是，它只为绿色注销一次，但该列中的所有行现在都是green！如果我删除 green 的返回所有行都是白色背景 - 没有颜色。 在 cellStyle 更改后，我尝试了这个以防它需要刷新：

element.cellStyle = 'blue';
this.eventsGridComponent2.api.redrawRows();

但是它返回了以下错误：

Error: ag-grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout

我尝试了它建议的超时，但这似乎不起作用。

我原以为返回颜色会起作用，就像 green... 但我猜不是。

有人有什么想法吗？

我创建了一个 Stackblitz 来尝试展示我正在尝试做的事情。我无法显示我的数据，所以我只是分叉了另一个项目……但它仍然显示了我正在尝试做的事情。在这种情况下，我希望 Colombia 出现在 blue 中 - 其他所有内容都是红色的。但是，它似乎为每一行循环遍历Colombia，但仍未将其设置为blue。

https://stackblitz.com/edit/ag-grid-template-renderer-example-3anbbx

【问题讨论】：

你能用提供的代码提供一个stackblitz吗？

cellClass 添加新类但不删除旧类。这可能会导致奇怪的行为。尝试改用“cellClassRules”。 ag-grid.com/javascript-grid-cell-styles

您正在绑定cellClass 函数并尝试使用多个单元格进行操作，但您只需要关心使用过的一个。顺便说一句，没有完全得到你想要实现的目标，通过选择单元格或行来动态改变颜色？是的，如果您将通过 stackblits 或 plinkr 提供完整的代码库，它将帮助每个人帮助您。

你们太棒了！我以前从未创建过 Stackblitz ......但在这样做之后，它让我能够进行更改和测试事情，这比在我当前的项目中重建要容易得多。正因为如此，我才能解决问题！它包含在上面的 Stackblitz 中......但我将在下面发布解决方案。再次感谢！！

【参考方案1】：

工作解决方案在问题的 Stackblitz 中，但这就是它的作用。我没有遍历网格中的行并尝试获取我认为需要的内容，而是使用了来自网格本身的参数。

ColDefs：

 ngAfterViewInit(): void 
    this.gridOptions.api.setColumnDefs([
      headerName: '', field: 'colorId', colId: 'colorId', checkboxSelection: true, cellStyle: this.cellStyling,

功能：

cellStyling(params:any)   
   if (params.data.country == 'Colombia') 
     return 'background-color': 'blue';
     else 
         return 'background-color': 'green';
   

【讨论】：

有没有办法在每次击键后更新 columnDef / 访问 api 来更新 cellStyling？