如何在角度的 ag-grid 单元格中应用自定义 css 类？

Posted 2023-03-28

【中文标题】如何在角度的 ag-grid 单元格中应用自定义 css 类？

【英文标题】：How to apply custom css class in ag-grid cell in angular?

【发布时间】：2019-06-13 11:03:12

【问题描述】：

根据我的逻辑，我无法在 angular 的 ag-grid 单元格中应用 css。我已将一个对象分配给网格。但是在那个字段上我已经分配了一个 Object.hours 值，我需要根据 Object.status 属性应用逻辑。

使用官方文档，我可以按此处https://www.ag-grid.com/javascript-grid-cell-styles/#cell-style-cell-class-cell-class-rules-params 中提到的当前单元格值应用 css。但我需要根据父 Object.status 应用它

//Object i am using in ag-grid
this.timeSheet = 
 projectName: 'HRMS',
 mon: 
  hoursWorked: 6,
  status: 'Submitted'
 ,
 tue: 
  hoursWorked: 6,
  status: 'Submitted'
 


//Working code
this.columnDefs = [
  headerName: 'Project', field: 'projectName',
  headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: 
     'text-danger': 'x == 6',
];

以上代码正在运行，文本危险类已分配给单个单元格

//I need it to work like that
this.columnDefs = [
   headerName: 'Project', field: 'projectName',
   headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: 
     'text-danger': 'mon.status == `Submitted', 
 ];

在 'text-danger' 中需要帮助：'mon.status == `Submitted' 行它不能像那样工作

【参考方案1】：

cellClassRules 函数采用包含行数据的params 对象。

试试这个使用params对象的代码。

this.columnDefs = [
   headerName: 'Project', field: 'projectName' ,
  
    headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: 
      'text-danger': params => params.data.mon.status == 'Submitted'
    
  ,
];

【讨论】：

每次 onChange 都会调用这个吗？我想在每次单元格值更改和验证时切换类。

@StangSpree 是的，应该。在这里阅读更多 - ag-grid.com/javascript-grid-cell-styles/#refresh-of-styles