jQuery – jqGrid – enviar botones en cada fila

Usando jqGrid 4.5.2 y jQuery 1.9.1. Tengo un jqGrid en una página web que muestra filas de datos devueltos de una consulta. Cada fila de la cuadrícula tendrá 2 botones de submit que, de forma predeterminada, están deshabilitados, pero se habilitan dentro del evento onSelectRow del jqGrid.

Estoy agregando los botones en el siguiente código:

 var ids = $("#myGrid").jqGrid("getDataIDs"); for (var i=0;i < ids.length;i++) { var cl = ids[i]; sm = ""; ca = ""; $("#myGrid").jqGrid("setRowData",ids[i], {msgAct:sm+ca}); } 

Tenga en cuenta que los botones de submit están desactivados de forma predeterminada.

Cuando se selecciona una fila en la cuadrícula, quiero que los dos botones de esa fila solo estén enabled . También en el evento onSelectRow es donde configuro las variables para usarlas más adelante.

 var gridRow = $(this).jqGrid("getRowData",id); var srow = $(this).jqGrid("getGridParam","selrow"); 

Otro comportamiento que quiero en onSelectRow

No desea poder hacer clic fuera de la fila: se debe hacer clic en uno de los 2 botones de envío para ir a otra fila en la cuadrícula. Un envío realiza un conjunto de acciones y luego restablece la cuadrícula (no se selecciona nada y todos los botones de todas las filas están desactivados).
El otro botón de envío (un botón Cancel ) no realiza la acción en el paso anterior, pero restablece la cuadrícula (no se selecciona nada y todos los botones de todas las filas están desactivados).

He intentado varias cosas para habilitar los botones en la fila seleccionada, pero o habilita solo la primera fila, todas las filas o ninguna fila. He mirado el valor en srow arriba y puedo confirmar que tiene la ID correcta para la fila.

¿Cómo selecciona los botones de envío en la fila seleccionada para habilitarlos (y para mantener todos los demás botones en la cuadrícula desactivados)?

¡Gracias!

EDITAR:

Gracias a @Oleg y sus sugerencias y seguimiento, pude resolver mi pregunta. Las respuestas de @ Oleg me pusieron en el camino correcto.

En el colModel coloco el msgAct para obtener los botones en cada fila y asociados con esa fila.

 {name: "msgAct", width: col4width, align: "center", formatter: function() { return "" + "" }} 

En OnSelectRow , también utilicé su sugerencia para desactivar todos los botones en el jqGrid y luego activar los de la fila que había seleccionado.

 // disable all resendMsg & cancelMsg buttons in the grid $(this).find("input[name=resendMsg]").attr("disabled","disabled"); $(this).find("input[name=cancelMsg]").attr("disabled", "disabled"); // now enable the buttons for the current row only $(tr).find("input[name=resendMsg]").removeAttr("disabled"); $(tr).find("input[name=cancelMsg]").removeAttr("disabled"); 

También tenía otro código allí para deshabilitar cualquier otra lista desplegable en la página, de modo que solo una de las tres cosas podría suceder:

  1. el usuario puede hacer clic en el botón Re-enviar
  2. El usuario puede hacer clic en el botón Cancelar
  3. El usuario puede hacer clic en otra fila en el jqGrid

Dado que el # 3 anterior desencadenaría otro evento OnSelectRow , quería que el usuario tuviera que hacer algo con la fila seleccionada.

Usando la sugerencia de @ Oleg para desactivar todos y luego activar solo los botones de la fila seleccionada, también puse el código de evento de clic para cada uno de ellos en el evento onSelectRow .

 $(tr).find("input[name=cancelMsg]").click(function() { // disable all resendMsg & cancelMsg buttons in the grid $(this).find("input[name=resendMsg]").attr("disabled","disabled"); $(this).find("input[name=cancelMsg]").attr("disabled", "disabled"); ....do other stuff ..... ReloadGrid(); }); $(tr).find("input[name=resendMsg]").click(function() { ReSend(gridRow.Col1, gridRow.Col2); // disable all resendMsg & cancelMsg buttons in the grid $(this).find("input[name=resendMsg]").attr("disabled","disabled"); $(this).find("input[name=cancelMsg]").attr("disabled", "disabled"); .... do other stuff .... }); }, 

La grilla ahora hace lo que quiero que haga. Por ejemplo –

  • Cuando se carga la cuadrícula, todas las filas de la cuadrícula tienen una columna msgAct, y esa columna tiene un botón Reenviar y un botón Cancelar, los cuales están presentes, pero en gris.
  • Si se selecciona la Fila # 3, los botones de reenvío y cancelación de msgAct de la Fila # 3 ahora están activados y se puede hacer clic. Todas las demás filas de la cuadrícula tienen los botones en esas filas aún en gris.
  • Si el usuario hace clic en Reenviar o en Cancelar, se lleva a cabo la acción adecuada para esa fila en la cuadrícula. Reenviar agrega otra fila a la cuadrícula, mientras que Cancelar restablece la selección y la cuadrícula aparece como lo hizo cuando se cargó.
  • Las únicas opciones disponibles para el usuario son hacer clic en Reenviar, Cancelar o para seleccionar una fila diferente. La selección de una fila diferente luego habilita los botones en esa fila (deshabilitando los que están en la selección anterior), y al hacer clic en cualquiera de ellos se inicia la acción apropiada para esa fila.

La pregunta ahora podría ser: ¿hay una mejor manera de hacer esto?

Gracias @Oleg por tu valiosa ayuda!

El principal problema es crear datos HTML erróneos.

Agregue botones con los mismos identificadores ( id='resendMsg' e id='cancelMsg' ) en todas las filas de la cuadrícula, pero el atributo id debe ser único en toda la página HTML. Si intentas habilitar el botón indexándolo por ID, probablemente encontrarás solo el primer botón que tiene la ID. Por lo general, los botones de la primera fila. Puedes usar el atributo name lugar del atributo id

Otro problema es el uso de un valor incorrecto para el atributo deshabilitado . Debería usar disabled='disabled' lugar de disabled='true' si desea que el código funcione correctamente en todos los navegadores web.

La mejor manera de crear tales botones es usar un formateador personalizado . Puede agregar propiedades de formatter en el msgAct que crearían los botones directamente . El código podría ser sobre lo siguiente

 colModel: [ ... { name: "msgAct", width: 150, formatter: function () { return "" + "" }} ], onSelectRow: function (rowid) { var tr = $(this).jqGrid("getInd", rowid, true); // first disable all "resendMsg" buttons in the grid $(this).find("input[name=resendMsg]").attr("disabled", "disabled"); // then enable the button from the current row only $(tr).find("input[name=resendMsg]").removeAttr("disabled"); }, gridview: true 

La respuesta describe las ventajas del uso gridview: true formateadores gridview: true y personalizados.