首页 / JAVASCRIPT / javascript-使用Ag Grid动态更改单元格颜色

javascript-使用Ag Grid动态更改单元格颜色

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-使用Ag Grid动态更改单元格颜色，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2460字，纯文字阅读大概需要4分钟。

内容图文

我们正在尝试动态更改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';

  }
}

如果将log语句放在颜色块中,我可以看到它在应为蓝色的地方为蓝色,在应为红色的地方为红色.但是,它只注销一次为绿色,但是该列中的所有行现在都是绿色！如果我删除绿色的返回,所有行都是白色背景-没有颜色.
更改cellStyle之后,我尝试过此操作以防需要刷新：

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

但它返回以下错误：

错误：ag-grid：当网格位于图形行的中间时,无法使网格绘制行.当网格处于渲染阶段时,您的代码可能称为网格API方法.为了解决这个问题,请将API调用设置为超时

我尝试了建议的超时时间,但是似乎没有用.

我本来以为在我返回颜色的地方返回颜色是可以的,就像绿色一样……但是我想不是.

有人有什么想法吗？

我创建了一个Stackblitz来尝试展示我的意图.我很想让我的数据显示出来,所以我只是分叉了另一个项目…但是它仍然显示了我正在尝试做的事情.在这种情况下,我希望哥伦比亚显示为蓝色-其他所有显示为红色.但是,它似乎遍历哥伦比亚每一行,但仍未将其设置为蓝色.

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

解决方法:

可行的解决方案在问题中的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'};
   }

}

内容总结

以上是互联网集市为您收集整理的javascript-使用Ag Grid动态更改单元格颜色全部内容，希望文章能够帮你解决javascript-使用Ag Grid动态更改单元格颜色所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/689527.html

来源：【匿名】