限制用户在 jqgrid 中选择下一行

Question

我在我的项目中使用 jqgrid。我要求当用户选择行并单击内联工具栏控件的编辑按钮和修改单元格中的任何数据之后，而不是单击内联工具栏控件用户的保存按钮当时单击（选择）任何其他行。我想显示用户消息，例如

想要保存/丢弃修改过的数据

如果用户点击消息对话框的保存按钮然后保存数据，否则丢弃数据。所以请告诉我如何实现它。直到用户不点击保存或丢弃按钮不要选择用户点击的下一行。

Answer 1

首先你应该使用inlineNav 的restoreAfterSelect: false 选项（如果你使用inlineNav）。您可以使用beforeSelectRow 来实现所需行为并调用saveRow 或restoreRow 的秒数取决于用户的选择。

beforeSelectRow 的最简单实现如下：

beforeSelectRow: function (rowid) {
    var $self = $(this),
        savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
        editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
            null : savedRowInfos[0].id;

    if (editingRowId != null && editingRowId !== rowid) {
        if (confirm("Do you want to save the changes?")) {
            $self.jqGrid("saveRow", editingRowId);
        } else {
            $self.jqGrid("restoreRow", editingRowId);
        }
    }
}

我使用了上面的confirm 方法。您可以在the demo 上查看工作代码。

例如，也可以使用 jQuery UI 对话框创建 异步 对话框。那么beforeSelectRow的代码可能如下：

beforeSelectRow: function (rowid) {
    var $self = $(this),
        savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
        editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
            null : savedRowInfos[0].id;

    if (editingRowId == null || editingRowId === rowid) {
        return true; // allow selection
    }

    $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 650,
        modal: true,
        buttons: {
            "Save the changes": function () {
                $(this).dialog("close");
                $self.jqGrid("saveRow", editingRowId);
                $self.jqGrid("setSelection", rowid);
            },
            "Discard the changes": function () {
                $(this).dialog("close");
                $self.jqGrid("restoreRow", editingRowId);
                $self.jqGrid("setSelection", rowid);
            },
            "Continue editing": function () {
                var tr = $self.jqGrid("getGridRowById", editingRowId);
                $(this).dialog("close");
                setTimeout(function () {
                    $(tr).find("input,textarea,select,button,object,*[tabindex]")
                        .filter(":input:visible:not(:disabled)")
                        .first()
                        .focus();
                }, 50);
            }
        }
    });
    return false; // prevent selection
}

对应的demo是here。