Javascript jqGrid：在关闭选项卡而不是按Enter键时，是否可以提交单元格更改？

我的网格中有一个简单的在线编辑，我想在用户从文本框中弹出标签时提交更改。jqGrid的默认行为强制用户按“Enter”键提交更改，但这对我们的用户来说是不直观的

---

我已经处理了提供的事件，但它们都是由于用户按下“回车”键而发生的，我希望避免这种情况。当用户点击此单元格时，有什么东西可以触发操作吗？

我的解决方案是独立于网格使用基本的jQuery选择器和事件来检测此事件。我使用网格中文本框上的live和blur事件来捕获事件。这两个事件互不支持，因此此黑客最终成为解决方案：

---

对于在线编辑，您可以通过多种方式完成此操作。要使用OnSetrow触发器将onblur事件绑定到输入字段，无需使用编辑和保存按钮，请执行以下操作：

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

要将jQuery live事件处理程序应用于行中可能出现的所有输入（jqGrid将所有输入标记为rowId_fieldName），请循环抛出网格中的行数，并执行以下操作：

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

---

希望这会有所帮助。

这很可怕，但这是我对这个问题的看法，可能更简单、更通用—当项目失去焦点时，它会以编程方式按enter:）

将该代码添加到jqgrid设置代码中

---

它假设最后一个编辑的项目是唯一的。编辑单元格作为父td。

我知道这个问题很老，但答案已经过时

必须创建名为lastsel的全局变量，并将以下内容添加到jqGrid代码中

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },

---

我也有同样的问题，并尝试了上面的答案。最后，我提出了一个解决方案，在用户离开选项卡时插入一个“回车”键

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}

---

不要使用selectRow而是使用CellSelect

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }

---

//saveDataFromTable（）是验证我的数据的函数。

Nice example@Jon如果单元格是带有日期选择器的日期，并且没有在选择器中选择字段，并且给出Javascript错误，那么它仍然存在问题。在上一个示例中，“uploadTable”应该是“gridId”？正确。谢谢@morgar。已修复。示例中还有另一个“#uploadTable；”）它可能并不漂亮，但它是通用的，它适用于同一行中的文本和下拉列表。感谢您慷慨地提供您的答案。

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }