Как я могу * предсказуемо * пометить измененные ячейки в AG-Grid React? - PullRequest
Новая
       116

Как я могу * предсказуемо * пометить измененные ячейки в AG-Grid React?

0 голосов
/ 27 марта 2020

У меня есть функциональный компонент в 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>
  )
}

Проблема в том, что он работает, но только на втором go. И это также работает, если ячейка в этом столбце уже была отредактирована.

Это не конечная позиция, в которой я хочу находиться, так как я хочу сравнить данные с предоставленными исходными строками, а не только с последнее значение изменилось в ячейке. Я просто подумал, что лучше начинать с малого и строить; -)

Может кто-нибудь объяснить это поведение и сообщить мне, где я иду не так?

1 Ответ

0 голосов
/ 02 апреля 2020

Я использую ag-grid в Angular, а не React, но мне кажется, что вам не следует изменять cellStyle columnDef, поскольку должно применяться ко всему столбцу.

Если вы хотите изменить стиль только для одной ячейки, 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 -класс-правила

...