web-dev-qa-db-fra.com

jqgrid recharge la grille après une mise à jour/création en ligne réussie d'un enregistrement

Je me demande comment je peux déclencher reloadGrid après une modification en ligne d'une ligne. 

<script type="text/javascript">

    jQuery(document).ready(function(){
      var lastcell; 
      jQuery("#grid").jqGrid({
          url:'{{ json_data_handler }}?year={{ get_param_year }}&month={{ get_param_month }}&project_id={{ get_param_project_id }}',
          datatype: "json",
          mtype: 'GET',
          colNames:['hour_record_pk', 'project_pk', 'weekday', 'date', 'sum', 'description'],
          colModel:[
                    {name:'hour_record_pk',index:'hour_record_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'project_pk',index:'project_pk', width:55, sortable:false, editable:true, editoptions:{readonly:true,size:10}},
                    {name:'weekday',index:'weekday', width:300, editable:false, sortable:false},
                    {name:'date_str',index:'date_str', width:300, editable:true, sortable:false, editoptions:{readonly:true}},
                    {name:'sum',index:'sum', width:100, editable:true, sortable:true,editrules:{number:true,minValue:0,maxValue:24,required:true}},
                    {name:'description',index:'description', width:600, editable:true, sortable:false,},
               ],
         jsonReader : {
              repeatitems:false
         },
          rowNum:31,
          rowList:[10,20,31],
          //pager: jQuery('#gridpager'),
          sortname: 'id',
          viewrecords: true,
          sortorder: "asc",
          width: 800,
          height: 750,
          caption:"Hour Record Overview",
          reloadAfterEdit: true, //seems to have no effect
          reloadAfterSubmit: true, //seems to have no effect
          onSelectRow: function(id){    
                if(id && id!==lastcell){
                    jQuery('#grid').jqGrid('restoreRow',lastcell);
                    jQuery('#grid').jqGrid('editRow',id,true);
                    lastcell=id;
                    }
                }, 
          editurl:"{% url set_hour_record_json_set %}"
     }).navGrid('#gridpager');
    });

function reload(result) {
    $("#grid").trigger("reloadGrid"); 
    }

J'ai déjà créé une méthode de rechargement, mais je ne sais pas où l'insérer. J'ai essayé:

jQuery('#grid').jqGrid('editRow',id,true,reload());

mais ceci est déjà appelé lorsque l'utilisateur clique sur une ligne. Le code ci-dessus permet à l’utilisateur de cliquer sur une ligne et en appuyant sur entrer, les données sont soumises et l’enregistrement mis à jour ou créé. 

Une fois que l'utilisateur a créé un nouvel objet, je dois recharger la grille, car j'ai besoin de l'identifiant d'objet du nouvel objet créé, afin de pouvoir éditer davantage cette ligne.

Edit: La solution:

onSelectRow: function(row_id){
             if(row_id != null) {
                if(row_id !== last_selected_row) {
                    jQuery('#grid').jqGrid('restoreRow',last_selected_row);
                    jQuery('#grid').jqGrid('saveRow',row_id)
                           .editRow(row_id, true,false,reload);
                    last_selected_row = row_id; 
                } else {
                    last_selected_row=row_id;
                }
              }
            },

Mise à jour: pour référence future. Tous les utilisateurs commençant par les grilles js peuvent également consulter Slickgrid car je suis passé de jqgrid à slickgrid et ne peux que le recommander.

jqueryjqgrid
20
Thomas Kremmel

Voici la syntaxe de la fonction editRow

jQuery("#grid_id").jqGrid('editRow', rowid, keys, oneditfunc, succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc);

oneditfunc : se déclenche après avoir réussi accéder à la ligne pour la modifier, avant permettant à l'utilisateur d'accéder à l'entrée des champs. L'identifiant de la ligne est passé en tant que paramètre à cette fonction.

succesfunc : si défini, cette fonction est appelé immédiatement après le demande est réussie. Cette fonction est passé les données renvoyées par le serveur. En fonction des données de serveur; cette fonction devrait retourner vrai ou faux.

aftersavefunc : si défini, cela La fonction est appelée après que les données soient enregistré sur le serveur. Paramètres passés à cette fonction sont le rowid et le réponse de la demande du serveur.

Dans votre cas, si vous souhaitez recharger la grille après l'enregistrement de la ligne, l'appel à la méthode editRow doit se lire comme suit.

jQuery('#grid').jqGrid("editRow", id, true, '', '', '', '', reload)

J'ai assigné votre fonction reload qui recharge la grille pour le paramètre ' aftersavefunc '

la méthode de rechargement elle-même devrait être définie comme suit

function reload(rowid, result) {
  $("#grid").trigger("reloadGrid"); 
}
38
Vinodh Ramasubramanian

Essaye ça

      $("#grid").jqGrid('editRow', rowid, true, null, null, null, {}, aftersavefunc);

//

        function aftersavefunc(rowid, result) {
        $("#grid").trigger("reloadGrid");
    }


//
3
aamir sajjad

Maintenant, solution de copier-coller qui fonctionne au moins pour moi

 onSelectRow: function(id){
    $('#grid').jqGrid("editRow", id, true, '', '', '', '', reloadTable);
 },
 // more confir

 // reload table after submit. Put it somewhere in your JS file
  function reloadTable(result) {
    $('#grid').trigger("reloadGrid");
  }
0
ymakux

Regardez la méthode saveRow:

saveRow (rowid, succesfunc, url, extraparam, aftersavefunc, onerrorfunc)

qui définit deux callback (successfuncs, aftersavefunc) à appeler, lorsque la demande est complétée avec succès et après que les données ont été sauvegardées.

0
kgiannakakis

Pour ce qui est de la documentation, je pense que afterSaveCell fonctionnera mieux pour vous (afterSubmitCell pourrait également fonctionner, mais elle semble exiger une valeur de retour spécifique. afterEditCell survient avant que la panne ne se produise, ce sera donc trop tôt).

jQuery('#grid').jqGrid('editRow', id, true, reload);

jQuery(document).ready(function(){
    var lastcell; 
   jQuery("#grid").jqGrid({

      // [snip earlier config]

      onSelectRow: function(id){    
            if(id && id!==lastcell){
                jQuery('#grid').jqGrid('restoreRow',lastcell);
                jQuery('#grid').jqGrid('editRow',id,true);
                lastcell=id;
                }
            }, 
      editurl:"{% url set_hour_record_json_set %}",
      onAfterSaveCell: reload
   }).navGrid('#gridpager');
});

function reload(result) {
    $("#grid").trigger("reloadGrid"); 
}

Cependant, le rechargement de la totalité de la grille est probablement excessif compte tenu des informations que vous avez décrites jusqu'à présent. À moins d'un traitement côté serveur des informations soumises (ce qui signifie que les données de la base de données pourraient être différentes après une sauvegarde), le rechargement après une simple modification me semble une perte de temps.

Pour ce qui est de la création d’une nouvelle ligne, encore une fois, à moins que les données côté serveur ne soient mungées, il semble plus facile d’obtenir le nouvel ID de la soumission et d’apporter ensuite cette modification individuelle dans jqGrid. Cependant, au bout du compte, cela dépend beaucoup du temps nécessaire pour recharger tout votre tableau.

0
Rob Van Dam