Question

是否可以使用向上和向下箭头键在行之间导航？

例如，如果选择了网格中的第一行并且用户按下“向下”，我希望网格取消选择该行并选择网格中的下一行。

jqGrid论坛中有一篇关于http://www.trirand.com/blog/?page_id=393/help/navigate-arraw-keys/的帖子，但启用单元格编辑模式对我来说不是解决方案，因为它会导致许多其他不良网格行为。

Answer 1

自版本4.0起，键盘导航最终被添加到jqGrid。

要开始使用，请转到Demo Page并导航至Functionality | Keyboard navigation。

以下代码用于绑定向上/向下箭头键：

jQuery("#keynav").jqGrid('bindKeys');

但是，正如演示所示，您也可以传递选项来绑定其他键：

// Bind the navigation and set the onEnter event
jQuery("#keynav").jqGrid('bindKeys', {
       "onEnter" : function( rowid ) { 
                     alert("You enter a row with id:"+rowid)
       }
});

有关详细信息，请参阅文档维基中的bindKeys method。

Answer 2

$(document).keypress(function(e) {

if(e.keyCode == 40) { //down arrow
 $('#nextElementId').click();
}
if(e.keyCode == 38 { //up arrow
 $('#previousElementId'.click();
}

});

Answer 3

这仅在屏幕上有一个网格时才有效，因为它会覆盖文档级别的上/下键，但它是一个开始。

        $(document).keypress(function(e)
        {
            if(e.keyCode == 38 || e.keyCode == 40)  //up/down arrow override
            {
                var gridArr = $('#GridID').getDataIDs();
                var selrow = $('#GridID').getGridParam("selrow");
                var curr_index = 0;
                for(var i = 0; i < gridArr.length; i++)
                {
                    if(gridArr[i]==selrow)
                        curr_index = i;
                }

                if(e.keyCode == 38) //up
                {
                    if((curr_index-1)>=0)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index-1],true);
                }
                if(e.keyCode == 40) //down
                {
                    if((curr_index+1)<gridArr.length)
                        $('#GridID').resetSelection().setSelection(gridArr[curr_index+1],true);
                }
            }

        });

Answer 4

要执行此操作

jQuery("#myGrid").jqGrid('bindKeys');

但是，如果网格附加了.disableSelection()，则无法使用此功能。 jquery禁用选择会停止选择对象中的文本内容，因此如果将其应用于网格，则用户无法选择网格中的文本并将其复制到剪贴板。

jqGrid - 使用向上/向下箭头键导航行？

4 个答案: