jqGrid - ऊपर/नीचे तीर कुंजियों का उपयोग करके पंक्तियों नेविगेट करें?

Question

क्या ऊपर और नीचे तीर कुंजियों का उपयोग करके पंक्तियों के बीच नेविगेट करना संभव है?

उदाहरण के लिए, यदि ग्रिड में पहली पंक्ति का चयन किया गया है और उपयोगकर्ता 'डाउन' दबाता है, तो मैं ग्रिड को उस पंक्ति को अचयनित करना चाहता हूं और ग्रिड में अगली पंक्ति का चयन करना चाहता हूं।

इस बारे में jqGrid फ़ोरम में http://www.trirand.com/blog/?page_id=393/help/navigate-arraw-keys/ पर एक पोस्ट है, लेकिन सेल संपादन मोड सक्षम करना मेरे लिए एक समाधान नहीं है क्योंकि इससे कई अन्य अवांछित ग्रिड व्यवहार होंगे।

Answer 1

अंततः कीबोर्ड नेविगेशन को संस्करण 4.0 के रूप में jqGrid में जोड़ा गया है।

प्रारंभ करने के लिए, Demo Page पर जाएं और Functionality पर जाएं। Keyboard navigation।

निम्नलिखित कोड ऊपर/नीचे तीर कुंजी बाध्य करने के लिए प्रयोग किया जाता है:

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

लेकिन डेमो है, जैसा कि आप अन्य कुंजियों बाध्य करने के लिए और साथ ही विकल्प पारित कर सकते हैं:

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

के लिए अधिक जानकारी, कृपया दस्तावेज विकी में bindKeys method देखें।

Answer 2

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

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

}); 

Answer 3

यह केवल यदि आप स्क्रीन पर एक ग्रिड है काम करेंगे, क्योंकि यह दस्तावेज़ स्तर ऊपर/नीचे कुंजियों को ओवरराइड करता है लेकिन यह एक शुरुआत नहीं है।

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

इस प्रयोग

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

बहरहाल, यह यदि ग्रिड एक .disableSelection() इसे से जुड़ी है काम नहीं करेगा ऐसा करने के लिए। jquery अक्षम चयन किसी ऑब्जेक्ट में टेक्स्ट सामग्री के चयन को रोकता है, इसलिए यदि यह किसी ग्रिड पर लागू होता है, तो उपयोगकर्ता ग्रिड के भीतर टेक्स्ट का चयन नहीं कर सकता है और उसे क्लिपबोर्ड पर कॉपी कर सकता है।