如果在 jqgrid 中单击其他行，如何结束从格式化程序编辑操作按钮开始的内联编辑 [英] how to end inline edit started with formatter edit action button if other row is clicked in jqgrid

问题描述

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

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

根据 我建议作为解决方法来取消以前在 onSelectRow jqGrid 事件和 formatter:'actions' 的 onEdit 事件中编辑未保存的行.对应的代码片段如下

var grid=$("#list"),最后选择，取消编辑=函数(myGrid){变量 lrid;if (typeof lastSel !== "undefined") {//如果前一个选定行处于编辑状态，则取消对它的编辑.//jqGrid 在 jqGrid 对象中保存实习生 savedRow 数组，//因此使用任何 id 参数调用 restoreRow 方法是安全的//如果 jqGrid 不处于编辑状态myGrid.jqGrid('restoreRow',lastSel);//现在我们需要恢复格式化程序中的图标: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({//...col型号:[{name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',格式选项:{键:真，delOptions:myDelOptions，onEdit: 函数 (id) {if (typeof (lastSel) !== "undefined" && id !== lastSel) {取消编辑(网格)；}最后选择 = id;}}},...],onSelectRow:函数(id){if (typeof (lastSel) !== "undefined" && id !== lastSel) {取消编辑($(this));}最后选择 = id;}});

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

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

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

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

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

Update

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

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.

Update 3

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.

解决方案

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

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

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 中单击其他行，如何结束从格式化程序编辑操作按钮开始的内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！