AG Grid React：更改顺序后如何获取行的状态？

Question

在 AG Grid table 上实施 drag and drop 功能后，我正在寻找一种方法来获取具有更新的 order/index 行的当前状态。
我的目标是在更改订单后持久化 table 数据，但找不到当前订单的相应状态。我将不胜感激任何帮助或任何想法。
Sandbox demo 和下面的示例代码

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: "Name",
      field: "name",
      rowDrag: true
    },
    { 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
      }
    ],
    []
  );

  return (
    <div>
      <h1 align="center">React-App</h1>
      <div>
        <div className="ag-theme-alpine" style={{ height: "700px" }}>
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
            rowDragManaged={true}
          ></AgGridReact>
        </div>
      </div>
    </div>
  );
}

export default App;

Answer 1

您当前正在通过传递 rowManagedDragging={true} 使用托管拖动，这意味着 AgGridReact 组件正在管理行顺序状态。

如果要在组件外保持行序状态，需要使用Unmanaged Dragging.

为 onRowDragMove 添加处理程序，并使用事件的 node 和 overIndex 或 overNode 属性更新您的本地事件顺序状态，并将其传递到 AgGridReact 组件到 re-render.

Take a look at this example from the docs

Answer 2

您可以通过使用网格 API 方法遍历它们来获取网格内行的顺序 forEachNode:

API for Row Nodes

const rows = [];
gridApi.forEachNodeAfterFilterAndSort((node) => rows.push(node.data));
console.log(rows);

查看 following sample 中的实现。

AG Grid React：更改顺序后如何获取行的状态？

AG Grid React: How to get the state of rows after changing the order?

javascript

reactjs

ag-grid

ag-grid-react