如何在 AG-Grid React 中*可预测地*标记更改的单元格？

Question

我在 React 中有一个使用 AG-grid 组件的功能组件，大致如下所示：

import React, { useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'

export default function FormEditor(props) {

  .... code for fetching data etc. goes here ...

  // create ref to be able to call ag-grid.api on our spreadsheet
  const editFormRef = useRef()

  // can we log the row data to the console? Yes!
  function logData() {
    if (!editFormRef.current.api) {
      return
    }
    const rowCount = editFormRef.current.api.getDisplayedRowCount()
    for (let i = 0; i < rowCount; i++) {
      const rowNode = editFormRef.current.api.getDisplayedRowAtIndex(i)
      console.log(`row ${i + 1} -> `, rowNode.data)
      // Perform your logic
    }
  }

  // will the data that's changed be highlighted? Maybe, on the second go...
  function markCellChanged(params) {
    if (!editFormRef.current.api) {
      return
    }
    const row = editFormRef.current.api.getDisplayedRowAtIndex(params.rowIndex)
    console.log('markCellChanged() called ')
    if (params.oldValue !== params.newValue) {
      params.colDef.cellStyle = function(params) {
        return { backgroundColor: '#6fcc44', transparency: 0.5 }
      }
      console.log('Redrawing row ', row)
      editFormRef.current.api.redrawRows({ rowNodes: [row] })
    }
  }

  return (
    <React.Fragment>
      <AgGridReact
        ref={editFormRef}
        rowSelection="multiple"
        columnDefs={columns}
        rowData={rows}
        rowDragManaged={true}
        components={{ editCellEditor: ReviewCellEditor }}
        // editType="fullRow"
        enableFillHandle={true}
      />
      <Button variant="contained" onClick={() => logData()}>
        Log Data
      </Button>
    </React.Fragment>
  )
}

问题是它确实有效，但仅限于第二次。 如果该列中的单元格已经被编辑，它也可以工作。

这不是我想要的最终位置，因为我想根据提供的原始行检查数据，而不仅仅是单元格中更改的最后一个值。 我只是认为最好从小处着手，然后构建 ;-)

谁能解释这种行为，让我知道我哪里出错了？

Answer 1

我在 Angular 中使用 ag-grid，而不是 React，但在我看来，您不应该更改 columnDef 的 cellStyle，因为这应该适用于整个列。

如果您只想更改一个单元格的样式，AFAIK，正确的方法是为 colDef.cellClassRules 提供一个函数字典。 键是 css 类名，值是函数，它们接受一个单元格值并返回一个布尔值，指示该类是否应该应用于该单元格，如下所示：

cellClassRules: {
    // apply green to 2008
    'rag-green-outer': function(params) { return params.value === 2008},
    // apply amber 2004
    'rag-amber-outer': function(params) { return params.value === 2004},
    // apply red to 2000
    'rag-red-outer': function(params) { return params.value === 2000}
}

请参阅https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class-rules 上的文档