Naviga usando i tasti freccia - asp.net, jquery-ui, jquery, jquery-plugins

Sto usando questo Gridview

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

Qualcuno può dirmi come posso navigare in GridView usando Arrow Keys in quel gridview

Grazie :)

risposte:

1. Modifica il webform con GridView che vuoi estendere con la funzionalità. Lì, aggiungi due pulsanti. ButtonUp e ButtonDown.

2. Aggiungi i seguenti eventi di clic per i pulsanti. Suppongo che il tuo GridView si chiami 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. Se gestisci la tua pagina ora, sei in grado di farlonavigare attraverso GridView con i pulsanti sulla pagina. Ora, legheremo i clic del pulsante alla nostra tastiera tramite javascript. Aggiungi il seguente codice all'evento 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. Ora dovresti essere in grado di navigare con i tasti su e giù della tastiera.

5. Per rendere invisibili i pulsanti della pagina, crea il seguente CssClass per loro:

   .Invisible {
   display:none;
   }
   

<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>