如何在 table 中创建新行时设置新的索引序列？

Question

在下面的示例中，我创建了一个新的 table，其中包含一个名为 label 的自定义列，从字面上看，它是 gridRow 对象数组的索引。

我在尝试创建插入到最后一个元素之前的新行时遇到问题（在我的例子中是最后一个 object 之前）。

然后出现了没有进入 label/index 顺序的问题。

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
  const [gridApi, setGridApi] = React.useState(null);
  const [gridColumnApi, setGridColumnApi] = React.useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  };

  const defaultColDef = {
    flex: 1,
    editable: true
  };

  const columnDefs = [
    {
      headerName: "label",
      field: "label"
    },
    {
      headerName: "Name",
      field: "name"
    },
    { headerName: "stop", field: "stop" },
    {
      headerName: "duration",
      field: "duration"
    }
  ];
  const rowData = React.useMemo(
    () => [
      {
        name: "John",
        stop: 10,
        duration: 5
      },
      {
        name: "David",
        stop: 15,
        duration: 8
      },
      {
        name: "Dan",
        stop: 20,
        duration: 6
      }
    ],
    []
  );

  const rowDataWithIndex = React.useMemo(() => {
    return (
      rowData &&
      rowData.map((row, index) => ({
        ...row,
        label: index
      }))
    );
  }, [rowData]);

  const addNewRow = () => {
    gridApi.applyTransaction({
      add: [{ label: rowDataWithIndex[rowDataWithIndex.length - 2].label + 1 }],
      addIndex: rowDataWithIndex.length - 1
    });
  };

  return (
    <div>
      <h1 align="center">React-App</h1>
      <div>
        <button onClick={addNewRow}>New Row</button>
        <div className="ag-theme-alpine">
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowDataWithIndex}
            defaultColDef={defaultColDef}
            domLayout={"autoHeight"}
            onGridReady={onGridReady}
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
}

export default App;

任何帮助将不胜感激

Answer 1

我想指出，以下答案可能不是适合您的用例的最佳方法，这将取决于您的要求和您想要实现的目标。

我可以看到 rowData 被传递给 rowDataWithIndex 以添加标签，并且它们都被记忆了。这里的问题是调用 gridApi.applyTransaction() 将更新网格内的数据，但它不会更改 rowData 变量（由于 [] 依赖性，它只计算一次）因此 memoised 回调将不会重新计算。

所以为了解决这个问题，我将 rowData 改为状态变量并添加新行，我调用 setRowData():

  const addNewRow = () => {
    setRowData([
      ...rowData,
      { label: rowDataWithIndex[rowDataWithIndex.length - 1].label + 1 }
    ]);
  };

这将确保重新计算 rowDataWithIndex。

查看下面的实现 codesanbox

如何在 table 中创建新行时设置新的索引序列？

How to set new Sequence of the index while creating a new row in a table?

reactjs

ag-grid

ag-grid-react