如何设置Tabulator：编辑单元格按Enter后跳转至下一个可编辑单元格

要实现编辑单元格后按Enter键像Tab键一样跳转到下一个可编辑单元格，只需通过Tabulator的自定义键盘绑定功能即可完成，具体配置步骤如下：

1. 自定义Enter键的键盘绑定 #

在表格初始化时，通过keybindingsCustom选项添加Enter键的处理逻辑，核心是获取当前编辑单元格、结束编辑后跳转至下一个可编辑单元格：

var table = new Tabulator("#your-table-id", {
    columns: [
        { title: "可编辑列", field: "editCol", editor: "input", editable: true }, // 仅第一列可编辑
        { title: "普通列1", field: "col1", editable: false },
        { title: "普通列2", field: "col2", editable: false },
        // 其他列配置...
    ],
    keybindings: true, // 启用默认方向键等快捷键
    keybindingsCustom: {
        // 监听Enter键事件
        "enter": function(e, table) {
            // 获取当前处于活跃状态的单元格
            const activeCell = table.getActiveCell();
            
            // 仅在单元格可编辑时执行跳转逻辑
            if (activeCell && activeCell.isEditable()) {
                // 结束当前单元格的编辑状态
                activeCell.edit(false);
                // 获取下一个可编辑的单元格
                const nextEditableCell = activeCell.getNextEditable();
                
                // 如果存在下一个可编辑单元格，激活并进入编辑状态
                if (nextEditableCell) {
                    nextEditableCell.edit(true);
                }
            }
        }
    },
    // 其他表格配置项...
});

关键逻辑说明 #

• keybindingsCustom：Tabulator提供的自定义键盘绑定接口，可覆盖或扩展默认快捷键行为。
• getActiveCell()：获取当前被选中/编辑的单元格实例。
• isEditable()：判断当前单元格是否允许编辑，确保仅处理目标列的单元格。
• getNextEditable()：Tabulator内置方法，自动查找当前单元格之后的下一个可编辑单元格（会自动跨行跳转，符合Tab键的默认行为）。
• edit(true/false)：控制单元格的编辑状态，false结束编辑，true进入编辑状态。

内容的提问来源于stack exchange，提问作者ericalderman