本文介绍了如何在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" } ];更多推荐
如何在AG网格中增加单元格反应标签?
发布评论