jqGrid - Điều hướng các hàng bằng các phím mũi tên lên/xuống?

Question

Có thể điều hướng giữa các hàng bằng các phím mũi tên Lên và Xuống không?

Ví dụ: nếu hàng đầu tiên trong lưới được chọn và người dùng nhấn 'xuống', tôi muốn lưới để bỏ chọn hàng đó và chọn hàng tiếp theo trong lưới.

Có một bài đăng trong Diễn đàn jqGrid về điều này tại http://www.trirand.com/blog/?page_id=393/help/navigate-arraw-keys/, nhưng bật chế độ chỉnh sửa ô không phải là giải pháp cho tôi vì nó sẽ gây ra nhiều hành vi lưới không mong muốn khác.

Answer 1

Điều hướng bàn phím cuối cùng đã được thêm vào jqGrid như phiên bản 4.0.

Để bắt đầu, hãy truy cập Demo Page và điều hướng đến Functionality | Keyboard navigation.

Các mã sau đây được sử dụng để ràng buộc các phím lên/xuống mũi tên:

jQuery("#keynav").jqGrid('bindKeys'); 

Nhưng khi chương trình demo, bạn có thể vượt qua tùy chọn để ràng buộc các phím khác cũng như:

// Bind the navigation and set the onEnter event 
jQuery("#keynav").jqGrid('bindKeys', { 
     "onEnter" : function(rowid) { 
        alert("You enter a row with id:"+rowid) 
     } 
}); 

Đối biết thêm thông tin, vui lòng tham khảo bindKeys method trong wiki tài liệu.

Answer 2

$(document).keypress(function(e) { 

if(e.keyCode == 40) { //down arrow 
$('#nextElementId').click(); 
} 
if(e.keyCode == 38 { //up arrow 
$('#previousElementId'.click(); 
} 

}); 

Answer 3

Điều này sẽ chỉ hoạt động nếu bạn có một lưới trên màn hình vì nó ghi đè lên các phím lên/xuống cấp tài liệu nhưng đó là khởi đầu.

 $(document).keypress(function(e) 
     { 
      if(e.keyCode == 38 || e.keyCode == 40) //up/down arrow override 
      { 
       var gridArr = $('#GridID').getDataIDs(); 
       var selrow = $('#GridID').getGridParam("selrow"); 
       var curr_index = 0; 
       for(var i = 0; i < gridArr.length; i++) 
       { 
        if(gridArr[i]==selrow) 
         curr_index = i; 
       } 

       if(e.keyCode == 38) //up 
       { 
        if((curr_index-1)>=0) 
         $('#GridID').resetSelection().setSelection(gridArr[curr_index-1],true); 
       } 
       if(e.keyCode == 40) //down 
       { 
        if((curr_index+1)<gridArr.length) 
         $('#GridID').resetSelection().setSelection(gridArr[curr_index+1],true); 
       } 
      } 

     }); 

Answer 4

Để thực hiện điều này sử dụng

jQuery("#myGrid").jqGrid('bindKeys'); 

Tuy nhiên, điều này sẽ không hoạt động nếu lưới có .disableSelection() gắn liền với nó. Lựa chọn vô hiệu hóa jquery dừng việc lựa chọn nội dung văn bản trong một đối tượng, vì vậy nếu điều này được áp dụng cho một lưới, người dùng không thể chọn văn bản trong một lưới và sao chép nó vào clipboard.