在制表器中选择但不立即编辑单元格

Question

我正在尝试在Tabulator中设置一个可编辑的网格，在该网格中，我想单击一个单元格以将其选中，然后使用箭头键在该网格中移动。

然后，如果按了Enter之类的键，则可以编辑该值。

我似乎无法禁用的当前行为是，当您单击可编辑单元格时，它将立即打开编辑器。根据编辑器的类型，箭头键可能会移动到相邻的单元格，或者它们可能仅与编辑器进行交互（例如，对于选择编辑器，上下键仅在选项列表中上下移动）。如果我在单元格中按Esc键，则编辑将按预期停止，但未以任何方式选择该单元格，因此无法移动到相邻的单元格。

表的一个非常简单的设置是，

{
  data: gridData,
  layout: "fitColumns", 
  columns: [
    { title: 'Name', width: 100, field: 'name', editor: 'input', },
    { title: 'Age', width: 60, field: 'age', editor: 'number', },
    { title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: { 
        values: ['red', 'green', 'blue']} 
    },
    { title: 'Progress', width: 80, field: 'progress', editor: 'number', },
  ],
  pagination: "local",
  paginationSize: 25,
  paginationSizeSelector: true,
}

Answer 1

您可以使用以下代码在制表器表格中导航：

keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},

此外，您可以双击列内声明以更改数据。

{title:"Name", field:"name", cellDblClick:function(e, cell){
    //e - the click event object
    //cell - cell component
    },
}

为了避免一键输入数据，只需将相应的回调留空。

也请查看以下有用的文档：Tabulator Key Bindings和Tabulator Click events