9

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

提前谢谢

4

6 回答 6

3

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

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

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

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

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

于 2012-11-23T22:22:06.143 回答
2

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

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

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

于 2011-03-22T18:00:18.860 回答
2

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

$(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);
    }
});
于 2014-02-20T11:28:11.100 回答
1

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

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

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

于 2016-08-23T02:50:09.613 回答
0

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

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

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.

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

于 2011-03-22T09:48:08.087 回答
0

我尝试了几种不同的变体。基于 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
于 2016-04-05T12:59:40.270 回答