asp.net - 使用箭头键导航

Question

我正在使用这个 Gridview

http://gridviewscroll.aspcity.idv.tw/Demo/Style.aspx#StyleCustom2

有人可以告诉我如何使用箭头键导航到 GridView 到那个 gridview

谢谢 ：）

Answer 1

1. 使用您想要扩展功能的 GridView 编辑网络表单。在那里，添加两个按钮。ButtonUp 和 ButtonDown。

2. 为按钮添加以下点击事件。我假设您的 GridView 称为 GridView1：

               protected void ButtonUp_Click(object sender, EventArgs e) {
           int i = GridView1.SelectedIndex;
           if(i>0)
           GridView1.SelectedIndex = GridView1.SelectedIndex - 1;
           }
   
           protected void ButtonDown_Click(object sender, EventArgs e) {
           int i = GridView1.SelectedIndex;
           if (i < GridView1.Rows.Count - 1)
           GridView1.SelectedIndex = GridView1.SelectedIndex + 1;
           }
   

3. 如果您现在运行您的页面，您可以使用页面上的按钮在 GridView 中导航。现在，我们将通过 javascript 将按钮点击绑定到我们的键盘。将以下代码添加到 Page_Load 事件中：

                   ClientScript.RegisterClientScriptBlock(typeof(string), "keyScript",
           @"function move(e) {
           var key = 0;
           if(window.event)
           key = event.keyCode;
           else
           key = e.keyCode;
           if(key == 38)
           document.getElementById('ButtonUp').click();
           if(key == 40)
           document.getElementById('ButtonDown').click();
           }
           document.onkeydown=move;
           ", true);
   

4. 现在您应该可以使用键盘的上下键进行导航了。

5. 要使页面按钮不可见，请为它们创建以下 CssClass：

   .Invisible {
        display:none;
    }
   

Answer 2

<script type="text/javascript">
    $(document).keydown(function (e) {
        var keyCode = e.keyCode || e.which;
        var arrow = { left: 37, up: 38, right: 39, down: 40 };
        switch (keyCode) {
            case arrow.left:
                break;
            case arrow.up:
                document.getElementById(('<%= ButtonUp.ClientID %>')).click();
                break;
            case arrow.right:
                break;
            case arrow.down:
                //alert("down");
                document.getElementById(('<%= ButtonDown.ClientID %>')).click();
                break;
        }
    });
</script>