jqgrid Gitter nach erfolgreichem Inline-Update/Inline-Erstellung von Datensatz neu laden

Question

Ich frage mich, wie ich ReloadGrid nach einer Inline-Bearbeitung einer Zeile auslösen kann.

<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"); 
    } 

Ich habe bereits eine Reload-Methode, aber ich bin mir nicht sicher, wo sie setzt in Ich habe versucht:.

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

aber dies ist bereits aufgerufen, wenn der Benutzer in eine anklickt Reihe. Der obige Code ermöglicht dem Benutzer, in eine Zeile zu klicken, und wenn Sie die Eingabetaste drücken, werden die Daten übermittelt und der Datensatz aktualisiert oder erstellt.

Nachdem der Benutzer ein neues Objekt erstellt habe, muss ich das Raster neu laden, da ich die Objekt-ID des neu erstellten Objekts benötige, um die weitere Bearbeitung dieser Zeile vorzunehmen.

Edit: Die Lösung:

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; 
       } 
       } 
      }, 

Update: Für die Zukunft. Alle Benutzer, die mit js-Grids beginnen, können sich auch einen Blick auf Slickgrid werfen, da ich von jqgrid zu slickgrid wechselte und es nur weiterempfehlen kann.

Answer 1

ist die Syntax der EditRow Funktion

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

oneditfunc: fires after successfully accessing the row for editing, prior to allowing user access to the input fields. The row's id is passed as a parameter to this function.

succesfunc: if defined, this function is called immediately after the request is successful. This function is passed the data returned from the server. Depending on the data from server; this function should return true or false.

aftersavefunc: if defined, this function is called after the data is saved to the server. Parameters passed to this function are the rowid and the response from the server request.

In Ihrem Fall, wenn Sie Raster neu geladen wollen, nachdem die Zeile mit dem Aufruf an EditRow Methode gespeichert wird, sollte wie folgt lesen.

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

Ich habe Ihre reload Funktion zugeordnet, die das Netz nachlädt für 'aftersavefunc' Parameter

die Reload-Methode selbst definiert werden sollte wie folgt

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

Answer 2

Werfen Sie einen Blick auf die saveRow Methode:

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

die zwei Callback definiert (successfuncs, aftersavefunc) aufgerufen werden, wenn die Anforderung erfolgreich abgeschlossen ist und nach wurden die Daten jeweils gespeichert.

Answer 3

Aus den Dokumenten, denke ich afterSaveCell wird für Sie am besten funktionieren (afterSubmitCell auch funktionieren konnte, aber es scheint einen bestimmten Rückgabewert zu verlangen. afterEditCell geschieht, bevor die Hit-Server tritt zu früh das wird so sein).

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"); 
} 

Das Neuladen des gesamten Gitters ist jedoch wahrscheinlich übertrieben, wenn Sie die Informationen verwenden, die Sie bisher beschrieben haben. Wenn es keine serverseitige Verarbeitung von übermittelten Informationen gibt (was bedeutet, dass sich die Daten in der db nach einem Speichern unterscheiden könnten), erscheint mir das erneute Laden nach einer einfachen Bearbeitung als Zeitverschwendung.

Wenn Sie eine neue Zeile erstellen, scheint es, als ob es nur einfacher wäre, die neue ID aus dem Submit zu holen und dann diese individuelle Änderung in jqGrid vorzunehmen. Am Ende hängt es jedoch sehr davon ab, wie lange es dauert, den gesamten Tisch neu zu laden. Hier

Answer 4

Versuchen Sie, diese

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

// 

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


// 

Answer 5

Ок, jetzt copy-paste Lösung, die zumindest für mich funktioniert

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"); 
    }