Jak powiązać klawisze strzałek w górę iw dół, aby włączyć nawigację w wierszach tabeli?

Question

Wyświetlam wyniki wyszukiwania z tabelą. Każdy wynik ma przycisk do kliknięcia przez użytkownika, aby pokazać pełny jego szczegół. To działa dobrze.

Chcę również umożliwić nawigację w wynikach wyszukiwania za pomocą klawiszy strzałek w górę i w dół.

Teraz użytkownik musi kliknąć przycisk lub kartę Select na przycisk i nacisnąć space bar.

Przypuszczam, że mogę przechwycić zdarzenie keyup i down, a następnie znaleźć poprzednie lub następne, które muszę wybrać, a następnie ustawić, ale brzmi to jak dużo pracy. Zastanawiam się, czy jest lepszy sposób na zrobienie tego?

javascript

var myModel = new function() { 
    var self = this; 

    self.selectedResult = ko.observable(new MyObj()); 
    self.searchResults = ko.observableArray(); 
    self.navUpDown = function (item, evt) { 
     if (evt.keyCode == 38) { // up 
      var id = item.ID(); 
      // find previous one and set selectedResult 
     } 

     if (evt.keyCode == 40) { // down 
      var id = item.ID(); 
      // find next one and set selectedResult 
     } 
    }; 
}; 

html

<table class="table"> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>table header 1</th> 
      <th>table header 2</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: searchResults"> 
     <tr data-bind="css: { 'btn-info': $parent.selectedResult() == $data }, event: { keyup: $parent.navUpDown } "> 
      <td> 
       <button class="btn btn-small" data-bind="click: $parent.selectResult">Select</button> 
      </td> 
      <td data-bind="text: data1"></td> 
      <td data-bind="text: data2"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

myślę, że to jest to, czego szukasz.

var myModel = new function() { 
     var self = this; 
     self.selectResult = function (item) { 
      self.selectedResult(item); 
     }; 
     self.selectedResult = ko.observable(); 
     self.searchResults = ko.observableArray([{ 
      data1: "1", 
      data2: "2" 
     }, { 
      data1: "2", 
      data2: "2" 
     }, { 
      data1: "3", 
      data2: "2" 
     }]); 


     self.selectPrevious = function() { 
      var index = self.searchResults().indexOf(self.selectedResult()) - 1; 
      if (index < 0) index = 0; 
      self.selectedResult(self.searchResults()[index]); 
     }; 

     self.selectNext = function() { 
      var index = self.searchResults().indexOf(self.selectedResult()) + 1; 
      if (index >= self.searchResults().length) index = self.searchResults().length - 1; 
      self.selectedResult(self.searchResults()[index]); 
     }; 


    }; 
ko.applyBindings(myModel); 

$(window).keyup(function (evt) { 
    if (evt.keyCode == 38) { 
     myModel.selectPrevious(); 
    } else if (evt.keyCode == 40) { 
     myModel.selectNext(); 
    } 
}); 

See Fiddle

Mam nadzieję, że to pomaga.

Answer 2

To faktycznie nie jest trudno znaleźć next i prev

Na przykład

$(window).keyup(function (evt) { 
    if (evt.keyCode == 38) { // up 
     $('tbody tr:not(:first).selected').removeClass('selected').prev().addClass('selected') 
    } 
    if (evt.keyCode == 40) { // down 
     $('tbody tr:not(:last).selected').removeClass('selected').next().addClass('selected') 
    } 
}); 

FIDDLE