Question

我目前正在使用内联编辑进行编辑，当我在网格外点击时，它仍处于编辑状态。我应该使用什么事件处理程序来调用恢复行功能，这样数据实际发送到服务器的唯一方法就是用户按下回车键。

事先提前

Answer 1

我不知道你是如何触发内联版的。我使用了jqGrid的ondblClickRow事件，并且在用户离开input或select（编辑）时也在寻找恢复行的方法元件。

我发现跟踪最后选择的元素并在每次点击其他元素时检查它都很麻烦。因此，我认为更方便的方法是将restoreRow触发器附加到当前正在编辑的blur或input元素的select事件中，如下所示：

ondblClickRow: function(rowid, iRow, iCol, e) {
  grid.jqGrid('editRow', rowid, true);
  $("input, select", e.target).focus().blur(function() {
    grid.jqGrid('restoreRow', rowid);
  });
  return;
}

这样，只要用户离开版本字段而不按Enter键，就会恢复该行。

这种方法对我很有用，希望它也可以帮助别人。

Answer 2

无论如何，我已经想出了如何做到这一点。只是觉得将它留在网上可能会很好，因为我浪费了相当多的时间来弄清楚如何去做。希望它有帮助=）

$(document).click(function(e){
    if(e.target.id != lastSelectRoot+"_FieldName"){
        jQuery('#grid').jqGrid('restoreRow',lastSelectRoot);
        lastSelectRoot = null;
    }
});

只需在某处添加这段代码，然后将相应的部分（例如FieldName，lastSelectRoot和#grid）更改为您已使用的部分。

Answer 3

由于主要问题是当你在网格外点击时想要失去焦点，我写了这个函数，当网格没有（）点击的元素时，取消选择单元格：

$(document).click(function(e) {
    e.preventDefault();
    //gets the element where the click event happened
    var clickedElement = e.target;      
    //if the click event happened outside the grid 
    if($("#myGridId").has(clickedElement).size() < 1){
        //unselect the grid row
        $("#myGridId").jqGrid("editCell", 0, 0, false);
    }
});

Answer 4

此解决方案对我有用，看起来比其他选项简单。是通用的，不需要任何全局变量。

$(document).on('focusout', '[role="gridcell"] *', function() {
    $("#mygrid").jqGrid('editCell', 0, 0, false);
});

基于$（document）.on（'click'）的解决方案存在潜在的缺陷。像select2这样的某些组件不会将click事件传播到文档，因此如果您在页面上显示它并且单击它（这是我的情况），它将会失败。

Answer 5

即使我在使用内联编辑时遇到了同样的问题。我已经找到了解决方法。我还不知道它是否是一个正确的解决方案。

当我编辑一行时，我使用了这种东西

var lastSel;

// In grid I am using some thing like this for editing
    ondblClickRow: function(rowId, iRow, iCol, e){
//initially I am saving my prev row selected for editing and then editing the selected row.

        if(rowId && rowId!==lastSel){ //lastSel is a global variable
            jQuery(this).saveRow(lastSel); 
            lastSel=rowId; 
         }        
        $(this).jqGrid('resetSelection');   
        $(this).jqGrid('editRow', rowId, true, null, null, 'clientArray');


    }

当我想将数据发送到服务器进行更新时，我在第一行使用以下语句并发送然后将数据发送到服务器。

$(gridId).saveRow(lastSel);//where lastSel is the global variable I have selected.

希望这能让您了解如何解决问题。顺便说一句，我在任何时候都只能编辑一行。

Answer 6

我尝试了几种不同的变种。基于Mauricio Reis的code我写了自己的作品。

var lastSel = -1;

$("#mygrid").jqGrid({
    ...
    beforeSelectRow: function(rowid) {
        if (rowid !== lastSel) {
            lastSel = rowid;
            $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
        }
        return true;
    },
    onCellSelect: function(rowId,iCol,cellcontent,e) {
        if(iCol == 1 || iCol == 2) // editable columns
            sgrid.jqGrid('editRow', rowId, true);
    },
    ...
});
...
$(document).click(function(e) {
    if(sgrid.has(e.target).size() < 1)
        $("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit
});

如果你想保存行而不是取消编辑只需添加

$("#mygrid").jqGrid('saveRow', lastSel); // save row

代替

$("#mygrid").jqGrid('restoreRow',lastSel); // cancel edit

jqGrid：当我在网格外部或其他任何地方点击时，如何失去焦点

6 个答案: