如果在jqgrid中单击了其他行，如何结束从格式化程序编辑操作按钮开始的内联编辑

使用“编辑格式化程序”操作按钮启动内联编辑。 如果在其他行中单击，则旧行仍处于内联编辑模式

如果在其他行中单击，如何结束旧行的行内编辑

据

看起来这条线在4.1.2中得到了解决，但实际上问题仍然存在

更新

如果使用自定义元素，则会发生使用Oleg变通方法异常。 发生异常的行标记在下面代码中的注释中

// this is jqgrid custom_element property value:
function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr;
    if (options.id === options.name)
    // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all" style="vertical-align:top" size="' +
                options.size + '"';
    else
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content " style="height:17px;vertical-align:top;width:' +
                width + 'px" '; 

    elemStr += ' value="' + value + '"' + ' id="' + options.id + '"/>';
    elemStr += '<button style="height:21px;width:21px;" tabindex="-1" /></div>';

    var newel = $(elemStr)[0];
    setTimeout(function () {
        $(newel).parent().css({ display: "inline-block" }).parent().css({ 'padding-bottom': 0 });
  // click in edit button in action input variable is undefined, newel does not contain input element:
   var input = $("input", newel);
    }, 500);
    return newel;
}

自定义元素上未发生事件处理程序异常。 添加onEdit事件处理程序后，将不再创建自定义编辑元素。因此，如果存在此onEdit处理程序，则无法在内联编辑中使用自定义编辑元素。 我注释掉了编辑代码，但问题仍然存在。 看起来此onEdit事件处理程序阻止了自定义编辑元素的创建

更新3

---

我尝试了Oleg答案中提供的演示。如果在行中双击以启动内联编辑，则操作按钮不会更改。在这种情况下，无法使用“保存”和“取消”按钮。

你说得对。格式化程序中似乎有一个bug：jqGrid当前版本的操作。如果进行检查，将找不到保存最后一个编辑行信息的变量。因此，根据使用formatter:actions的代码实现，您可以有多个编辑行：

或者旧编辑行中至少有错误的图标

您将无法再编辑以前的编辑图标，因为您没有编辑操作图标

在中，我建议作为一种解决方法，在OnSetrow jqGrid事件和格式化程序的OneEdit事件中取消上一次编辑未保存的行：“actions”。相应的代码片段如下所示

var grid=$("#list"),
    lastSel,
    cancelEditing = function(myGrid) {
        var lrid;
        if (typeof lastSel !== "undefined") {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            myGrid.jqGrid('restoreRow',lastSel);

            // now we need to restore the icons in the formatter:"actions"
            lrid = $.jgrid.jqID(lastSel);
            $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
            $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
        }
    };

grid.jqGrid({
    // ...
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
            formatoptions:{
                keys: true,
                delOptions: myDelOptions,
                onEdit: function (id) {
                    if (typeof (lastSel) !== "undefined" && id !== lastSel) {
                        cancelEditing(grid);
                    }
                    lastSel = id;
                }
            }},
        ...
    ],
    onSelectRow: function(id) {
        if (typeof (lastSel) !== "undefined" && id !== lastSel) {
            cancelEditing($(this));
        }
        lastSel = id;
    }
});

---

在演示中，除了动作格式化程序外，我还使用双击网格行的内联编辑。实际上这不是必需的，但两者可以一起工作而不产生任何冲突。

你说得对。格式化程序中似乎有一个bug：jqGrid当前版本的操作。如果进行检查，将找不到保存最后一个编辑行信息的变量。因此，根据使用formatter:actions的代码实现，您可以有多个编辑行：

或者旧编辑行中至少有错误的图标

您将无法再编辑以前的编辑图标，因为您没有编辑操作图标

在中，我建议作为一种解决方法，在OnSetrow jqGrid事件和格式化程序的OneEdit事件中取消上一次编辑未保存的行：“actions”。相应的代码片段如下所示

var grid=$("#list"),
    lastSel,
    cancelEditing = function(myGrid) {
        var lrid;
        if (typeof lastSel !== "undefined") {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            myGrid.jqGrid('restoreRow',lastSel);

            // now we need to restore the icons in the formatter:"actions"
            lrid = $.jgrid.jqID(lastSel);
            $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
            $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
        }
    };

grid.jqGrid({
    // ...
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
            formatoptions:{
                keys: true,
                delOptions: myDelOptions,
                onEdit: function (id) {
                    if (typeof (lastSel) !== "undefined" && id !== lastSel) {
                        cancelEditing(grid);
                    }
                    lastSel = id;
                }
            }},
        ...
    ],
    onSelectRow: function(id) {
        if (typeof (lastSel) !== "undefined" && id !== lastSel) {
            cancelEditing($(this));
        }
        lastSel = id;
    }
});

---

在演示中，除了动作格式化程序外，我还使用双击网格行的内联编辑。实际上这不是必需的，但两者可以一起工作而不会产生任何冲突。

谢谢。网格包含jqueryUI自动完成框，它是使用来自其他答案的优秀示例从setTimeout调用中创建的自定义_元素。单击“编辑”按钮会导致异常，因为未知原因尚未创建自定义元素。如何将此按钮与自定义元素一起使用？我更新了问题并添加了代码示例，该示例显示，如果单击按钮，则不会创建自定义元素。@安德鲁斯：抱歉，但我看不到您发布的代码与原始问题之间的任何关系。在代码中不使用格式化程序：操作。您的代码中可能存在一些常规的内联编辑问题。此外，您还写道jQuery UI autocomplete中有一个异常，但我在您发布的代码中找不到任何autocomplete用法。很抱歉，我不清楚。添加onEdit事件处理程序后，不再创建自定义编辑元素。看起来onEdit presence会阻止自定义元素的创建。如果使用此OneEdit，则自定义EditNG元素不能再用于内联版本。如果删除onEdit事件处理程序，则自定义编辑元素可以正常工作。看来这与问题和建议的解决方案有关。我更新了这个问题。如果需要，我可以提供测试用例。@Andrus：测试用例将被清除。我仍然没有看到任何使用jQueryUIAutoComplete的代码，但是您说在autocomplete中您已经看到了问题的根源。还有一个问题吗，自定义元素将不会创建？谢谢。网格包含jqueryUI自动完成框，它是使用来自其他答案的优秀示例从setTimeout调用中创建的自定义_元素。单击“编辑”按钮会导致异常，因为未知原因尚未创建自定义元素。如何将此按钮与自定义元素一起使用？我更新了问题并添加了代码示例，该示例显示，如果单击按钮，则不会创建自定义元素。@安德鲁斯：抱歉，但我看不到您发布的代码与原始问题之间的任何关系。在代码中不使用格式化程序：操作。您的代码中可能存在一些常规的内联编辑问题。而且你写了

---

在jQueryUIAutoComplete的某个地方有一个异常，但是我在你发布的代码中找不到任何autocomplete的用法。很抱歉，我不清楚。添加onEdit事件处理程序后，不再创建自定义编辑元素。看起来onEdit presence会阻止自定义元素的创建。如果使用此OneEdit，则自定义EditNG元素不能再用于内联版本。如果删除onEdit事件处理程序，则自定义编辑元素可以正常工作。看来这与问题和建议的解决方案有关。我更新了这个问题。如果需要，我可以提供测试用例。@Andrus：测试用例将被清除。我仍然没有看到任何使用jQueryUIAutoComplete的代码，但是您说在autocomplete中您已经看到了问题的根源。还有一个问题吗，自定义元素将不会被创建？