Cómo realizar una acción en jqGrid después de agregar una nueva fila

Question

¿Hay algún evento en jqGrid para realizar una acción después de agregar una nueva fila?

Veo en jqGrid wiki que hay un evento afterInsertRow, pero aparentemente se desencadena siempre que jqGrid "inserte" filas en la tabla mientras se muestra la tabla.

Entonces, ¿qué debo usar cuando quiero hacer algo después de que el usuario "inserta" (guarda) una nueva fila? O bien, ¿hay alguna variable que me permita "saber" que se agregó la nueva fila?

Answer 1

El problema principal es que para poder seleccionar la fila necesita conocer la identificación de la nueva fila. En la mayoría de los casos, la id será generada por la base de datos donde guarda los datos en el servidor. Entonces, el primer requisito para su código de servidor es devolver el id en la nueva fila en la respuesta del servidor en la operación "agregar".

Por ejemplo, su código de servidor devuelve la identificación de su fila como la respuesta en la operación "agregar".

$("#list").jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, { 
    /*Add options:*/ 
    reloadAfterSubmit: false, 
    afterSubmit: function (response) { 
     return [true, '', response.responseText]; 
    }, 
    addedrow: "last", // add new row at the end of grid 
    afterComplete: function (response, postdata) { 
     // this.gbox is the string like "#gbox_list" 
     var gridId = this.gbox.substr(6); 
     //if (postdata.oper === "add") { 
     // // highlight the new "added" row 
     // var row = $("#" + $.jgrid.jqID(postdata.id)); 
     // row.effect("highlight", {}, 3000); 
     //} 
     $('#' + gridId).jqGrid('setSelection', postdata.id); 
    } 
}); 

En la parte comentada de afterComplete I que se muestra cómo se puede utilizar jQuery UI highlight efecto para resaltar la nueva fila añadida (ver the old answer). Puede ser una alternativa a la selección de la fila. También puede usar efectos de selección y resaltado.

La opción reloadAfterSubmit: false tiene al menos dos inconvenientes.

1. Si el uso uso ordenadas datos en la cuadrícula (sortname parámetro de jqGrid no está vacío) las filas de la cuadrícula se no correctamente ordenados después de la nueva fila se añadirá como la primera o como la última fila en la grilla
2. Si la cuadrícula ya tiene las filas máximas por página (definida por el parámetro rowNum), la adición de una nueva fila seguirá a la cuadrícula con demasiadas filas por página.

Así que usted puede hacer lo siguiente

var idToSelect; 

$("#list").jqGrid({ 
    // ... all jqGrid options 
    loadComplete: function() { 
     if (idToSelect) { 
      $(this).jqGrid('setSelection', idToSelect); 
      //$("#" + $.jgrid.jqID(idToSelect)).effect("highlight", {}, 3000); 
      idToSelect = undefined; 
     } 
    } 
}).jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, { 
    /*Add options:*/ 
    afterSubmit: function (response) { 
     // save the id of new row. If the format of the data returned from 
     // the server is different you should change the next row 
     // corresponds to the returned data. For example if the server returns 
     // back JSON data in the form {"myId":"123"} you should use 
     // $.parseJSON(response.responseText).myId 
     // instead of response.responseText below 
     idToSelect = response.responseText; 
     return [true, '', response.responseText]; 
    } 
}); 

En el caso de la nueva fila añadida será seleccionado después de la carga de la red.