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

【问题标题】：jqGrid - Navigate rows using up/down arrow keys?jqGrid - 使用向上/向下箭头键导航行？
【发布时间】：2011-01-02 14:02:40
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

键盘导航终于在 jqGrid 4.0 版本中添加了。

要开始使用，请转至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)
       }
});

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

【讨论】：

我想知道一个后续问题，我试图在网格完成时选择第一行，但它并不能立即允许键盘导航。
@Nap - 在键盘导航起作用之前，网格需要获得焦点。

【解决方案2】：

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

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

});

【讨论】：

嗯...这是一个好的开始，但此代码假定页面上只有一个网格，并且我可以轻松地按显示顺序获取每行的 ID。
我使用 ID 作为简化。选定的“tr”具有类 ui-state-highlight，使用它可以获取下一行或上一行。您可以将按键事件绑定到表格而不是“文档”，这样您就不会遇到多个网格的问题。
显然人们不应该只是复制和粘贴代码。这个答案向您展示了处理按键背后的概念，并且是完全有效的。几乎所有关于 SO 的答案都是一个好的开始！

【解决方案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);
                }
            }

        });

【讨论】：

【解决方案4】：

为此使用

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

但是，如果网格上附加了.disableSelection()，这将不起作用。 jquery disable selection 会停止选择对象内的文本内容，因此如果将其应用于网格，则用户无法选择网格内的文本并将其复制到剪贴板。

【讨论】：