Comment fermer l'éditeur de cellules?

Question

En utilisant jqGrid Je veux ouvrir un éditeur de cellule double-cliquez sur, donc mon code comprend cette partie:

ondblClickRow: function(rowid, iRow, iCol, e) 
    { 
    jQuery('#jqGrid').setGridParam({cellEdit: true}); 
    jQuery('#jqGrid').editCell(iRow, iCol, true); 
    jQuery('#jqGrid').setGridParam({cellEdit: false}); 
    } 

qui fonctionne très bien, mais je ne sais pas comment (auto-) à proximité l'éditeur de cellule, lorsque l'utilisateur clique en dehors de l'élément d'édition, ou appuyez sur ESC, TAB, ENTER, etc ...

Answer 1

le problème est que vous essayez de mettre en œuvre l'édition de cellule double-clic ce qui n'est pas supporté. Votre code actuel ne fonctionne pas parce que si la presse utilisateur Tab, Entrez ou Esc touche la nextCell, prevCell, saveCell ou restoreCell seront vraiment appelés, mais les tests de méthodes paramètre interne si cellEdit est true.

Pour montrer comment résoudre le problème que j'ai créé the demo qui utilise le code suivant:

cellsubmit: 'clientArray', 
ondblClickRow: function (rowid, iRow, iCol) { 
    var $this = $(this); 

    $this.jqGrid('setGridParam', {cellEdit: true}); 
    $this.jqGrid('editCell', iRow, iCol, true); 
    $this.jqGrid('setGridParam', {cellEdit: false}); 
}, 
afterEditCell: function (rowid, cellName, cellValue, iRow) { 
    var cellDOM = this.rows[iRow], oldKeydown, 
     $cellInput = $('input, select, textarea', cellDOM), 
     events = $cellInput.data('events'), 
     $this = $(this); 
    if (events && events.keydown && events.keydown.length) { 
     oldKeydown = events.keydown[0].handler; 
     $cellInput.unbind('keydown', oldKeydown); 
     $cellInput.bind('keydown', function (e) { 
      $this.jqGrid('setGridParam', {cellEdit: true}); 
      oldKeydown.call(this, e); 
      $this.jqGrid('setGridParam', {cellEdit: false}); 
     }); 
    } 
} 

MISE À JOUR: Si vous souhaitez annuler ou enregistrer les dernières modifications d'édition si l'utilisateur clique sur une autre cellule on devrait étendre le code avec les éléments suivants:

beforeSelectRow: function (rowid, e) { 
    var $this = $(this), 
     $td = $(e.target).closest('td'), 
     $tr = $td.closest('tr'), 
     iRow = $tr[0].rowIndex, 
     iCol = $.jgrid.getCellIndex($td); 

    if (typeof lastRowIndex !== "undefined" && typeof lastColIndex !== "undefined" && 
      (iRow !== lastRowIndex || iCol !== lastColIndex)) { 
     $this.jqGrid('setGridParam', {cellEdit: true}); 
     $this.jqGrid('restoreCell', lastRowIndex, lastColIndex, true); 
     $this.jqGrid('setGridParam', {cellEdit: false}); 
     $(this.rows[lastRowIndex].cells[lastColIndex]) 
      .removeClass("ui-state-highlight"); 
    } 
    return true; 
} 

The new demo montre les résultats.

MISE À JOUR 2: Vous pouvez également utiliser focusout pour annuler ou enregistrer les dernières modifications de modification. Voir one more demo qui utilisent le code:

ondblClickRow: function (rowid, iRow, iCol) { 
    var $this = $(this); 

    $this.jqGrid('setGridParam', {cellEdit: true}); 
    $this.jqGrid('editCell', iRow, iCol, true); 
    $this.jqGrid('setGridParam', {cellEdit: false}); 
}, 
afterEditCell: function (rowid, cellName, cellValue, iRow, iCol) { 
    var cellDOM = this.rows[iRow].cells[iCol], oldKeydown, 
     $cellInput = $('input, select, textarea', cellDOM), 
     events = $cellInput.data('events'), 
     $this = $(this); 
    if (events && events.keydown && events.keydown.length) { 
     oldKeydown = events.keydown[0].handler; 
     $cellInput.unbind('keydown', oldKeydown); 
     $cellInput.bind('keydown', function (e) { 
      $this.jqGrid('setGridParam', {cellEdit: true}); 
      oldKeydown.call(this, e); 
      $this.jqGrid('setGridParam', {cellEdit: false}); 
     }).bind('focusout', function (e) { 
      $this.jqGrid('setGridParam', {cellEdit: true}); 
      $this.jqGrid('restoreCell', iRow, iCol, true); 
      $this.jqGrid('setGridParam', {cellEdit: false}); 
      $(cellDOM).removeClass("ui-state-highlight"); 
     }); 
    } 
} 

