Jqgrid recuperar datos, todos los renglones

Sin duda jqgrid tiene muy buenos complementos para editar enlinea y agregar diversos controles en las celdas,  cuando necesitas editar un renglon en el mismo grid, parece que siempre debes de tener un script o una editurl, para que te guarde en la bd, pero hay ocasiones en que no quieres guardar al momento, por ejemplo puedes necesitar que  en una tabla de productos, se capture el precio y que necesites sumar estos precios para compararlo con otra variable.

Estuve buscando la forma de hacerlo tipo inline editing, pero lo de editurl no me servia, asi que opte por meter text box dinamicos en el grid, esto en la parte del server, asi (jsp):

out.println(«<cell>»+row.get(«id_detalle_producto»)+»</cell>»);

out.println(«<cell><![CDATA[<input type=’text’ name='»+row.get(«id_detalle_producto»)+»_txt id='»+row.get(«id_detalle_producto»)+»_txt’></input>]]></cell>»);

Aqui lo que hago es ir insertando text box en una columna del grid, para que el user capture ahi el precio, ahora viene lo bueno, como recuperar todos los valores de esas cajas de texto, el jqgrid tiene varias opciones de recuperar esos datos, pero para este caso, no te trae el valor de la caja de texto, en su lugar te trae la etiqueta html completa.

Asi que lo hice de esta manera:

Si nos fijamos en el server, o sea donde formamos el xml o json, primero agregamos una columna con un identificador, luego agrego otra columna con un input type text, al cual le puse de nombre el identificador de un registro y le concatene el texto «_txt», o sea que quedaria como:

1,1_txt

2,2_txt

..

En la parte del js al formar el grid, pon la columna de id_detalle_producto como hidden, solo para estetica, el user no necesita verla, ademas ocupa espacio.

Ahora podemos poner un boton fuera del grid, para que el user diga «guardar», entonces en el boton llamamos a una funcion javascript que hara lo siguiente:

function recuperarDatosdeGrid(){
               
               var acumulado=0;
               //Recuperammos todos los id del grid, o sea los identificadores de los renglones

               var myIDs = $(«#idgrid»).jqGrid( ‘getDataIDs’ );

               // Recorremos renglon a renglon
               for( var i = 0; i < myIDs.length; i++ ) {

                // nos traemos renglon a renglon           

                    var myRow = $(«#idgrid»).jqGrid( ‘getRowData’, myIDs[ i ] );

             // Ahora para traernos el valor de nuestra caja de texto, lo hacemos asi:
              valorcapturado= document.getElementById(myRow.id_detalle_producto+»_txt»).value

             // si deseas traerte el valor de otra columna, solo hazlo asi:

              otracolumna=myRow.nombredecoluma
                }

Al observar el codigo anterior, para ir directo a cada caja de texto del grid, lo que hacemos es un concat, primero recuperamos el valor en la columna oculta id_detalle_producto, y luego le concatenamos el resto del nombre que usamos «_txt», ahora usamos el document.getElementbyid(aqui ira el id del text box).value y listo ya tenemos su valor y podemos hacer lo que queramos con el.

Hay otra manera, barriendo toda la pagina y checando elemento por elemento hasta identificar los que tengan la nomenclatura _txt, pero esto hace que tengamos que recorrer toda la pagina, de la manera que describi anteriormente nos vamos directo a las cajas de texto deseadas, o bien puedes usr cualquier control html.

Bueno, espero haberme explicado, y espero que le se a util a alguien.

 

 

 

 

Deja un comentario