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

【问题标题】：jqGrid: how to lose focus when i click outside the grid, or anywhere else for that matterjqGrid：当我点击网格外或其他任何地方时如何失去焦点
【发布时间】：2011-07-20 02:32:07
【问题描述】：

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

提前谢谢

【问题讨论】：

标签： jquery jqgrid jqgrid-php

【解决方案1】：

即使我在使用内联编辑时也遇到了同样的问题。我已经寻求解决方法。我仍然不知道这是否是一个正确的解决方案。

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

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.

希望这能让您了解如何解决您的问题。顺便说一句，我只制作了一行可以在任何时间点进行编辑。

【讨论】：

呃，我不太明白你的意思。我已经可以进行内联编辑了。我想要做的是，当我在网格外单击时，它会调用恢复行函数
是的，我知道您正在进行内联编辑。这里的事情是，不要捕获模糊事件，而是尝试保存您选择进行编辑的行。根据我在任何时候编写的代码我有一个行 id 被打开进行编辑。我的建议是，在您执行与网格相关的任何其他操作之前，请保存您已打开进行编辑的行并继续您的其他操作。顺便说一句，我使用了 saveRow（ ) 对于我的要求，您可以使用 restoreRow() 来满足您的要求。

【解决方案2】：

不管怎样，我已经想出办法了。只是想把它留在网上可能会很好，因为我浪费了很多时间来弄清楚如何去做。希望对你有帮助=)

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

只需将这段代码添加到某处并将适当的部分更改为您已经使用的部分，例如 FieldName 和 lastSelectRoot 和 #grid。

【讨论】：

【解决方案3】：

我不知道您是如何触发内联版本的。我使用 jqGrid 的 ondblClickRow 事件，并且还在寻找一种方法来在用户离开 input 或 select (edit) 元素时恢复行。

我发现跟踪最后选择的元素并在每次点击其他元素时检查它很麻烦。所以，我认为更方便的方法是将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;
}

这样，只要用户离开编辑字段而不按回车，该行就会恢复。

这种方法对我很有效，希望对其他人也有帮助。

【讨论】：

任何想法如何在输入键按下时捕获恢复行事件。
@HardikMishra 我不太明白这个问题。您想在 Enter 按键后拦截 restoreRow 事件吗？还是您想触发 enter 按键时的 restoreRow 事件？
我想在输入键时保存编辑过的数据。但我没有使用“saveRow”。所以，实际上我需要捕获“editRow”的回调
@HardikMishra “capture”是什么意思？是覆盖吗？还是触发？还是防止开火？也许将此添加到您的 colModel 是您正在寻找的：editoptions: { dataEvents: [ { type: 'keypress', fn: function(e) { if ((e.keyCode || e.which) == 13) {/* your code here */} } } ] }
对于内联编辑，可以使用 onSelectRow 事件，但如果使用 setSelection，则 e 未定义。

【解决方案4】：

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

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

【讨论】：

size() 现在已被折旧，并且在最近的版本中不可用，请改用长度。 refer。也使用length == 0 而不是size() < 1

【解决方案5】：

我尝试了几种不同的变体。基于 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

【讨论】：

【解决方案6】：

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

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

基于 $(document).on('click') 的解决方案存在潜在缺陷。像 select2 这样的一些组件不会将点击事件传播到文档，所以如果你在页面上有它并且它被点击了（我的情况就是这样），它会失败。

【讨论】：