MISE À JOUR 3: A partir de jQuery 1.8 devrait utiliser $._data($cellInput[0], 'events'); au lieu de $cellInput.data('events') pour obtenir la liste de tous les événements de $cellInput.

Answer 2

Déclarez la variable commune: -

var lastRowId=-1; 

    $(document).ready(function() { 
      // put all your jQuery goodness in here. 
    }); 
. 
. 
. 
. 

    ondblClickRow: function(rowid, iRow, iCol, e) 
    { 
     if(lastRowId!=-1) 
     $("#jqGrid").saveRow(lastRowId, true, 'clientArray'); 
     $('#jqGrid').setGridParam({cellEdit: true}); 
     $('#jqGrid').editCell(iRow, iCol, true); 
     lastRowId= rowid; 

    } 

Une fois que vous voulez terminer votre modifier

  $("#jqGrid").saveRow(jqMFPLastRowId, true, 'clientArray'); 




        (or) 

==================== ============================================= =====

Déclarez la variable commune: -

var lastRowId=-1; 
    $(document).ready(function() { 
      // put all your jQuery goodness in here. 
    }); 
. 
. 
. 
. 
    ondblClickRow: function (rowid, iRow, iCol) { 
     var $this = $(this); 
     $this.jqGrid('setGridParam', {cellEdit: true}); 
     $this.jqGrid('editCell', iRow, iCol, true); 
     $this.jqGrid('setGridParam', {cellEdit: false}); 
     lastRowId=rowid; 
    }, 

    afterEditCell: function (rowid, cellName, cellValue, iRow) { 
    if(lastRowId!=-1) 
     $("#jqGrid").saveRow(lastRowId, true, 'clientArray'); 
} 

Answer 3

// This worked Perfectly fine for me, hope will work for you as well. 
var selectedCellId; 
    var $gridTableObj = $('#jqGridTable'); 
    $gridTableObj.jqGrid({ 
     datatype : "jsonstring", 
     datastr : gridJSON, 
     height : ($(window).height() - 110), 
     width : ($(window).width() - 80), 
     gridview : true, 
     loadonce : false, 
     colNames : columnNames, 
     colModel : columnModel, 
     rowNum : gridJSON.length, 
     viewrecords : true, 
     subGrid : false, 
     autoheight : true, 
     autowidth : false, 
     shrinkToFit : true, 
     cellsubmit : 'clientArray', 
     cellEdit : true, 
     jsonReader : { 
      root : "rows", 
      repeatitems : false 
     }, 
     onCellSelect : function(id, cellidx, cellvalue) { // use this event to capture edited cellID 
      selectedCellId = cellidx; // save the cellId to a variable 
     }, 
     loadComplete : function(data) { 
      jQuery("tr.jqgrow:odd").addClass("oddRow"); 
      jQuery("tr.jqgrow:even").addClass("evenRow"); 
     } 
    }); 

// Joindre l'événement jqgrid "saveCell" pour enregistrer la cellule.

var gridCellWasClicked = false; 
window.parent.document.body.onclick = saveEditedCell; // attach to parent window if any 
document.body.onclick = saveEditedCell; // attach to current document. 
function saveEditedCell(evt) { 
    var target = $(evt.target); 
    var isCellClicked = $gridTableObj.find(target).length; // check if click is inside jqgrid 
    if(gridCellWasClicked && !isCellClicked) // check if a valid click 
     { 
     var rowid = $gridTableObj.jqGrid('getGridParam', 'selrow'); 
    $gridTableObj.jqGrid("saveCell", rowid, selectedCellId); 
    gridCellWasClicked = false; 
    } 
    if(isCellClicked){ 
     gridCellWasClicked = true; // flat to check if there is a cell been edited. 
    } 
};