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

Question

我目前正在使用内联编辑进行编辑，当我在网格外部单击时，它仍在编辑中。我应该使用什么事件处理程序来使其调用恢复行函数，这样数据实际发送到服务器的唯一方法是用户按 Enter 键。

提前谢谢

Answer 1

我不知道你到底是如何触发内联版本的。我使用 jqGrid 的 ondblClickRow 事件，并且还在寻找一种在用户离开输入或选择时恢复行的方法（ 编辑）元素。

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

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

由于主要问题是当您在网格外部单击时您希望失去焦点，因此我编写了此函数来在网格没有 has() 单击的元素时取消选择单元格：

$(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 3

无论如何，我已经想出了如何去做。只是想把它留在网上的某个地方可能会很好，因为我浪费了很多时间来弄清楚如何去做。希望它有帮助=）

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

只需在某处添加这段代码并将适当的部分（例如 FieldName 和 lastSelectRoot 和 #grid）更改为您已经使用的内容即可。

Answer 4

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

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

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

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 的 代码我自己写的。

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