JqGrid: Como agregar un onchange, onclick en un input

Desde que empece a utilizar jqGrid para manejar datos mediante tablas al estilo de Excel me tope con un problema que no sabia como solucionarlo y me llevo 1 desvelada el resolverlo!, y pues como la idea es compartir y para que no sufran como yo, aquí les dejo la forma de tener un onchange en tu cajita de texto.

Bueno, para no hacerlos bolas expongo lo que queria hacer y como lo solucione (despues de destripar el codigo fuente del JS, por eso me gusta que venga el codigo fuente así si tienes una duda pues a debugear)

1.- Tengo mi tabla con los siguientes campos: Producto, Cantidad inicial, Cantidad comprada, Cantidad Final, Existencia Actual, ….
2.- La idea es que cuando escribas la cantidad comprada mediante JavaScript realice la suma de la cantidad inicial + cantidad comprada y el resultado lo ponga en el campo cantidad final. (sencillo no???)

Bueno, la cosa pudiera ser tan sencilla con algo que pongas en un evento onchange de tu cantidad comprada y despues ya lo sumas y haces todas las operaciones, pero con el JqGrid nomas no encontraba como ponerle el onchange y mandar llamar mi función de sumar, resulta que cuando inicializas la tabla en el JqGrid debes de pones algo como esto para activar el onchange:

<br /> colNames:['Producto','Cantidad Inicial','Cantidad Comprada','Existencia Actual','Cantidad Final'],<br /> colModel:[<br /> {name:'producto',index:'producto', width:100, editable:false},<br /> {name:'inicial',index:'inicial', width:100, align:"right", editable:false},<br /> {name:'compras',index:'compras', width:100, align:"center", editable:true, editoptions: {style:"width:50px;", onchange:"calcula_existenciactual(id); calcula_utilizado(id);"}},<br /> {name:'actual',index:'actual', width:100, align:"right", editable:false},<br /> {name:'final',index:'final', width:100,editable:true, editoptions: {style:"width:50px;", onchange:"calcula_utilizado(id);"}}<br /> ],<br /> onSelectRow: function(id){<br /> if(id &#038;&#038; id!==lastsel){<br /> jQuery('#rowed3').restoreRow(lastsel);<br /> jQuery('#rowed3').editRow(id,true,null,saveCorrecto);<br /> lastsel=id;<br /> }<br /> },<br /> 

Si observan existe una parte que dice editoptions la cual se encarga de poner las propiedades y eventos del input, usando la sintaxis del JSON (de hecho esta parte es la que hizo que me desvelara, porque no entendia como funcionaba…) y bueno, despues ponen el nombre de su funcion en este caso tengo una que calcula la existencia actual y despues la cantidad utilizada mandando como parametro el ID de mi celda, pueden cambiar el onchange por onclick o cualquiera otro, automaticamente el JsGrid creará todo.

Ahora ya solucionamos el problema del onchange, pero resulta que en mi tabla algunas celdas tienen input y otras solamente texto (como se ve en la imagen)

Pues la cosa se complica un poco, ya que debemos de seguir los siguientes pasos:
1.- Sacar la información del input (Cantidad Comprada)
2.- Sacar la información del texto (celda sin input – Cantidad incial)
3.- Realizar la operación de suma
4.- Actualizar el campo Existencia actual que es de tipo texto

Bueno, aquí les pongo la forma que lo solucione:

<br /> function calcula_existenciactual(id){<br /> var datrow = jQuery('#rowed3').getRowData(lastsel);<br /> var comprada = parseFloat($(lastsel +"_compras").value);<br /> var inicial = parseFloat(datrow.inicial);<br /> var val_actual = number_format((comprada + inicial),2,'.','');<br /> jQuery('#rowed3').setCell(lastsel,'actual',val_actual);<br /> }<br /> 

Explicando el código podemos ver primero que la linea donde dice var datrow obtenemos todos los campos de las celdas seleccionadas (mediante la variable lastsel que se usa en el ejemplo Row Editing > Using events que es el que base el codigo inicial. )
Despues mediante la función $ y value obtengo el valor el input y para sacar el valor del texto sin input usamos el datrow.inicial (despues de cada punto se supone que es el nombre de la celda)

Si queremos usar datrow.comprada no funciona ya que nos regresa algo tipo < input ….. cosa que no queremos, el por ello que usamos el $(NOMBRE_CELDA

Y al final con el setCell ya ponemos el valor en la celda que queremos, en este caso la actual.

Espero no hacerlos bolas, si necesitan más documentación pueden revisar la documentación oficial de JqGrid y la página de ejemplos

7 thoughts on “JqGrid: Como agregar un onchange, onclick en un input

  1. Estroy tratanto de implenentar este evento onchange, pero me indica el bugger “Function is not defined”. El caso es que ahi la tengo mas abajo pero no la reconoce
    Lo tengo asi : editoptions: { onChange: “ChangeImage(tr_Archivo, tr_Imagen);”}

    y la funcion la declare mas abajo despues de hacer toda la logica de jqgrid en un espacio aparte.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *