如果在jqgrid中单击其他行，如何结束以formatter edit action按钮开始的内联编辑

问题描述

使用编辑格式化程序操作按钮开始内联编辑.如果在其他行中单击，则旧行仍处于内联编辑模式.

Inline editing is started using edit formatter action button.If clicked in other row, old row remains in inline edit mode.

如果在另一行中单击则如何结束旧行indline编辑.

How to end old row indline edit if clickedin other row.

根据 http://www.trirand.com/blog/?page_id=393/bugs/wrong-hovering-effect-in-actions-formatter-of-jqgrid-4-1-0

看起来这在4.1.2中已解决，但实际上问题仍然存在.

it looks line this is solved in 4.1.2 but actually the problem persists.

更新

如果使用自定义元素，则会发生Oleg解决方法异常.下面代码中的注释中标记了发生异常的行

Using Oleg workaround exception occurs if custom element is used.Line where exception occurs is marked in comment in code below

// 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;
}

Update2

我试图更清楚地解释新问题.添加之前

I try to explain new issue more clearly.Before adding

                onEdit = @"function (id) {
                if (typeof (lastSelectedRow) !== 'undefined' && id !== lastSelectedRow) {
                   cancelEditing($('#grid'));
                   }
                 lastSelectedRow = id;
              }

自定义元素上的

事件处理程序异常不会发生.在下面添加onEdit事件处理程序后，将不再创建自定义编辑元素.因此，如果存在此onEdit处理程序，则自定义编辑元素不能用于内联编辑.我注释掉cancelEditing代码，但问题仍然存在.似乎此onEdit事件处理程序会阻止自定义编辑元素的创建.

event handler exception on custom element does not occur.After adding onEdit event handler below custom editing elements are not created anymore. So custom editing elements cannot used in inline editing if this onEdit handler is present.I commented out cancelEditing code but problem persists.It looks like this onEdit event handler prevents custom editing element creation.

更新3

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

I tried demo provided in Oleg answer. If inline edit is started by double click in row, action buttons do not change. It is not possible to use save and cancel buttons in this case.

推荐答案

您是对的.似乎是jqGrid当前版本的formatter:"actions"中的错误.如果您检查源代码，将找不到任何变量来保存有关最后编辑行的信息.因此，取决于使用formatter:"actions"的代码的实现，您可以具有多个编辑行:

You are right. It seems bug in the formatter:"actions" of the current version of jqGrid. If you examine the source code you will find no variable which saves the information about the last editing row. So depend on the implementation of your code which use formatter:"actions" you can has either multiple editing rows:

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

or at least wrong icons in the old editing row

，您将无法再编辑以前的编辑图标(因为您没有"edit"操作图标).

and you will not be able to edit the previous editing icon ever more (because you have no "edit" action icon).

在演示中，我建议您取消之前的解决方法在onSelectRow jqGrid事件和formatter:'actions'的onEdit事件中编辑未保存的行.相应的代码片段如下所示

In the demo I suggest as the workaround to cancel the previous editing unsaved row in both onSelectRow jqGrid event and in the onEdit event of the formatter:'actions'. The corresponding code fragment look as following

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;
    }
});

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

In the demo I use inline editing on double clicking on the grid row in addition to the action formatter. It is not really required, but both can work together without any conflicts.

这篇关于如果在jqgrid中单击其他行，如何结束以formatter edit action按钮开始的内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！