Desplegables con orígenes de datos condicionados en tablas

En ocasiones, las opciones de un desplegable dependen de un valor previo. Cuando esto ocurre dentro de una tabla, hay una serie de medidas que deben llevarse a cabo. A continuación las ilustraremos en un ejemplo en el que las opciones de un desplegable dependen del valor de un checkbox que se encuentra en la misma tabla.

En primer lugar, para que la precarga funcione correctamente, debe colocarse el siguiente código en el evento 'openModal' de la tabla.

Evento openModal de la tabla

// 'desplegable' es el id del desplegable con origen de datos condicionado
// 'checkbox' es el id del checkbox del que dependen las opciones del desplegable
var tabla = 'tabla';
var $desplegable = wf.obtenerElementoHTML('desplegable', tabla);
var indice = wf.obtenerContextoPadre($desplegable).indice;

$desplegable.fetchData({ checkbox: wf.obtenerValor('checkbox', tabla, indice) });

JS

En segundo lugar, nos aseguramos de limpiar las opciones del desplegable cuando no tenemos un valor del checkbox. De esta forma, el origen de datos del desplegable podría quedar de la siguiente manera:

Origen de datos del desplegable

var checkbox = params.checkbox;

// Hacemos esta comprobación ya que 'false' sería un valor válido del checkbox
if (checkbox !== null && checkbox !== undefined) {
    var options;
    switch (checkbox) {
        case true:
            options = [{id: "enabled", text: "Checkbox enabled"}, {id: "enabled2", text: "Checkbox enabled 2"}];
            break;
        default:
            options = [{id: "disabled", text: "Checkbox disabled"}];
    }
    resolve({ data: options });
} else {
	// Limpiamos las opciones del desplegable
    resolve({ data: [] });
}

JS

Si solo usamos un desplegable con origen de datos condicionado, esto sería suficiente. Si usamos nuevos desplegables que dependan del valor del anterior, su origen de datos es similar.

Origen de datos de 'desplegable2'

var desplegable = params.desplegable;

if (desplegable) {
    var options;
    switch (desplegable) {
        case 'enabled':
            options = [{id: "1", text: "first desplegable = checkbox enabled"}];
            break;
        case 'enabled2':
            options = [{id: "1.2", text: "first desplegable = checkbox enabled2"}];
            break;
        default:
            options = [{id: "2", text: "first desplegable = checkbox disabled"}];
    }

    resolve({ data: options });
} else {
	// Limpiamos las opciones del desplegable
    resolve({ data: [] });
}

JS

Cookies