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

Question

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

alt text http://i32.tinypic.com/e62iqh.jpg

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

我已经完成了所提供的事件,但是这些都是由于用户按下"Enter"而发生的,我想避免这种情况.当用户选中此单元格时,是否有可以连接的内容会触发操作？

Answer 1

对于在线编辑,您可以通过以下几种方式完成.要使用onSelectRow触发器将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);
    });
  }});

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

注意:要像上面一样使用.live()模糊,你需要jQuery 1.4或补丁位于: 在jQuery .live()方法中模拟"焦点"和"模糊"

小心rowIds.当您进入排序,添加和删除行时,您可能会发现自己编写了一些棘手的jQuery来将行ID转换为iRows或行号.

如果你像我一样,你进行了单独的单元格编辑,你将需要修改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);
    });
  }});

希望有所帮助..

Answer 2

这是非常可怕的,但它是我对这个问题的看法,并且有点容易和更通用 - 它在项目失去焦点时按编程方式输入:)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

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

它假定最后编辑的项目是唯一的.edit-cell作为父td.

Answer 3

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

在 jQuery .live() 方法中模拟“焦点”和“模糊”