amélioration des performances de navigation de table dans jquery

Question

J'essaye d'écrire la navigation de table en utilisant des clefs pour le gridview d'asp.net. C'est ce que j'ai jusqu'ici. Cela fonctionne bien mais c'est lent. S'il vous plaît regardez-le et laissez-moi savoir comment améliorer la performance si possible.

Fondamentalement, il s'agit d'une table html avec des éléments d'entrée. La structure de la table est comme ce

<table> 
<tr> 
<td> 
<div style="height:22px;"> 
    <input type = "text"> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
<div style="height:22px;"> 
    <input type = "text"> 
</div> 
</td> 
</tr> 
... 
</table> 
jQuery(function($) { 
      $('table#<%= myTable.ClientID %>') 
       .bind('keydown', funcKeyDown) 
     }); 


function funcKeyDown(event) 
     { 
      //get cell element. 
      var cell = event.target; 

      //get current cellIndex 
      var $cell = $(cell);   
      var currCell = $cell.parents("td"); 
      var cellIndex = currCell[0].cellIndex; 
      //get current rowIndex 
      var currRow = $cell.parents("tr"); 
      var rowIndex = currRow[0].rowIndex; 

      var nextRowIndex, targetElem = null; 
      var nextCell;   
      switch(event.keyCode) {     
       case 13: //enter key 
        if(shiftKeyPressed == 1){ 
         //move left       
         if(!(cellIndex == 0)){       
         targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]"); 
         if(targetElem){targetElem.select();}}} 
        else { 
         //move right 
         if(!(cellIndex == (numElements -1))){ 
          targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");       
          if(targetElem){ 
           targetElem.select(); 
          } 
         } 
        }       
        return false;       
       case 16: //shift key 
        shiftKeyPressed = 1; 
        return false; 
       case 33:      
       case 34: //page-up, page-down 
        if(event.keyCode == 33){ 
         nextRowIndex = rowIndex - pageSize; 
         if(nextRowIndex < 0) nextRowIndex = 0;     
        } 
        if(event.keyCode == 34){ 
         nextRowIndex = rowIndex + pageSize; 
         if(nextRowIndex > numRows) nextRowIndex = numRows; 
        }      
        targetElem = currRow.parent().children("tr").eq(nextRowIndex).children("td").eq(cellIndex) 
            .find("input[type=text]");                 
        if(targetElem != null){targetElem.select();} 
        return false;     
       case 37: //left  
        if(!(cellIndex == 0)){       
         targetElem = currRow.children("td").eq(cellIndex-1).find("input[type=text]"); 
         if(targetElem != null){targetElem.select();}} 
        return false;             
       case 38: //up      
        if(rowIndex != 0){ 
         targetElem = currRow.parent().children("tr").eq(rowIndex-1).children("td").eq(cellIndex) 
             .find("input[type=text]");                 
         if(targetElem != null){ 
         targetElem.select();}} 
        return false;             
       case 39: //right arrow 
        if(!(cellIndex == (numElements -1))){ 
         targetElem = currRow.children("td").eq(cellIndex+1).find("input[type=text]");       
         if(targetElem != null){targetElem.select();}} 
        return false;             
       case 40: //down            
        if(rowIndex >= 0){ 
         targetElem = currRow.parent().children("tr").eq(rowIndex+1).children("td").eq(cellIndex) 
             .find("input[type=text]");                 
         if(targetElem != null){targetElem.select();}} 
        return false;                           
      }    
     }     

Answer 1

Tout d'abord tout ce que vous avez le code obtenu en cours d'exécution pour chaque pression de touche avant d'entrer dans l'instruction switch et déterminer si vous avez réellement besoin de faire quoi que ce soit.

Vous devez factoriser ce code dans une fonction qui obtient simplement le TD (en tant que simple variable d'élément pas un wrapper Jquery). En plus de cela, vous devez comprendre que JQuery abstrayant les différences entre les navigateurs a un prix et des performances. Par exemple, lorsqu'un événement lié se déclenche, l'événement a un morceau modéré de Javascript à parcourir avant que votre fonction d'événement réelle soit appelée.

Votre utilisation de currRow.children ("td"). Eq (cellIndex + 1) .find ("input [type = text]"); ne va pas être particulièrement bon. Vous pouvez éliminer la div supplémentaire en spécifiant la hauteur sur le td. Ensuite, supposons que le td ne contienne qu'une telle entrée.

var tdNext = td.nextSibling; 
var textBox = tdNext ? tdNext.firstChild : null; 
if (textBox) $(textBox).select(); 

La leçon est parfois que vous devez contourner les avantages de JQueries pour des raisons de performance. Le code ci-dessus est encore très compatible sur plusieurs navigateurs.

Vous pouvez appliquer des techniques similaires aux autres touches principales gauche, haut, bas et entrée.

Y a-t-il une raison pour laquelle vous n'utilisez pas event.shiftKey pour détecter la touche Maj? L'utilisation d'une variable globale telle que vous semblez ne semble pas correcte.