jqGrid: Est-il possible de valider un changement de cellule en utilisant la tabulation au lieu d'appuyer sur Entrée?

Question

J'ai une simple modification en ligne dans ma grille et je souhaite valider la modification lorsque l'utilisateur quitte la zone de texte. Le comportement par défaut de jqGrid oblige l'utilisateur à appuyer sur 'Entrée' pour valider le changement, mais cela n'est pas intuitif pour nos utilisateurs.

texte de remplacement http://i32.tinypic.com/e62iqh.jpg

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

J'ai parcouru les événements fournis, mais ils surviennent tous lorsque l'utilisateur appuie sur "Entrée", ce que je veux éviter. Puis-je câbler quelque chose qui déclencherait une action lorsque l'utilisateur clique sur cette cellule?

Answer 1

Ma solution consistait à utiliser des sélecteurs et des événements de base jQuery indépendamment de la grille pour détecter cet événement. J'utilise les événements en direct et flou dans les zones de texte de la grille pour capturer l'événement. Les deux événements ne sont pas pris en charge en combinaison, ce hack a donc été la solution:

Simulation " focus " et "flou" dans la méthode jQuery .live ()

Answer 2

Pour l'édition en ligne, vous pouvez accomplir cela de plusieurs manières. Pour lier un événement onblur au champ de saisie à l'aide du déclencheur onSelectRow, éliminant ainsi le besoin de boutons d'édition et de sauvegarde, procédez comme suit:

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

Pour appliquer un gestionnaire d'événements live jQuery à toutes les entrées pouvant figurer dans une ligne (jqGrid nomme toutes les entrées sous le nom rowId_fieldName), lancez en boucle le nombre de lignes de votre grille et procédez comme suit:

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

Remarque: Pour utiliser le flou avec .live () comme ci-dessus, vous aurez besoin de jQuery 1.4 ou du correctif situé à l'adresse suivante: Simuler & focus; " et "flou" dans la méthode jQuery .live ()

Faites attention avec rowIds. Lorsque vous commencez à trier, à ajouter et à supprimer des lignes, vous risquez peut-être d’écrire des questions jQuery complexes pour convertir les identifiants de lignes en iRows ou en numéros de rangées.

Si vous êtes comme moi et que vous avez opté pour une modification de cellule individuelle, vous souhaiterez modifier le déclencheur afterEditCell à l'aide de quelque chose comme:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

J'espère que ça aide ..

Answer 3

C’est assez horrible, mais c’est mon point de vue sur ce problème, et c’est un peu plus simple et générique - il faut appuyer sur entrée par programme lorsque l’élément perd le focus:)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

Ajoutez ce code à votre code d'installation jqgrid.

Cela suppose que le dernier élément modifié est la seule chose avec .edit-cell en tant que parent td.

Answer 4

Je sais que cette question est ancienne, mais la réponse est obsolète.

Une variable globale appelée lastsel doit être créée et la suivante doit être ajoutée au code jqGrid

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },

Answer 5

J'ai eu le même problème et j'ai essayé les réponses ci-dessus. En fin de compte, j’ai opté pour une solution qui insère un " Enter " appuyez sur la touche lorsque l'utilisateur quitte l'onglet.

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}

Answer 6

Au lieu d'utiliser selectRow , utilisez CellSelect .

onCellSelect: function (row, col, content, event) {
    if (row != lastsel) {
            grid.jqGrid('saveRow', lastsel);
            lastsel = row;
        }           
        var cm = grid.jqGrid("getGridParam", "colModel");
        //keep it false bcoz i am calling an event on the enter keypress
        grid.jqGrid('editRow', row, false);

        var fieldName = cm[col].name;
        //If input tag becomes blur then function called.
          $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
        });

       //Enter key press event.
       $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
            var code = (e.keyCode ? e.keyCode : e.which);
            //If enter key pressed then save particular row and validate.
            if( code == 13 ){
                grid.jqGrid('saveRow', row);
                saveDataFromTable();
            }
        });
    }

// saveDataFromTable () est la fonction qui valide mes données.