[英]How can I *predictably* mark changed cells in AG-Grid React?
I have a functional component in React that uses the AG-grid component, that looks roughly like this:我在 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>
)
}
The issue is that it does work, but only on the second go.问题是它确实有效,但仅限于第二次。 And it also works, if a cell in that column has already been edited.
如果该列中的单元格已经被编辑,它也可以工作。
This is not the final position I want to be in, as I want to check the data against the original rows supplied, not just the last value changed in a cell.这不是我想要的最终位置,因为我想根据提供的原始行检查数据,而不仅仅是单元格中更改的最后一个值。 I just thought it was best to start small, and build ;-)
我只是认为最好从小处着手,然后构建 ;-)
Can anyone explain this behaviour, and let me know where I'm going wrong?谁能解释这种行为,让我知道我哪里出错了?
I use ag-grid in Angular, not React, but it seems to me that you shouldn't be changing the columnDef's cellStyle, as that should apply to the entire column.我在 Angular 中使用 ag-grid,而不是 React,但在我看来,您不应该更改 columnDef 的 cellStyle,因为这应该适用于整个列。
If you want to change the style just for the one cell, AFAIK, the proper way to do it is to provide a dictionary of functions for colDef.cellClassRules.如果您只想更改一个单元格的样式,AFAIK,正确的方法是为 colDef.cellClassRules 提供一个函数字典。 The keys are css class names, and the values are functions that take a cell value and return a boolean indicating whether the class should be applied to the cell, as in:
键是 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}
}
See the documentation at https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class-rules请参阅https://www.ag-grid.com/javascript-grid-cell-styles/#cell-class-rules 上的文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.