jquery - jqGrid 与 inlineNav : is there a way to force the Add button to re-enable?

Question

我正在使用带有 inlineNav 选项的 jqGrid 4.3.2。网格上的所有编辑都是使用 loadonce: true 和 clientArray 在本地完成的。当用户完成编辑时，他们单击表单上的保存按钮，整个网格就会发布到服务器。在大多数情况下，这非常有效，但我遇到了一个奇怪的情况。如果用户添加新行，然后在按 Enter 键确认编辑或取消选择新添加的行之前单击保存按钮，则即使在发布之前调用 saveRow 后，内联导航器上的添加按钮仍保持禁用状态重新加载。我在 saveRow 调用后尝试了 resetSelection 和 restoreRow，但这些都不起作用。我的保存代码:

$("#submitButton").click(function () {
    $("#theGrid").jqGrid('saveRow', $("#selectedRowId").val(), false, 'clientArray');
    if (!ValidateGridData())
        return false;
    var rowData = $("#theGrid").jqGrid('getRowData');
    var dataToSend = JSON.stringify(rowData);
    $.ajax({
        url: '@Url.Action("UpdateGridData")',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: dataToSend,
        dataType: 'json',
        async: false,
        success: function (data, textStatus, jqXHR) {
            $("#theGrid").jqGrid('setGridParam', { datatype: 'json' });
            $("#theGrid").trigger('reloadGrid');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error saving data: ' + textStatus + " " + errorThrown);
        }
    });
    return true;
});

有没有办法让内联导航器相信新行已保存并且用户可以添加更多行？

Answer 1

inlineNav 在导航器中添加的按钮方法的 ids 由网格 id 和相应的后缀构造而成:

• 添加:gridId +“_iladd”(例如“list_iladd”)
• 编辑:gridId +“_iledit”(例如“list_iledit”)
• 保存:gridId +“_ilsave”(例如“list_ilsave”)
• 取消:gridId +“_ilcancel”(例如“list_ilcancel”)

要启用该按钮，您应该删除 'ui-state-disabled' CSS 类:

var gridId = "list";
$("#" + gridId + "list_iladd").removeClass('ui-state-disabled');

要禁用该按钮，可以使用 .addClass('ui-state-disabled') 代替。

此外，我不建议您直接使用任何内联编辑方法，例如 saveRow。在这种情况下，您可能不会遇到您试图解决的问题。看the answer中的代码。它将 editingRowId 和 myEditParam 定义为

var $grid = jQuery("#list"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) { editingRowId = id; },
        afterrestorefunc: function (id) { editingRowId = undefined; }
    };

然后将 inlineNav 与 myEditParam 参数一起使用:

$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

在这种情况下，您可以确保 editingRowId 为您提供当前编辑行的 ID，或者如果没有正在编辑的行，则为 undefined 。因此您可以使用 $(gridIdSelector + "_iledit").click(); 而不是 editRow编辑当前选定的行。同样，您可以使用 setSelection如果需要，并模拟单击任何其他内联编辑导航器按钮。

更新:如果需要，您仍然可以在 onSelectRow 内部组合调用 saveRow，但您可以首先使用变量 editRowId 和秒数使用 myEditParam，这对于您使用的所有编辑方式都是常见:

onSelectRow: function (id) {
    var $this = $(this);
    if (editingRowId !== id) {
        if (editingRowId) {
            // save or restore currently editing row
            $this.jqGrid("saveRow", editingRowId, myEditParam);
            // or $this.jqGrid("restoreRow", editingRowId, myEditParam);
        }
        $this.jqGrid("editRow", editingRowId, myEditParam);
    }
}

如果您需要内联编辑方法的一些其他选项，您可以将其包含在 myEditParam 中。您会发现 editingRowId 更适合用作 lastSel 变量，您可以在大多数内联编辑示例中找到该变量。