Question

我正在尝试创建一个网格，其中一些值可以由用户通过编辑单元格来更新，并且rowData可以由应用程序从外部更改。我正在尝试获取一个事件，该事件使我可以跟踪单元格中的所有更改，因此，在每次单元格更改（或行更改）时，我都想发送一个http请求。我尝试使用onCellValueChanged，但只有在用户编辑单元格时才会被触发。 onRowDataChanged似乎没有被触发，onModelUpdated被触发了，但是它没有任何有意义的信息，例如已更改的行/单元格。我没有粘贴整个代码，但是有一个函数每5秒用新值更新rowData。据我了解，每当api.setRowData(param)更改时，都会有一个反应渲染器调用refresh和rowData。有没有一种方法可以在每次更新时调用回调，无论是用户编辑还是数据随信息实际更改了什么？ agAnimateShowChangeCellRenderer在为差异显示动画方面已经做得很好，所以我想了解一下同一事件

const columnTypes = {
       textColumn: {
         editable: true
        },
        valueColumn: {
            editable: true,
            valueParser: (params: { newValue: any }) => Number(params.newValue),
            cellClass: 'number-cell',
            cellRenderer: 'agAnimateShowChangeCellRenderer',
            filter: 'agNumberColumnFilter',
        }
    };

const [data, setData] = useState([] as Array<typeof formData.model>);
    const [logs, setLogs] = useState([] as Array<{ oldValue: string, newValue: string, column: string }>);

    useEffect(() => {
        setData([props.formData.model].map((y, i) => ({ ...y, id: i })));
    }, [props.formData])

           <AgGrid
                onGridReady={onGridReady}
                width="100%"
                stopEditingWhenGridLosesFocus
                rowData={data}
                defaultColDef={defaultColDef}
                onCellValueChanged={(params: any) => {
                    setLogs([...logs, { oldValue: params.oldValue, newValue: params.newValue, column: params.colDef.field }])
                }}
                onRowDataChanged ={(params: any) => {
                    console.log(`Changed Values = ${params}`);
                }}
                onModelUpdated={(params: any) =>{
                    console.log("MODEL "+ params);
                }}
                columnDefs={[
                    {
                        headerName: 'Instrument',
                        children: [
                            { headerName: 'Instrument Type', field: 'instrument.instrumentType', ...columnTypes.textColumn },
                            { headerName: 'Price', field: 'market.price', ...columnTypes.valueColumn },
                        ]
                    }
                ]}
                deltaRowDataMode
                getRowNodeId={(d: any) => d.id}
            />

Ag Grid单元格值因更改检测事件而更改

0 个答案: