2011-12-01 36 views
5

¿Hay algún evento en jqGrid para realizar una acción después de agregar una nueva fila?Cómo realizar una acción en jqGrid 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?

+0

Debe describir más exactamente qué tipo de "inserción" utiliza. Por ejemplo, usa la edición de formularios. El usuario hace clic en el botón "Agregar" y los datos se guardarán correctamente en el servidor después de que el usuario haga clic en el botón "Enviar". Desea realizar alguna acción (modificar la respuesta del servidor) después de recibir la respuesta del servidor que los datos se agregaron con éxito. ¿Enviaste desde el servidor el 'id' de la nueva fila o no? – Oleg

+0

Sí, el usuario hace clic en el botón "agregar", rellena los datos de la nueva fila, hace clic en el botón "enviar" y se crea una nueva fila en la tabla. No necesito modificar la respuesta del servidor. En este caso particular, solo necesito seleccionar la primera fila en la tabla, usando el método setSelection, pero necesito evitar ese comportamiento si se agregó la nueva fila. Es por eso que busco eventos para eso. – cincplug

+0

Y tengo una identificación de fila enviada desde el servidor. – cincplug

Respuesta

4

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.

+0

Gracias por esta respuesta integral. Por fin lo hice con la segunda solución. – cincplug

+0

@cincplug: ¡De nada! Creo que la pregunta será interesante para otras personas, así que +1 de mí a su pregunta. – Oleg

+0

Bueno, gracias, espero que lo haga :) – cincplug

Cuestiones relacionadas