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

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

---

thx提前

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

当我编辑一行的时候，我用了这样的东西

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.

希望这能给你一个解决问题的方法。

---

顺便说一句，我只做了一行在任何时候都可以编辑。

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

---

只需在某个地方添加这段代码，并将相应的部分（如FieldName、lastSelectRoot和#grid）更改为您正在使用的内容。

我不知道您是如何触发内联版本的。我使用jqGrid的

ondblClickRow

事件，并且在用户离开

input

或

select

（编辑）元素时也在寻找一种方法来恢复行

我发现跟踪最后一个选定的元素，并在每次单击其他元素时检查它很麻烦。因此，我认为更方便的方法是将

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键时，该行就会恢复

---

这种方法对我来说非常有效，希望对其他人也有帮助。

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

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

$（文档）。单击（函数（e）{
e、 预防默认值（）；
//获取发生单击事件的元素
var clickedElement=e.target；
//如果单击事件发生在网格之外
如果（$（“#myGridId”）.has（clickedElement）.size（）<1）{
//取消选择网格行
$（“#myGridId”）.jqGrid（“editCell”，0,0，false）；
}
});

我尝试了几种不同的变体。根据莫里西奥·赖斯的作品，我写了自己的

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('restoreRow',lastSel); // cancel edit

---

这个解决方案适合我，看起来比其他选项更简单。是泛型的，不需要任何全局变量

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

---

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

嗯，我不太理解您的意思。我已经可以做内联编辑了。我想做的是，当我在网格外单击时，它将调用还原行函数。我知道您正在进行内联编辑。这里的问题是，不是捕获模糊事件，尝试保存您选择要编辑的行。根据我在任何时候编写的代码，我有一个已打开以进行编辑的行id。我的建议是，在执行与网格相关的任何其他操作之前，请保存您已打开以进行编辑的行，并继续执行其他操作。顺便说一句，我使用了saveRow（）对于我的要求，您可以使用restoreRow（）来满足您的要求。知道如何在按enter键时捕获还原行事件吗。@HardikMishra我不太理解这个问题。是否要在按enter键后拦截restoreRow事件？还是要在enter键按下时触发restoreRow事件？我要在enter键按下时保存编辑的数据。但我没有使用“saveRow”。那么，实际上我需要捕获“editRow”@HardikMishra的回调，你说的“捕获”是什么意思？是覆盖吗？还是扳机？还是阻止射击？也许将此添加到您的

colModel

就是您想要的：

editoptions:{dataEvents:[{type:'keypress'，fn:function（e）{if（（e.keyCode | | e.which）==13）{/*您的代码在这里*/}}}}}

用于内联编辑onSelectRow事件，但是如果使用了setSelection，e是未定义的。size（）现在已折旧且在最新版本中不可用，请改用“长度”。也可以使用

length==0

而不是

size（）<1

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

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