如何在AG网格中增加单元格反应标签？ [英] How to increment a cell in AG Grid React tabel?

问题描述

非常新的AG Grid库，并坚持更新单元格。
实际上，我需要用日期来完成这项任务，但为了简单起见，我将用简单的数字来解释我的问题。 我有

1. Start，即1。
   
2. Stop，已定义
3. End
4. 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网格中增加单元格反应标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！