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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2022069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 22:26:11  来源:igfitidea点击:

jqGrid - Navigate rows using up/down arrow keys?

javascriptjqueryjqgrid

提问by Justin Ethier

Is it possible to navigate between rows using the Up and Down arrow keys?

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

For example, if the first row in the grid is selected and the user presses 'down', I would like the grid to unselect that row and select the next row down in the grid.

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

There is a post in the jqGrid Forums about this at http://www.trirand.com/blog/?page_id=393/help/navigate-arraw-keys/, but enabling cell edit mode is not a solution for me as it will cause many other undesirable grid behaviors.

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

回答by Justin Ethier

Keyboard navigation has finally been added to jqGrid as of version 4.0.

从 4.0 版开始,键盘导航终于被添加到 jqGrid 中。

To get started, go to the Demo Pageand navigate to Functionality| Keyboard navigation.

要开始,请转到演示页面并导航到Functionality| Keyboard navigation.

The following code is used to bind the up/down arrow keys:

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

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

But as the demo shows, you can pass options to bind other keys as well:

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

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

For more information, please refer to the bindKeys methodin the documentation wiki.

有关更多信息,请参阅文档 wiki 中的bindKeys 方法

回答by Daniel Moura

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

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

});

回答by Jonesy

This will only work if you have one grid on the screen because it overrides the document level up/down keys but it is a start.

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

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

        });

回答by Justin Levene

To do this use

要做到这一点,请使用

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

However, this will not work if the grid has a .disableSelection()attached to it. jquery disable selection stops the selection of text content within an object, so if this is applied to a grid, the user can't select text within a grid and copy it to the clipboard.

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