Excel-like enter and tab key navigation in cell editing

问题:

one question for all advanced in jqgrid.

i have to code this usecase:

In jqGrid there are two editable columns. I have to use cell editing. User click to one editable cell and when he presses 'Enter' key, i select next editable cell UNDER actual one.

Otherwise, when he hits 'tab' key, i select next editable cell

• if actual cell is last, i set the nearest editable cell in the next line or
• if not, i select next editable cell in the actual row.

if i had better reputation, I could have uploaded an image to demonstrate desired situation.

thanks a lot.

回答1:

Ahoj!

To bind editable cell to your custom event handler there are common setting in jqGrid: dataEvents property of editoptions. Absolutely the same settings exist for the searching in jqGrid. You can find some code examples here, here and here. You will probably needed to use cell editing methods inside of the keyboard event handler to be able to end editing of one cell and to start editing of another one.

If you will have problem in the implementation you can append your question with the code example and then one can try to modify it.

回答2:

your answer helps me a lot and directs me to right solution, although i spent longer than 3 hours to write right code, but i managed this :)

thanks a lot.

to sum up:

i defined 2 variables:

var selICol; //iCol of selected cell var selIRow; //iRow of selected cell 

i set them in beforeEditCell events:

beforeEditCell : function(rowid, cellname, value, iRow, iCol) {     selICol = iCol;     selIRow = iRow; }, 

and then in editoptions for both editable cells i set:

first editable cell in row (Inventúrny stav in the picture), behaviour on press tab to select next editable cell is default

editoptions: {     dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },     dataEvents: [         {              type: 'keydown',              fn: function(e) {                  var key = e.charCode || e.keyCode;                 if (key == 13)//enter                 {                     setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);                 }             }         }      ] } 

second editable cell in row (Sklad. cena in the picture) - i manually set iCol for next editable cell in the next row

editoptions: {     dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },     dataEvents: [         {              type: 'keydown',              fn: function(e) {                  var key = e.charCode || e.keyCode;                 if(key == 9)   // tab                 {                     setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, 4, true);", 100);                 }                 else if (key == 13)//enter                 {                     setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);                 }             }         }      ] } 

回答3:

I realize this is an old topic, but I recently wrestled with this and thought I would share the approach that worked for me:

jQuery('#grid').jqGrid({   ...,     cellEdit: true,  // Make sure we are using cell edit   afterEditCell: function(rowid, cellname, value, iRow, iCol) {      // Get a handle to the actual input field     var inputControl = jQuery('#' + (iRow) + '_' + cellname);      // Listen for enter (and shift-enter)     inputControl.bind("keydown",function(e) {        if (e.keyCode === 13) {  // Enter key:         var increment = e.shiftKey ? -1 : 1;          // Do not go out of bounds         var lastRowInd = jQuery("#grid").jqGrid("getGridParam","reccount")         if ( iRow+increment == 0 || iRow+increment == lastRowInd+1)           return;   // we could re-edit current cell or wrap         else           jQuery("#grid").jqGrid("editCell",iRow+increment,iCol,true);       }     }); // End keydown binding   }) }); // End jqGrid initialization 

I came up with this approach after reading how jqGrid's editCell function deals with tab and enter keys during an edit operation. jqGrid's keydown binding should fire first, followed by this one. This code simply tells it to start an edit in the next row after jqGrid's ENTER handler is processed. It works exactly like tab does now, keeping the edit control open.

I was never able to fully decipher the editoptions: { dataEvents:... } structure, so that might be a better approach. If so, feel free to explain how it is superior.

回答4:

{     type: 'keydown',     fn: function(e) {         var key = e.charCode || e.keyCode;         //TAB         if(key == jq.ui.keyCode.TAB) {              setTimeout(function() {                 jq('#' + currentRowId + '_nextColName').focus();                jq('#' + currentRowId + '_nextColName').select();               }, 500);         }         //ENTER         else if (key == jq.ui.keyCode.ENTER) {              var nextRow = parseInt(currentRowId) + 1;              jq('#' + currentRowId + '_thisColName').blur();              jq('#' + nextRow + '_firstColName').select();         }     } } 

文章来源: Excel-like enter and tab key navigation in cell editing