Làm cách nào để liên kết phím mũi tên lên và xuống để cho phép điều hướng qua các hàng trong bảng?

Question

Tôi đang hiển thị kết quả tìm kiếm với một bảng. Mỗi kết quả có một nút để người dùng nhấp vào để hiển thị đầy đủ chi tiết của nó. Đó là hoạt động tốt.

Điều tôi cũng muốn là có thể điều hướng kết quả tìm kiếm bằng cách sử dụng mũi tên lên và xuống của bàn phím.

Bây giờ, người dùng phải nhấp vào nút Select hoặc tab đến nút và nhấn space bar.

Tôi cho rằng tôi có thể bẫy sự kiện không hoạt động và sau đó tìm thấy sự kiện trước hoặc sau mà tôi cần chọn và sau đó đặt nó, nhưng có vẻ như rất nhiều công việc. Tôi tự hỏi nếu có một cách tốt hơn để làm điều đó?

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

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm.

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

Tôi hy vọng nó giúp.

Answer 2

Nó thực sự không phải là khó để tìm next và prev

Ví dụ

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