【问题标题】:Styling ag-grid cell based on condition when cell value is changed更改单元格值时根据条件设置 ag-grid 单元格样式
【发布时间】:2023-03-18 03:01:01
【问题描述】:

我想对单元格应用 css 样式,前提是在编辑单元格后 oldValue 和 newValue 不同。所以,我在 onCellValueChanged() 处理程序中做了以下操作,

 onCellValueChanged: function(params) {
    if (params.oldValue !== params.newValue) {
       params.colDef.cellStyle = function(params) {
         return {
          backgroundColor: 'green'
        };
      }
      params.api.redrawRows();
   }
}

但这会在满足条件时将 css 更改应用于该特定列的所有单元格。我不确定如何仅将“cellStyle”应用于受影响的单元格。

更新 1: 我把它改成下面,它开始工作了,

onCellValueChanged: function(params) {
console.log(params);
 var cellValue = params.data[params.colDef.field];
if (params.oldValue !== params.newValue) {
    params.colDef.cellStyle = function(params) {
      if(params.value==cellValue){
        return {
          backgroundColor: 'green'
        };
      }
    }
  params.api.redrawRows();
}
}

我现在面临的问题是,当我在同一列下编辑任何其他单元格时,单元格样式(在这种情况下背景变为绿色)丢失了。 Demo

【问题讨论】:

标签: javascript css ag-grid


【解决方案1】:

这个问题现在已经解决了,这是正常的demo

function cellValueChangedListener(params) {
  var oldValue = params.oldValue;
  var newValue = params.newValue;

  var recordKey = params.data.key;
  var columnField = params.colDef.field;

  if (!_.isEqual(oldValue, newValue)) {
    if (!cellMetadata[recordKey]) {
      cellMetadata[recordKey] = {};
  }
  if (!cellMetadata[recordKey][columnField]) {
    cellMetadata[recordKey][columnField] = {};
  }

  cellMetadata[recordKey][columnField].trackChanges = true;
  cellMetadata[recordKey][columnField].tooltip = 
  columnField.toUpperCase() + ' ' + 'Changed from' + ' ' + oldValue + ' ' 
+ 'to' + ' ' + newValue;
  }

  params.api.redrawRows();
}

【讨论】:

    猜你喜欢
    • 2020-09-25
    • 1970-01-01
    • 1970-01-01
    • 2020-10-11
    • 1970-01-01
    • 1970-01-01
    • 2022-09-29
    • 1970-01-01
    • 2021-05-21
    相关资源
    最近更新 更多