使用箭头键导航

Question

我正在使用此Gridview

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

有人可以告诉我如何使用箭头键导航到GridView中吗

谢谢 ：）

Answer 1

1. 使用想要扩展功能的GridView编辑Webform。 在那里，添加两个按钮。 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>