|
Para manejar datos cargados dinamicamente entre paginas html, se presenta un ejemplo que carga listas de seleccion que se calculan cada una por separado con la ayuda de servlets.
Ejemplo
Mostrar varios filtros (listas select) con nombres a,b,c y d y cargar los datos en forma incremental usando botones avanzar y retroceder
Pagina de filtros
Inicializar listas de filtros
Se utilizara una lista de filtros y un indicador del filtro actual
var filtroActual=0;
var filtros = new Array();
function initFiltros() {
filtros[0]=document.formFiltros.a;
filtros[1]=document.formFiltros.b;
filtros[2]=document.formFiltros.c;
filtros[3]=document.formFiltros.d;
// inicializar todos los filtros
filtroActual=filtros.length-1;
while(filtroActual>0)
prevFilter();
}
Estos datos deben inicializarse al inicio de la pagina
<body onLoad="initFiltros()">
usar funciones para administrar los filtros
Ingreso de datos: abrir ventana en un popup o IFRAME
Es conveniente que exista una variable en el form para almacenar el numero del filtro que se esta calculando.
function openFilterWnd(form, action, target){
form.currentFilter.value=filtroActual;
form.action=action;
form.target=target;
form.submit();
}
Comunicacion con ventana popup para el filtro actual: limpiar,agregar datos,terminar
function filterClear(){
var list = filtros[filtroActual];
for (var i= list.options.length-1;i>=0; i--)
list.options[i]=null;
list.options[0]=new Option(" (TODOS) ","*");
list.options[0].selected =true;
}
function filterAdd(name, id){
var list = filtros[filtroActual];
list.options[list.length]=new Option(name,id);
}
function filterFinish(){
markFilter(2)
}
Ventana actual: Avanzar filtro, retroceder filtro.
function nextFilter(form, action,target){
if (filtroActual<(filtros.length-1)) {
markFilter(1) ;
filtroActual++;
list = filtros[filtroActual];
openFilterWnd(form, action,target);
}
}
function prevFilter(){
if (filtroActual>0) {
var list = filtros[filtroActual];
for (var i= list.options.length-1;i>=0; i--)
list.options[i]=null;
list.options[0]=new Option(" (TODOS) ","*");
list.options[0].selected =true;
markFilter(3) ;
filtroActual--;
markFilter(2);
}
}
function markFilter( mode ) {
if (mode==1) {
filtros[filtroActual].style.background="#ffffff";
filtros[filtroActual].style.color="#000000";
filtros[filtroActual].size=5;
}else if (mode==2){
filtros[filtroActual].style.background="#ffffd0";
filtros[filtroActual].style.color="#c00000";
filtros[filtroActual].size=5;
}else{
filtros[filtroActual].style.background="#ffffff";
filtros[filtroActual].style.color="#000000";
filtros[filtroActual].size=1;
}
}
Configurar formulario
Como la funcion nextFilter() cambia los valores de envio del formulario, se requiere otra funcion para enviar (generarInforme).
<INPUT type="button" value="Avanzar" onclick="nextFilter(document.formFiltros, 'DoFilter', 'loaderIFrame')">
<INPUT type="button" value="Retroceder" onclick="prevFilter()">
<INPUT type="button" value="Generar" onclick="generarInforme(formFiltros)">
Si se utiliza un IFRAME para cargar los datos se requiere definirlo de esta manera:
<iframe id="loaderIFrame" name="loaderIFrame" src="" style="display:none"/>
La ventana popup
La ventana popup (o iframe) debe utilizar llamadas a las funciones:
- filterClear()
- filterAdd( name, value)
- filterFinish()
Para configurar los valores del filtro actual.
function fillFilter(){
parent.filterClear();
parent.filterAdd( "uno" , "1");
parent.filterAdd( "dos" , "2");
parent.filterAdd( "tres" , "3");
parent.filterAdd( "cuatro" , "4");
parent.filterAdd( "cinco" , "5");
parent.filterFinish();
}
Esta funcion debe llamarse desde el metodo onLoad
<body onLoad="fillFilter()">
En el caso de utilizar popups, esta funcion tambien debera cerrar la ventana.
window.close();
|
