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或位于以下位置的补丁： Simulating "focus" and "blur" in jQuery .live() method

小心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最终成为了解决方案：

Simulating "focus" and "blur" in jQuery .live() method

Answer 4

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

必须创建名为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;
            }
        },

Answer 5

我遇到了同样的问题并尝试了上面的答案。最后，我选择了一个插入＆＃34; Enter＆＃34;当用户离开标签时按键。

objc_msgSend

Answer 6

不使用 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（）是验证我的数据的函数。

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

6 个答案: