Configurar un campo contador en tablas

El objetivo de este ejemplo es poder configurar dentro de una tabla, un campo de tipo número entero que sea no editable y que se incremente con cada fila de la tabla.

Igualmente este valor debe modificarse automáticamente, si eliminamos alguna fila de esta misma tabla.

PASO 1. Configuramos dentro de la tabla un campo de tipo número entero.

Este campo se llamará por ejemplo Nº de Orden y será a tamaño de una columna y no editable. Es importante que el id de este campo sea contador, o si es otro nombre, modificarlo en el paso de la configuración de variables.

PASO 2. En la tabla donde está ubicado este campo vamos a configurar el addIteration y removeIteration.

Comenzamos definiendo las variables de nuestra tabla y nuestro campo contador,

var nombreTabla = "Tabla-ejemplo";
var nombreColumnaContador = "contador";

JS

A continuación configuraremos la llamada a la función que incluiremos posteriormente en un JS externo.

actualizarContador(nombreTabla, nombreColumnaContador, renderMode);

JS

Por último, definiremos la función en un fichero que asociaremos al formulario mediante JS externo.

var wf = webforms.UserUtilities;
var _ = webforms.lib._;
function _actualizarAutonumericos(nombreTabla, nombreColumnaContador, renderMode) {
   if (renderMode != 'READONLY_PDF') {
      var j = 1; 
      var i = 0; 
      var r; 
      var filas = wf.obtenerValor(nombreColumnaContador, nombreTabla).length; 
      while (j <= filas){ 
         wf.modificarValor(nombreColumnaContador, j, nombreTabla, i); 
         r = wf.obtenerValor(nombreColumnaContador, nombreTabla, i); 
         if (r == j) { 
            j = j + 1; 
         } 
         i = i + 1; }
   }
} 
var actualizarContador = _.debounce(_actualizarAutonumericos, 500);

JS

Descarga ejemplo

Tienes disponible el código json del ejemplo para su descarga y que puedas probarlo y adaptarlo a tus necesidades. Ver: Ejemplo contador en tablas.json

Cookies