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

问题描述

我正在将jqGrid 4.3.2与inlineNav选项一起使用.网格上的所有编辑都是使用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?

推荐答案

导航器中

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，秒使用myEditParam，这将是 common 用于您使用的所有编辑方式:

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屋！