cuadrícula de recarga jqgrid después de la actualización en línea/creación en línea exitosa del registro

Question

Me pregunto cómo puedo disparar reloadGrid después de una edición en línea de una fila.

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

Ya he creado un método de recarga, pero no estoy seguro de dónde ponerlo en Traté:.

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

pero esto ya se llama cuando el usuario hace clic en una fila. El código anterior permite al usuario hacer clic en una fila y al presionar Enter, los datos se envían y el registro se actualiza o se crea.

Después de que el usuario creó un nuevo objeto, tengo que volver a cargar la cuadrícula, ya que necesito el ID del objeto recién creado, para poder editar esta fila.

Editar: La solución:

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

Actualización: Para referencia futura. Todos los usuarios que comienzan con js grids también pueden echar un vistazo a Slickgrid cuando cambié de jqgrid a slickgrid y solo puedo recomendarlo.

Answer 1

Ésta es la sintaxis de la función editRow

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.

En su caso si desea rejilla vuelve a cargar después de la fila se guarda la llamada al método editRow debe decir lo siguiente.

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

he asignado su recarga función que vuelve a cargar la rejilla de 'aftersavefunc' parámetro

el método de recarga en sí debería definirse de la siguiente manera

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

Answer 2

Tenga una mirada en el método saveRow:

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

que define dos de devolución de llamada (successfuncs, aftersavefunc) para ser llamado, cuando la solicitud se ha completado con éxito y después de que los datos se han salvado, respectivamente.

Answer 3

A partir de los documentos, creo afterSaveCell funciona mejor para usted (afterSubmitCell podría funcionar tan bien, pero parece requerir un valor de retorno específico. afterEditCell sucede antes de que llegara el servidor se produce de modo que será demasiado pronto).

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

Sin embargo, volver a cargar toda la red es probablemente exagerado dada la información que ha descrito hasta ahora. A menos que haya procesamiento del lado del servidor de la información enviada (lo que significa que los datos en el archivo db pueden ser diferentes después de guardar), volver a cargar después de una edición simple me parece una pérdida de tiempo.

En cuanto a cuando se está creando una nueva fila, de nuevo, a menos que exista una munging de datos del lado del servidor parece que sería más fácil obtener la nueva identificación del envío y luego hacer ese cambio individual en jqGrid. Sin embargo, al final depende mucho de cuánto tiempo lleve cargar toda la mesa.

Answer 4

Prueba este

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

// 

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


// 

Answer 5

Ок, ahora copiar y pegar solución que funciona, al menos para mí

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