在单元格编辑中按 ENTER 后反应 Ag-grid，将光标向下移动到下一行（如 Excel）

Question

我希望光标在编辑完成并按下 ENTER 后向下移动到下一行，就像 Excel 中发生的那样。

基本网格的代码如下

import React, { useState } from "react";
import { render } from "react-dom";
import { AgGridColumn, AgGridReact } from "ag-grid-react";

import "ag-grid-enterprise";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";

const App = () => {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const [rowData, setRowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 },
  ]);

  function onGridReady(params) {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  }

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact onGridReady={onGridReady} rowData={rowData}>
        <AgGridColumn field="make" editable={true} />
        <AgGridColumn field="model" editable={true} />
        <AgGridColumn field="price" editable={true} />
      </AgGridReact>
    </div>
  );
};

我还为相同的代码附加了一个 Plunker link： https://plnkr.co/edit/Qmzz0tMQtWrDFTtH

如何在按 ENTER 完成编辑后将光标移动到下一行

Answer 1

Ag-grid 添加了这个功能，可以在这个 link 看到：https://www.ag-grid.com/javascript-grid/cell-editing/#enter-key-navigation

下面的属性需要在GridenterMovesDown和enterMovesDownAfterEdit

上设置为true

工作代码：

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const App = () => {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);

  const [rowData, setRowData] = useState([
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
  ]);

  function onGridReady(params) {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);
  }

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        onGridReady={onGridReady}
        rowData={rowData}
        enterMovesDown={true}
        enterMovesDownAfterEdit={true}
      >
        <AgGridColumn field="make" editable={true} />
        <AgGridColumn field="model" editable={true} />
        <AgGridColumn field="price" editable={true} />
      </AgGridReact>
    </div>
  );
};

工作的 Plunker link：https://plnkr.co/edit/y2rgFQc1cc5dzOdq

在单元格编辑中按 ENTER 后反应 Ag-grid，将光标向下移动到下一行（如 Excel）

React Ag-grid after you press ENTER in cell edit, move cursor down to next row (like Excel)

reactjs

ag-grid

ag-grid-react