限制用户选择jqgrid中的下一行 [英] Restrict user to select next row in jqgrid

问题描述

我在项目中使用 jqgrid .我要求当用户选择行并单击内联工具栏控件的编辑按钮时，之后，修改单元格中的任何数据，而不是单击内联工具栏控件用户当时单击(选择)任何其他行的保存"按钮.我想向用户显示类似

I am using jqgrid in my project.I have requirement that when user select row and click on edit button of inline toolbar control and modify any data in cell after that instead of click on Save button of inline toolbar control user click(select) any other row at that time.I want to show user message like

想保存/丢弃修改后的数据

Wants to save/discard the modified data

如果用户单击消息对话框的保存"按钮，然后保存数据，否则丢弃数据.因此，请让我知道如何实现.请不要单击保存.或放弃"按钮，请不要选择用户点击的下一行.

if user click on Save button of message dialog then save the data otherwise discard the data.So please let me know how can I implement it.Till user don’t click on save or discard button don’t select the next row on which user click.

推荐答案

首先，您应该使用inlineNav的restoreAfterSelect: false选项(如果使用inlineNav).您可以使用beforeSelectRow秒来实现所需的行为，并根据用户的选择调用saveRow或restoreRow.

First of all you should use restoreAfterSelect: false option of inlineNav (if you use inlineNav). Seconds you can use beforeSelectRow to implement the required behavior and to call saveRow or restoreRow depend on the user choice.

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方法.您可以在演示上查看工作代码.

I used confirm method above. You can see the working code on the demo.

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

Alternatively one can create asynchronous dialog using jQuery UI dialog for example. Then the code of beforeSelectRow could be the following:

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
}

相应的演示位于此处.

这篇关于限制用户选择jqgrid中的下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！