如何在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"
}
];
相关文章