導航使用箭頭鍵

Question

我爲使用該的GridView

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

有人能告訴我怎樣可以使用箭頭鍵成的GridView

謝謝:)

Answer 1

1. 導航到GridView控件

   用你想用擴展功能擴展的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>