编辑单元格时按回车键，移动到下一个单元格进行编辑

Question

使用制表符，如何设置它，以便当用户在编辑单元格的值后按 Enter 时，它会移动到下一个单元格（如 Tab）。我有一个表，其中只有第一列设置为可编辑。我已启用键绑定，因此我可以使用箭头键。

Answer 1

一种方法是使用自定义编辑器并将事件侦听器绑定到输入，以便当用户按下 Enter 键时，焦点通过调用

table.navigateNext()

移动到下一个可编辑单元格。这是一个仅第一列可编辑的示例：

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]

function customEditor(cell, onRendered, success, cancel) {
  const input = document.createElement('input')
  input.value = cell.getValue()

  onRendered(() => {
    input.focus()
  })

  function onChange() {
    if (input.value != cell.getValue()) {
      success(input.value)
    } else {
      cancel()
    }
  }

  input.addEventListener('blur', onChange)

  input.addEventListener('keydown', (e) => {
    if (e.keyCode == 13) {
      table.navigateNext()

      onChange()
    }

    if (e.keyCode == 27) {
      cancel()
    }
  })

  return input
}

const table = new Tabulator('#table', {
  data: data,
  columns: [
    { title: 'Name', field: 'name', editor: customEditor },
    { title: 'Age', field: 'age' },
    { title: 'Gender', field: 'gender' },
    { title: 'Height', field: 'height' },
    { title: 'Color', field: 'col' }
  ]
})

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

<div id="table"></div>