Introducción
En el desarrollo de aplicaciones con Oracle APEX, es común que los usuarios necesiten interactuar con grids o tablas interactivas donde seleccionan varios registros para realizar acciones posteriores. Sin embargo, un reto frecuente es la selección de varios registros específicos de manera dinámica, a su vez que estos sean persistentes al cambiar de página en el grid o incluso seleccionar registros ubicados en páginas posteriores. En este post veremos como utilizar el APEX$ROW_SELECTOR a nuestro favor y solucionar este tipo de problemas.
Pd: no olvides activar la selección multiple en las propiedades del APEX$ROW_SELECTOR
Caso de uso
Para esta demostración seleccionaremos los registros que cumplan con las condiciones impuestas por el usuario, lo que haremos será crear un campo de texto en el cual indicaremos el monto a validar, y tambien crearemos un item de tipo select list con los siguientes valores.
Tambien debemos crear un botón que llamará a la función que realizará la selección de registros.
Para esto también necesitaríamos de una IG (Interactive Grid) para trabajar con los datos, activa la paginación de la grilla y establece la visualización de los datos en grupos de 10 registros.
Si ya tienes una tabla con la cual hacer las pruebas sería genial, de igual forma puedes crear un listado de datos utilizando las colecciones de la siguiente manera:
DECLARE
l_seq number;
BEGIN
APEX_COLLECTION.CREATE_OR_TRUNCATE_COLLECTION('DATOS_ROW_SELECTOR');
FOR cant IN 1..20
LOOP
l_seq := APEX_COLLECTION.ADD_MEMBER(
p_collection_name => 'DATOS_ROW_SELECTOR',
p_c001 => 'EMPLEADO_'||cant,
p_c002 => round(dbms_random.value(10000, 100000))
);
END LOOP;
END;
En la grilla simplemente deberás llamar a la colección de esta manera.
SELECT seq_id, c001, c002
FROM APEX_collections
WHERE collection_name = 'DATOS_ROW_SELECTOR'
El siguiente paso sería agregar esta función en la propiedad Function and Global Variables de nuestra página. No te preocupes que más abajo lo explico a detalle.
function mantener_registros_seleccionados() {
var dato = apex.item('P9_DATO').getValue(),
filtro = apex.item('P9_FILTRO').getValue(),
vista$ = apex.region('ig_data').call('getViews','grid');
modelo = vista$.model,
elementosSeleccionados = [];
modelo.forEach(function(r) {
var registro = r,
salario = parseFloat(modelo.getValue(registro,"C002"));
id = parseFloat(modelo.getValue(registro,"SEQ_ID"));
if(filtro=="A"){ //Mayor a
if(salario > dato){
elementosSeleccionados.push(modelo.getRecord(id));
}
}
if(filtro=="B") { //Menor a
if(salario < dato){
elementosSeleccionados.push(modelo.getRecord(id));
}
}
vista$.setSelectedRecords(elementosSeleccionados,true);
})
}
Explicando el funcionamiento del código
Obtención de los parámetros:
Aquí se extraen los parámetros ingresados por el usuario en los items P9_DATO y P9_FILTRO del APEX.
var dato = apex.item('P9_DATO').getValue(),
filtro = apex.item('P9_FILTRO').getValue();
Obteniendo el modelo de la grilla:
Aquí obtenemos el modelo de la grilla para poder interactuar con los elementos visibles, determinar la página siguiente y el número de filas por página.
var vista$ = apex.region('ig_data').call('getViews','grid');
var modelo = vista$.model;
Iteración y Selección de Registros:
Creamos una variable de tipo Array y se recorre el modelo de la grilla mediante un forEach.
var elementosSeleccionados = [];
modelo.forEach(function(r) {
//codigo
})
Salario (C002) y filaNro (SEQ_ID) son columnas de la grilla almacenadas en variables para su utilización.
salario = parseFloat(modelo.getValue(registro,"C002"));
id = parseFloat(modelo.getValue(registro,"SEQ_ID"));
Se realiza la validación del filtro y se añaden los registros al array.
if(filtro=="A"){ //Mayor a
if(salario > dato){
elementosSeleccionados.push(modelo.getRecord(id));
}
}
if(filtro=="B") { //Menor a
if(salario < dato){
elementosSeleccionados.push(modelo.getRecord(id));
}
}
Finalmente se envia el array como parámetro para la selección de registros al modelo de la grilla.
vista$.setSelectedRecords(elementosSeleccionados,true);
Persistencia de la selección al cambiar de páginas:
Para asegurar que si el usuario cambia de página en el grid, la selección de registros se mantenga activa y coherente, agregamos el siguiente código en la propiedad Initialization JavaScript Function de la grilla ubicada en la sección de atributos.
function(config) {
config.defaultGridViewOptions = {
persistSelection: true
};
return config;
}
Demo
Puedes verlo en funcionamiento en este laboratorio (Aprovechando el ROW_SELECTOR).
Conclusión
Con esto podremos ofrecer una solución elegante en situaciones donde se requiere una selección de registros basado en parámetros, permitiendo una experiencia de usuario eficiente y sin interrupciones al trabajar con grids paginados.
Como siempre, espero que este post haya sido de tu agrado y hayas adquirido un poco más de conocimiento sobre las grillas interactivas.
No olvides seguirme en las redes sociales para enterarte de más :) !!
Nos vemos en otro post, saludos!.