带有 inlineNav 的 jqGrid:有没有办法强制重新启用“添加"按钮? [英] jqGrid with inlineNav: is there a way to force the Add button to re-enable?

问题描述

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

I'm using jqGrid 4.3.2 with the inlineNav option. All editing on the grid is done locally using loadonce: true and clientArray. When the user finishes editing, they click a save button on the form and the entire grid is posted to the server. This works great, for the most part, but I've run into an oddity. If the user adds a new row and then clicks the save button before hitting enter to confirm the edit or deselecting the newly added row, the add button on the inline navigator remains disabled even after calling saveRow before posting and reloading. I've tried resetSelection and restoreRow after the saveRow call, but neither of these work. My save code:

$("#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;
});

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

Is there a way I can convince the inline navigator that the new row is saved and the user can add more rows?

推荐答案

inlineNav 方法的 ids 由网格 id 和相应的后缀构成:

The buttons added in the navigator by the inlineNav method has ids which constructed from the grid id and the corresponding suffix:

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

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

To enable the button you should remove 'ui-state-disabled' CSS class:

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

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

To disable the button one can use .addClass('ui-state-disabled') instead.

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

Additionally I don't recommend you to use any inline editing methods like saveRow directly. In the case you will probably not have the problem which you try to solve. Look at the code from the answer. It defines editingRowId and myEditParam as

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

然后使用 inlineNav 和 myEditParam 参数:

and then use inlineNav with myEditParam parameter:

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

如果您可以确定 editingRowId 会为您获取当前编辑行的 id，如果没有行正在编辑，则 undefined 会为您提供.所以你可以使用 $(gridIdSelector + "_iledit").click(); 而不是 editRow 编辑当前选中的行.同样，如果需要，您可以使用 setSelection 并模拟点击在任何其他内联编辑导航器按钮上.

In the case you can be sure that editingRowId get you the id of the current editing row or undefined if no row are editing. So you can use $(gridIdSelector + "_iledit").click(); instead of editRow to edit the current selected row. In the same you can use setSelection if needed and simulate click on any other inline editing navigator buttons.

更新:如果您需要，您仍然可以在 onSelectRow 内组合 saveRow 的调用，但您可以先使用变量 editingRowId 和 seconds 使用 myEditParam 这对于您使用的所有编辑方式来说都是通用:

UPDATED: If you need you can still combine calls of saveRow inside of onSelectRow, but you can first use the variable editingRowId and seconds use myEditParam which will be common for all editing ways which you use:

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 变量.

If you need some other options of inline editing methods you can include there in the myEditParam. You will see that editingRowId is much better to use as lastSel variable which you find in the most inline editing examples.

这篇关于带有 inlineNav 的 jqGrid:有没有办法强制重新启用“添加"按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！