sql >> Base de Datos >  >> RDS >> Oracle

haciendo que mi forma tabular sea dinámica

Puede crear acciones dinámicas en campos de formularios tabulares, pero necesita saber algo de Javascript/jQuery/DOM, ya que no se puede hacer de manera declarativa como se puede hacer con los elementos de la página.

Como ejemplo, creé un formulario tabular simple en la tabla EMP:

Usando la herramienta Inspeccionar elemento del navegador, puedo ver que el HTML para el campo Ename en la fila 3 se ve así:

<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
    class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">

Los bits relevantes a tener en cuenta son el nombre "f03" y el ID "f03_0003". Para todos los campos de formulario tabular, el nombre indica la columna y es el mismo para todos los campos de esa columna. El ID se compone del nombre más una cadena para representar la fila; en este caso, "_0003" para representar la fila 3.

De manera similar, todos los campos de fecha de contratación se denominan "f004" y tienen ID como "f04_0003".

Armados con esta información podemos escribir una acción dinámica. Por ejemplo, supongamos que siempre que Ename esté vacío, Hiredate debe ocultarse, de lo contrario, mostrarse. En pseudocódigo:

cada vez que se cambia un elemento con el nombre "f03", el elemento con el nombre "f04" en la misma fila debe ocultarse o mostrarse.

Entonces podemos crear una acción sinámica con una condición When como esta:

  • Evento =Cambio
  • Tipo de selección =selector jQuery
  • selector de jQuery =entrada[nombre="f03"]

es decir, siempre que se cambie una entrada cuyo nombre sea "f03", active esta acción.

La acción realizada tendrá que ser "Ejecutar código Javascript", y el código podría ser:

// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);

if ($(this.triggeringElement).val() == "") {
    // Ename is empty so hide Hiredate
    $('#'+that_id).closest('span').hide();
} else {
    // Ename is not empty so show Hiredate
    $('#'+that_id).closest('span').show();
}

Debido a que Hiredate es un selector de fechas, necesitaba ocultar/mostrar tanto el campo en sí como su icono de selector de fechas. Elegí hacer esto ocultando/mostrando el lapso que los contiene a ambos. Este código podría haber sido escrito de muchas maneras diferentes.

Podría aplicar técnicas similares para lograr sus objetivos, pero como puede ver, no es trivialmente fácil.