1

我正在使用 jQuery 和可编辑插件创建一个内联可编辑表。

到目前为止它运行良好,但只会在按 ENTER 后提交并保存到数据库。我在这里找到了一个线程,它帮助我在框之间切换,但在按下 TAB 时它不提交数据。

我允许我在框之间切换的代码如下:

$('.editScheduleRow').bind('keydown', function(evt) {

    if (evt.keyCode==9) {

        var nextBox='';
        var currentBoxIndex=$(".editScheduleRow").index(this);

        if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
            nextBox=$(".editScheduleRow:first");         //last box, go to first
        } else {
            nextBox=$(".editScheduleRow").eq(currentBoxIndex+1);    //Next box in line
        }

        $(this).find("input").blur();
        $(nextBox).click();  //Go to assigned next box

        return false;           //Suppress normal tab

    };

});

要使用 ENTER 提交,我使用以下命令:

$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {

    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };

    },

});

我还发现了一个带有建议的线程,但它对我不起作用:jEditable submit on TAB 以及 ENTER

如果您需要更多信息,请告诉我。

4

1 回答 1

1

我最初的答案是基于阅读 jQuery Editable 的文档,这是一个 jQuery 扩展,名称相似,但与问题中的 jEditable 不同。让我们用正确的库再试一次。

问题是您在按 Tab 时将焦点从输入框移开,但是当焦点从输入框移开时,它不会保存内容。为了说明这一点,请尝试以下操作:单击其中一个字段并对其进行编辑,然后单击文档上的其他位置。您将在表中看到该值 - 这就是您在元素上使用blur()jQuery 函数模拟的内容。

(再次)有两种方法可以解决这个问题。首先,我们可以修改程序在字段失去焦点时的行为:

    [..]
    "submitdata": function ( value, settings ) {
        return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') 
    };
    "onblur": "submit";
},
[..]

这样做的效果是,在进行我上面描述的实验以帮助您了解它为什么不起作用时,您现在还会看到它被保存了。这可能不是你想要的。在这种情况下,您可以改为确保触发提交而不是模糊:

替换这一行:

    $(this).find("input").blur();

通过这个:

    $(this).find("form").submit();

现在实验将不再导致值发生变化,但它不再是对我们正在做的事情的准确模拟,当按下 Tab 时,值将被更改。

于 2012-11-01T13:47:49.643 回答