wake-up-neo.com

jqgrid reload grid nach erfolgreicher Inline-Aktualisierung/Inline-Erstellung des Datensatzes

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 erstellt, weiß aber nicht, wo ich sie einfügen soll. Ich habe versucht:

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

dies wird jedoch bereits aufgerufen, wenn der Benutzer in eine Reihe klickt. Der Code oben erlaubt dem Benutzer, in eine Zeile zu klicken, und wenn Sie die Eingabetaste drücken, werden die Daten übermittelt und der Datensatz wird aktualisiert oder erstellt. 

Nachdem der Benutzer ein neues Objekt erstellt hat, muss ich das Raster neu laden, da ich die Objekt-ID des neu erstellten Objekts benötige, um diese Zeile weiter bearbeiten zu können.

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 zukünftige Verwendung. Alle Benutzer, die mit js grids beginnen, haben möglicherweise auch einen Blick auf Slickgrid , da ich von jqgrid zu slickgrid gewechselt habe und sie nur empfehlen kann.

20
Thomas Kremmel

Hier ist die Syntax der Funktion editRow

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

oneditfunc : feuert nach erfolgreichem Zugriff auf die Zeile zum Bearbeiten, vorheriger Benutzer Zugriff auf die Eingabe gewähren Felder. Die ID der Zeile wird als .__ übergeben. Parameter für diese Funktion.

succesfunc : falls definiert, diese Funktion wird unmittelbar nach dem .__ aufgerufen. Anfrage ist erfolgreich. Diese Funktion Die von der .__ zurückgegebenen Daten werden übergeben. Server. Abhängig von den Daten aus Server; Diese Funktion sollte .__ zurückgeben. richtig oder falsch.

aftersavefunc : falls definiert, diese Funktion wird aufgerufen, nachdem die Daten .__ sind. auf dem Server gespeichert. Übergebene Parameter Zu dieser Funktion gehören die Rowid und die Antwort von der Serveranfrage.

Wenn Sie nach dem Speichern der Zeile das Raster neu laden möchten, sollte der Aufruf der editRow-Methode wie folgt lauten.

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

Ich habe Ihre reload - Funktion zugewiesen, die das Raster für den ' aftersavefunc ' - Parameter neu lädt

die Reload-Methode selbst sollte wie folgt definiert werden

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

Versuche dies

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

//

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


//
3
aamir sajjad

Nun, 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");
  }
0
ymakux

Schauen Sie sich die saveRow-Methode an:

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

dies definiert zwei Callbacks (successfuncs, aftersavefunc), die aufgerufen werden sollen, wenn die Anforderung erfolgreich abgeschlossen wurde bzw. nachdem die Daten gespeichert wurden.

0
kgiannakakis

Ich denke, dass afterSaveCell am besten für Sie funktionieren wird (afterSubmitCell könnte auch funktionieren, aber es scheint einen bestimmten Rückgabewert zu erfordern. afterEditCell passiert, bevor der Server-Treffer auftritt, daher ist es zu früh).

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 erneute Laden des gesamten Gitters ist jedoch angesichts der Informationen, die Sie bisher beschrieben haben, wahrscheinlich übertrieben. Wenn die übermittelten Informationen nicht serverseitig verarbeitet werden (dh die Daten in der Datenbank können sich nach dem Speichern unterscheiden), erscheint mir das Neuladen nach einer einfachen Bearbeitung als Zeitverschwendung.

Wenn Sie wiederum eine neue Zeile erstellen, scheint es einfacher zu sein, die neue ID einfach vom Submit abzurufen und die einzelnen Änderungen in jqGrid vorzunehmen, es sei denn, es gibt nur serverseitige Daten. Am Ende hängt es jedoch stark davon ab, wie lange es dauert, die gesamte Tabelle neu zu laden.

0
Rob Van Dam