Question

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

如果点击其他行，如何结束旧行indline编辑。

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

它看起来这是在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;
}

UPDATE2

我试着更清楚地解释新问题。在添加

之前

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

自定义元素上的

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

更新3

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

Answer 1

你是对的。它似乎是当前版本的jqGrid的formatter:"actions"中的错误。如果检查the source code，您将找不到保存有关上一个编辑行的信息的变量。因此，依赖于使用formatter:"actions"的代码的实现，您可以使用多个编辑行：

enter image description here

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

enter image description here

并且您将无法再编辑上一个编辑图标（因为您没有“编辑”操作图标）。

在the demo中，我建议在onSelectRow jqGrid事件和onEdit formatter:'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;
    }
});

在演示中，除了动作格式化程序之外，我还双击网格行使用内联编辑。它并不是真正需要的，但两者可以在没有任何冲突的情况下协同工作。

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

1 个答案: