Question

我在JQuery网格中有这个代码：

onSelectRow:function(rowid){
    var r=$("#myGrid").getRowData(rowid);
    var col1 = r.column1;
    $("#myGrid #"+rowid).keyup(function(e) {
        if(e.keyCode == 46) { 
            alert(col1);
        }
    });
}

我的实际目的是在键盘上按下[delete]键时删除数据库中选定的行记录。

我正在使用alert()测试代码，如上面给出的代码。

问题是，每当我多次点击同一行时，说4次，然后单击[delete]键，警报弹出4次。但是，当我单击4个不同的行，然后单击[delete]键时，它可以正常工作。

这是情况的说明（点击的行，后跟[delete]）：

   clicked row(in sequence)                alert popups   

   row1 ->[delete]                         row1
   row1, row2, row3, row4 ->[delete]       row4   
   row1, row1, row1, row2 ->[delete]       row2    
   row1, row2, row3, row3 ->[delete]       row3, row3    
   row1, row2, row2, row2 ->[delete]       row2, row2, row2    
   row1, row1, row1, row1 ->[delete]       row1, row1, row1, row1

为什么以及如何克服这个问题？或者也许有另一种更好的方法来做到这一点？

Answer 1

是的，每次选择一行时，您都会注册一个keydown事件监听器。也许你应该把你的keydown事件处理程序拿出来：

$("#myGrid tr").keyup(function(e) {
    var rowid = parseInt($(this).attr("id"));
    var r=$("#myGrid").getRowData(rowid);
    var col1 = r.column1;
    if(e.keyCode == 46) {
        alert(col1);
    }
});

编辑：如果您的网格是动态生成的：

$("#myGrid").on("keyup", "tr", function(e) {
    var rowid = parseInt($(this).attr("id"));
    var r=$("#myGrid").getRowData(rowid);
    var col1 = r.column1;
    if(e.keyCode == 46) {
        alert(col1);
    }
});

您可能需要以某种方式检查该行是否已被选中。

Answer 2

当您点击一行时，似乎正在发生的事情是onSelectRow被调用。在此函数中，您可以在行上绑定keydown事件。因此，当您单击该行4次时，onSelectRow将被调用4次，这将反过来将事件绑定4次，因此您会看到alert 4次。

解决方案不是绑定keydown函数内的onSelectRow事件。您应该以这种方式将keyup置于onSelectRow函数之外：

 $("#myGrid someRowSelector").keyup(function(e) {
        if(e.keyCode == 46) { 
            alert(col1);
        }
    });

其中someRowSelector标识要绑定事件的行。

Answer 3

而不是keydown事件尝试keyup事件

onSelectRow:function(rowid){
    var r=$("#myGrid").getRowData(rowid);
    var col1 = r.column1;
    $("#myGrid #"+rowid).keyup(function(e) {
        if(e.keyCode == 46) { 
            alert(col1);
        }
    });
}

Answer 4

注册一个keydown - 侦听器，然后循环遍历元素列表。

这就是我要这样做的方式：

var colsToDelete = {};

$(document).keydown(function(e) {
    if(e.keyCode == 46) {
        for(var id in colsToDelete) {
            var data = colsToDelete[id];
            alert(data);
        }
        colsToDelete = {};
        e.preventDefault();
    }
});

您的代码如下所示：

onSelectRow:function(rowid){
    var r = $("#myGrid").getRowData(rowid);
    colsToDelete[rowid] = r.column1;
}

Answer 5

如果您不想修改插件，可以像这样为jqgrid制作扩展功能。

 $.extend($.fn.jqGrid, {
         bindKeysCustom: function (settings) {
            var o = $.extend({
                onEnter: null,
                onSpace: null,
                onLeftKey: null,
                onRightKey: null,
                onSupr: null,
                scrollingRows: true
            }, settings || {});
            return this.each(function () {
                var $t = this;
                if (!$('body').is('[role]')) { $('body').attr('role', 'application'); }
                $t.p.scrollrows = o.scrollingRows;
                $($t).keydown(function (event) {
                    var target = $($t).find('tr[tabindex=0]')[0], id, r, mind,
                    expanded = $t.p.treeReader.expanded_field;
                    //check for arrow keys
                    if (target) {
                        mind = $t.p._index[$.jgrid.stripPref($t.p.idPrefix, target.id)];
                        if (event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40) {
                            // up key
                            if (event.keyCode === 38) {
                                r = target.previousSibling;
                                id = "";
                                if (r) {
                                    if ($(r).is(":hidden")) {
                                        while (r) {
                                            r = r.previousSibling;
                                            if (!$(r).is(":hidden") && $(r).hasClass('jqgrow')) { id = r.id; break; }
                                        }
                                    } else {
                                        id = r.id;
                                    }
                                }
                                $($t).jqGrid('setSelection', id, true, event);
                                event.preventDefault();
                            }
                            //if key is down arrow
                            if (event.keyCode === 40) {
                                r = target.nextSibling;
                                id = "";
                                if (r) {
                                    if ($(r).is(":hidden")) {
                                        while (r) {
                                            r = r.nextSibling;
                                            if (!$(r).is(":hidden") && $(r).hasClass('jqgrow')) { id = r.id; break; }
                                        }
                                    } else {
                                        id = r.id;
                                    }
                                }
                                $($t).jqGrid('setSelection', id, true, event);
                                event.preventDefault();
                            }
                            // left
                            if (event.keyCode === 37) {
                                if ($t.p.treeGrid && $t.p.data[mind][expanded]) {
                                    $(target).find("div.treeclick").trigger('click');
                                }
                                $($t).triggerHandler("jqGridKeyLeft", [$t.p.selrow]);
                                if ($.isFunction(o.onLeftKey)) {
                                    o.onLeftKey.call($t, $t.p.selrow);
                                }
                            }
                            // right
                            if (event.keyCode === 39) {
                                if ($t.p.treeGrid && !$t.p.data[mind][expanded]) {
                                    $(target).find("div.treeclick").trigger('click');
                                }
                                $($t).triggerHandler("jqGridKeyRight", [$t.p.selrow]);
                                if ($.isFunction(o.onRightKey)) {
                                    o.onRightKey.call($t, $t.p.selrow);
                                }
                            }
                        }
                            //check if enter was pressed on a grid or treegrid node
                        else if (event.keyCode === 13) {
                            $($t).triggerHandler("jqGridKeyEnter", [$t.p.selrow]);
                            if ($.isFunction(o.onEnter)) {
                                o.onEnter.call($t, $t.p.selrow);
                            }
                        } else if (event.keyCode === 32) {
                            $($t).triggerHandler("jqGridKeySpace", [$t.p.selrow]);
                            if ($.isFunction(o.onSpace)) {
                                o.onSpace.call($t, $t.p.selrow);
                            }
                        } else if (event.keyCode === 46) {
                            $($t).triggerHandler("jqGridKeySupr", [$t.p.selrow]);
                            if ($.isFunction(o.onSupr)) {
                                o.onSupr.call($t, $t.p.selrow);
                            }
                        }
                    }
                });
            });
        }
    });

然后，改为像这样调用你的jqgrid

  grid.jqGrid('bindKeys');

你必须像这样称呼它

grid.jqGrid('bindKeysCustom', {
                'onSupr': function (rowid) { }
            });

onSelectRow方法中的Keydown事件

5 个答案: