Ag Grid对细胞颜色的动态变化 [英] Dynamic change of cell color with Ag Grid

问题描述

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

We are trying to dynamically change the cell color of a column in Ag Grid. Here is the code. I didn't include the code that pulls the data from the database since that works just fine.

HTML（定义网格）：

HTML (to define the grid):

<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 和红色应该是红色。但是，它只注销一次绿色，但该列中的所有行现在都是绿色！如果我删除了返回绿色所有行都是白色背景 - 没有颜色。
在cellStyle更改之后我试过了需要刷新的情况：

If I put log statements in the color block I can see it hit blue where it should be blue and red where it should be red. However, it only logs out once for green but all rows in that column are now green! If I remove the return of green all rows are white background - no color. After the cellStyle change I tried this in case it needed to be refreshed:

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

但它返回了以下错误：

错误：ag-grid：当绘图行处于中间时，无法获取网格绘制行。当网格处于渲染阶段时，您的代码可能称为网格API方法。为了解决这个问题，将API调用置于超时状态

我尝试了它建议的超时但这似乎没有用。

I tried the timeout it suggested but that didn't seem to work.

我会想到返回我返回的颜色会有效，就像 green 那样...但是我猜不是。

I would have thought returning the colors where I return them would have worked, like it does for green... but I guess not.

任何人都有任何想法吗？

Anyone have any thoughts?

我创建了一个Stackblitz来尝试显示我的内容我想做。我想把我的数据显示出来，所以我只是分叉了另一个项目......但它仍然显示了我想要做的事情。在这种情况下，我希望哥伦比亚以蓝色显示 - 其他一切都是红色的。但是，似乎每行都会循环哥伦比亚，但仍然没有将其设置为 blue 。

I have created a Stackblitz to try and show what I am trying to do. I coudnt get my data to show up so I just forked another project...but it still shows what I am trying to do. In this case, I want Colombia to show up in blue - everything else red. However, it appears to loop through Colombia for every row and still doesnt set it to blue.

https：// stackblitz。 com / edit / ag-grid-template-renderer-example-3anbbx

推荐答案

工作解决方案在Stackblitz在问题但这里是做了什么。我没有循环遍历网格中的行并尝试抓住我认为需要的东西，而是使用了从网格本身进入的参数。

The working solution is in the Stackblitz in the question but here is what did it. Instead of looping through the rows in the grid and trying to grab what I thought I needed, I just used the params coming in from the grid itself.

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

}

这篇关于Ag Grid对细胞颜色的动态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！