Definir valores por defecto en una tabla

Podemos encontrarnos con un formulario en el que sea necesario asignar los valores de una o varias filas en una tabla, con el objetivo de que el solicitante solo pueda cumplimentar lo que está predefinido y no tenga que añadir o eliminar elementos de la tabla.

Veremos un ejemplo en el que fijaremos los valores de la primera columna, todo el código asociado a esta configuración lo pondremos en el OnLoad de nuestro formulario.

Paso 1: ocultar los botones para añadir y borrar filas

Con este código, puesto en el OnLoad, nos aseguramos de que el solicitante solo pueda cumplimentar lo que definiremos por defecto y que no pueda añadir o quitar filas de la tabla.

/*********************
    TABLA 
***********************/
var idTabla = 'tabla';

wf.ocultarBotonAnadir(idTabla);
wf.ocultarBotonBorrar(idTabla);

CODE


Paso 2: asignar los valores por defecto

El siguiente paso es asignar los valores por defecto, en este ejemplo añadiremos 5 filas a la tabla y les asignaremos un valor específico en la primera columna. En este caso definiremos una función para modificar los valores y ocultar el botón de borrar. Esto último quiere decir que los solicitantes solo podrán editar las filas, pero no podrán borrarlas. 

Con la función definida, lo siguiente es obtener el número de filas de la tabla para comprobar que no se ha añadido ninguna fila antes de asignar nuestros valores, con esta comprobación hecha, pasamos a asignar los valores específicos para cada fila.

// Función para modificar el valor de la primera columna y ocultar el botón de borrar
function manejadorDelAñadirIteracion3(indice, idTabla, $elementoIteracion, concepto) {
	wf.modificarValor('grupos-vulnerables-de-poblacion', concepto, 'tabla', indice);
	wf.ocultarBotonBorrar( 'tabla', indice);
	}

var tableRows = wf.obtenerValor("", idTabla).length; 

if (tableRows == 0) { // Comprobar que la tabla no tiene filas antes de asignar los valores
	wf.anadirIteracion( idTabla, _.partial(manejadorDelAñadirIteracion3, _, _, _, 'POBLACIÓN GITANA'));
	wf.anadirIteracion( idTabla, _.partial(manejadorDelAñadirIteracion3, _, _, _, 'POBLACIÓN INMIGRANTE'));
	wf.anadirIteracion( idTabla, _.partial(manejadorDelAñadirIteracion3, _, _, _, 'FAMILIAS MONOPARENTALES'));
	wf.anadirIteracion( idTabla, _.partial(manejadorDelAñadirIteracion3, _, _, _, 'FAMILIAS NUMEROSAS'));
	wf.anadirIteracion( idTabla, _.partial(manejadorDelAñadirIteracion3, _, _, _, 'OTRAS'));
} 

CODE


Sumar filas y columnas

En este mismo ejemplo incluimos también dos elementos de gran utilidad que son las sumas de filas y columnas. Las configuraciones que se explicar a continuación se añaden en el OnLoad y en los eventos de la tabla y los campos involucrados en la suma.


Paso 1: Añadir una fila en el pie de tabla para mostrar los totales de las sumas por columna

En este caso queremos mostrar el resultado de la suma de cada columna en una fila al final de la tabla, lo que haremos será añadir la fila y añadir una etiqueta de "Total", esta configuración la pondremos en el OnLoad

// Añadir una fila en el pie de tabla y asignar un valor para la primera columna
wf.anadirFilaPieTabla(idTabla);
wf.modificarCeldaPieTabla(idTabla, 1, '<center><b>Total</b></center>', 1, 1);


CODE


Paso 2: sumar columnas

El siguiente paso es definir las sumas de las columnas, esta configuración la añadiremos en los eventos addIteration y changeIteration de la tabla, no lo añadimos en el evento removeIteration porque hemos desactivado la opción de borrar filas.

Si revisamos el código veremos que lo que haremos será obtener los valores de la columna que queremos sumar y luego la recorremos para sumar cada elemento. Por último, modificamos el valor de la fila pie de tabla que añadimos en el paso anterior para asignarle el resultado de la suma. Esto lo repetiremos por cada columna que queramos sumar.

var idTabla = "tabla";

// Suma segunda columna
var idCelda = "n_usuarios";
var valores = wf.obtenerValor(idCelda, idTabla) ;
var filas = wf.obtenerValor(idCelda, idTabla) .length;
var j = 0;
var total = 0;

while ( j <= filas ) {
   total = total + (parseFloat(valores[j])  || 0);
   j = j + 1; 
}

// Mostrar el resultado en la fila pie de tabla
wf.modificarCeldaPieTabla(idTabla, 2, total, 1, 1);
CODE


Paso 3: sumar filas

La configuración de la suma de elementos de una fila debemos añadirla en el evento change de cada uno de los sumandos. En este ejemplo vamos a sumar tres elementos de cada fila y mostraremos el resultado en la última columna de la tabla. Lo que haremos será obtener los valores de cada campo a sumar, ejecutar la suma y por último modificar el valor de la última columna para mostrar el resultado de la suma.

// Obtener los valores de los campos y definir variables
var indice = wf.obtenerContextoPadre(this).indice;
var tabla='tabla';	
var columna = 'n_total';
var campoSuma1 = 'n_usuarios';
var campoSuma2 = 'n_usuarias';
var campoSuma3 = 'n_binarias';
var numero = 0;

// Sumar los valores de los campos
if (parseInt(wf.obtenerValor(campoSuma1, tabla, indice)))
		numero += parseInt(wf.obtenerValor(campoSuma1, tabla, indice));
	
if (parseInt(wf.obtenerValor(campoSuma2, tabla, indice)))
		numero += parseInt(wf.obtenerValor(campoSuma2, tabla, indice));

if (parseInt(wf.obtenerValor(campoSuma3, tabla, indice)))
		numero += parseInt(wf.obtenerValor(campoSuma3, tabla, indice));

// Mostrar el resultado en una columna dentro de la tabla
wf.modificarValor(columna, numero, tabla, indice);
CODE


Paso 4: configuración para PDF en blanco

Dado que vamos a añadir configuraciones para realizar sumas automáticas en filas y columnas, debemos asegurarnos que esto no afecta nuestra versión de PDF en blanco, para ello añadimos una configuración en el OnLoad que se asegura de que nuestra tabla sale vacía cuando se trata de la versión PDF en blanco. 

// Eliminar los valores asignados a la fila Total para el PDF en blanco
if (renderMode == "BLANK_PDF") {
    wf.modificarCeldaPieTabla(idTabla, 2, "", 1, 1);
	wf.modificarCeldaPieTabla(idTabla, 3, "", 1, 1);
	wf.modificarCeldaPieTabla(idTabla, 4, "", 1, 1);
	wf.modificarCeldaPieTabla(idTabla, 5, "", 1, 1);
}
CODE

Descarga ejemplo

Tienes disponible el código json del ejemplo para su descarga y que puedas probarlo y adaptarlo a tus necesidades. 

Ver: Tabla_valoresPorDefecto_suma.json