Slickgrid - 失去焦点以结束编辑答案

【问题标题】：Slickgrid - Lost focus to end editSlickgrid - 失去焦点以结束编辑
【发布时间】：2013-03-08 19:41:31
【问题描述】：

编辑我的网格时，如果我在网格外单击，我正在编辑的框仍然是可编辑的。如何让已编辑的单元格在失去焦点时“完成”编辑？

【问题讨论】：

【解决方案1】：

以下代码将保存当前编辑。

Slick.GlobalEditorLock.commitCurrentEdit();

您需要将它放在您认为应该触发保存的事件处理程序中。例如，如果您使用的是示例文本编辑器插件，我相信 editor-text CSS 类会添加到您在编辑单元格时创建的输入字段中，因此这样的事情应该可以工作：

$('#myGrid').on('blur', 'input.editor-text', function() {
    Slick.GlobalEditorLock.commitCurrentEdit();
});

【讨论】：

我可能在这里遗漏了一些东西。从理论上讲，这是可行的-因为如果我将其添加到萤火虫控制台中，然后获得焦点并失去焦点，它就可以工作一次。但是在代码中，即使在 document.ready 中，它也不起作用：\
我的错误，该模糊示例不起作用，因为输入字段是动态添加的。您需要使用 on 来绑定事件。我更新了示例，试试吧。
我收到以下错误：TypeError: jQuery(...).on is not a function [Break On This Error] jQuery('#myGrid').on('blur', 'input.editor-text', function() {
您需要使用on 函数将您的jQuery 版本升级到至少1.7。如果您不能这样做，您可以使用委托或直播，请参阅 api.jquery.com/delegate 和 api.jquery.com/live。
这个答案很有帮助。但它似乎引入了一个新问题：调用 commitCurrentEdit 似乎在玩转焦点。如果您尝试在网格中的列之间切换，您会发现这会破坏这一点。像这样的东西： $(document).on("click", function(e) { if (!$(e.target).hasClass("slick-cell")) { Slick.GlobalEditorLock.commitCurrentEdit(); } } );似乎工作得更好一点，但仍然有 2 个问题。 1) 无论您点击什么都不会保持焦点。 2) 在编辑器内点击会破坏编辑器。

【解决方案2】：

我发现我需要在超时中包装 clav 的处理程序：

$("#myGrid").on('blur', 'input.editor-text', function() {

    window.setTimeout(function() {

        if (Slick.GlobalEditorLock.isActive())
            Slick.GlobalEditorLock.commitCurrentEdit();

    });

});

为了避免如下错误：

Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

使用键盘导航时。据推测，新的模糊处理程序会在 SlickGrid 进行自己的处理之前触发，这会导致问题。

【讨论】：

【解决方案3】：

不幸的是，可能由于事件处理的差异，Grame 的版本破坏了 chrome 中的键盘导航。为了解决这个问题，我添加了另一个检查以仅提交编辑，如果新聚焦的元素不是网格中的另一个编辑器元素（作为键盘导航的结果）：

            $('#grid').on('blur.editorFocusLost', 'input.editor-text', function() {
                window.setTimeout(function() {
                    var focusedEditor = $("#grid :focus");
                    if (focusedEditor.length == 0 && Slick.GlobalEditorLock.isActive()) {
                        Slick.GlobalEditorLock.commitCurrentEdit();
                    }
                });
            });

这似乎适用于当前版本的 firefox、chrome 和 ie。

【讨论】：