使用返回/输入键将编辑的单元格保存在 Primefaces 3.4 单元内可编辑数据表中答案

【问题标题】：Using return/enter key to save edited cell in Primefaces 3.4 in-cell editable datatable使用返回/输入键将编辑的单元格保存在 Primefaces 3.4 单元内可编辑数据表中
【发布时间】：2012-10-28 13:00:30
【问题描述】：

正如标题所说，我不想在切换到编辑模式后单击“保存”按钮，而是希望在按下回车键时具有相同的功能。

我尝试使用 p:hotkey 执行此操作，但显然 p:hotkey 不适用于具有焦点的可编辑组件。

除了深入研究 JQuery 之外，还有其他方法吗？

【问题讨论】：

标签： jquery jsf primefaces

【解决方案1】：

除了深入研究 JQuery 之外，还有其他方法吗？

是的，使用普通的 JS。但这最终可能会导致非跨浏览器兼容的样板代码。不开玩笑，不，这是不可能通过 JSF 实现的，因为魔术确实需要在客户端发生。由于<p:cellEditor> 不支持请求的功能（否则它只能自己生成必要的jQuery 代码），您需要自己编写。

去过那里，做到了：

$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
    if (event.keyCode == 13) {
        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
    }
});

只要把它放在一些全局的 JS 文件中。这涵盖了单元格编辑器中的所有输入字段。

【讨论】：

我有一个问题。在同一个数据表中，我有单元格编辑器，还有一个命令按钮来删除记录。如果我单击按钮进行编辑并按回车键，则它正在执行删除操作而不是编辑。我怎样才能让它执行编辑而不是删除？
@Erick 这可能会执行“编辑”，然后执行“删除”，因为有两个处理程序用于按下Enterkey。尝试将“return false”添加到第一个处理程序。这将阻止执行链中的其他事件处理程序。另请参阅my answer。

【解决方案2】：

BalusC code 的略微修改版本（另见PrimeFaces issue 433）：

防止在单击“Enter”时向表格中添加新行
点击“Escape”取消编辑

$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
    if (event.keyCode == 13) { // Enter
        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
        return false; // prevents executing other event handlers (adding new row to the table)
    }
    if (event.keyCode == 27) { // Escape
        $(this).closest("tr").find(".ui-row-editor .ui-icon-close").click();
        return false;
    }
});

【讨论】：