javascript - jqGrid:是否可以在关闭而不是按 Enter 键时提交单元格更改？

Question

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

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

我已经完成了所提供的事件，但它们都是由于用户按下“Enter”而发生的，我想避免这种情况。有什么我可以连接的东西会在用户关闭此单元格时触发操作吗？

Answer 1

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

  $('#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);
    });
  }});

要将 jQuery 实时事件处理程序应用于可能出现在一行中的所有输入(jqGrid 将所有输入标记为 rowId_fieldName )，循环抛出网格中的行数并执行如下操作:

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

注意:要像上面那样将 blur 与 .live() 一起使用，您需要 jQuery 1.4 或位于以下位置的补丁: Simulating "focus" and "blur" in jQuery .live() method

小心 rowId。当您开始对行进行排序、添加和删除时，您可能会发现自己编写了一些棘手的 jQuery 来将行 ID 转换为 iRow 或行号。

如果您像我一样进行了单个单元格编辑，您将需要使用如下内容修改 afterEditCell 触发器:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

希望对您有所帮助..