Реагируйте на Ag-сетку после того, как вы нажмете ENTER в редактировании ячейки, переместите курсор вниз к следующей строке (например, Excel)

Я хочу, чтобы курсор перемещался вниз к следующей строке после завершения редактирования и нажатия клавиши ВВОД, как это происходит в 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 для того же кода: https://plnkr.co/edit/Qmzz0tMQtWrDFTtH

Как переместить курсор на следующую строку, когда редактирование завершено, нажав клавишу ВВОД


reactjs ag-grid-react ag-grid
person dracarys    schedule 26.04.2021    source источник
comment
Не то же самое, но, может быть, это могло бы помочь? stackoverflow.com/questions/46608047/ Также взгляните на эти документы. ag-grid.com/javascript-grid/cell -editing/#enter-key-down   -  person CITIZENDOT    schedule 26.04.2021
comment
@AppajiChintimi Вторая ссылка, которую вы мне прислали, идеальна и именно то решение, которое я искал. Вы хотите написать ответ, чтобы я мог проголосовать за него и отметить как ответ?   -  person dracarys    schedule 26.04.2021
comment
Вы можете сами написать свой подход и отметить его. Я не смотрел глубже в этом. Может быть, это помогает некоторым другим. :)   -  person CITIZENDOT    schedule 26.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

Ag-grid добавил эту функцию, как можно увидеть по этой ссылке: https://www.ag-grid.com/javascript-grid/cell-editing/#enter-key-navigation

Для следующего свойства необходимо установить значение true в сетке enterMovesDown и enterMovesDownAfterEdit.

Рабочий код:

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>
  );
};

Ссылка на рабочий плункер: https://plnkr.co/edit/y2rgFQc1cc5dzOdq

person dracarys    schedule 26.04.2021