如何在AG网格中增加单元格反应标签？

本文介绍了如何在AG网格中增加单元格反应标签？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 非常新的AG Grid库，并坚持更新单元格。 实际上，我需要用日期来完成这项任务，但为了简单起见，我将用简单的数字来解释我的问题。 我有

Start，即1。

Stop，已定义

End

Duration，已定义

我的目标

• Start=Duration+End
• End=Start+Stop

这是我到目前为止的资料

预期结果

Sandbox Link和下面的代码

import React from "react"; import { AgGridReact } from "ag-grid-react"; import "./styles.css"; import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-alpine.css"; function App() { const start = 1; const [gridApi, setGridApi] = React.useState(null); const [gridColumnApi, setGridColumnApi] = React.useState(null); const columnDefs = [ { headerName: "Name", field: "name" //valueGetter: (params) => console.log(params) }, { headerName: "start", field: "start", valueGetter: (params) => { if (params.node.rowIndex !== 0) { return params.getValue("end") + params.data.duration; } else { return start; } } }, { headerName: "stop", field: "stop" }, { headerName: "end", colId: "end", valueGetter: (params) => { return params.data.start + params.data.stop; } }, { headerName: "duration", field: "duration", colId: "duration" } ]; const rowData = React.useMemo( () => [ { name: "John", stop: 10 }, { name: "David", stop: 15 }, { name: "Dan", stop: 20 } ], [] ); const durationArray = [5, 8, 6]; const rowDataWithStart = React.useMemo(() => { if (durationArray) { return ( rowData && rowData.map((row, i) => ({ ...row, start: start, duration: durationArray[i] })) ); } }, [start, rowData, durationArray]); const defaultColDef = { flex: 1, editable: true }; const onGridReady = (params) => { setGridApi(params.api); setGridColumnApi(params.columnApi); }; return ( <div className="App"> <h1 align="center">React-App</h1> <div className="ag-theme-alpine"> <AgGridReact columnDefs={columnDefs} rowData={rowDataWithStart} defaultColDef={defaultColDef} domLayout={"autoHeight"} onGridReady={onGridReady} ></AgGridReact> </div> </div> ); } export default App;

如有任何帮助我们将不胜感激

推荐答案

可以使用valueGetter。我已经修改了您代码中的valueGetter

const columnDefs = [ { headerName: "Name", field: "name" //valueGetter: (params) => console.log(params) }, { field: "start", valueGetter: ({ data }) => { const end = data.stop + data.start return data.duration + end; } }, { field: "stop" }, { field: "end", valueGetter: ({ data }) => { return data.start + data.stop } }, { headerName: "duration", field: "duration" } ];