Scriptcase 9. Form de Grid Editable y Vista Grid Editable Focus al Auto-Guardar
Fausto Martinez
Para simplificar la guía utilizaremos una tabla con 4 campos en un formulario Grid Editable o Vista de Grid Editable, los campos estarán configurado de la siguiente forma:
En el ejemplo probamos con barra de herramientas inferior utilizando las herramientas marcadas en amarillo, tambien fue probada quitando todas las herramientas de la barra de herramientas inferior:
Evite utilizar “Limite de lineas”
En el onScriptInit vamos a colocar el siguiente código:
$lastColum ='campo3'; // Última columna que se muestra en la grid (en minúscula)
$focusField = 'campo1'; // Columna que tomará el foco al insertar (en minúscula)
$thisAppName = basename(__DIR__);
?>
<head>
<style>
#miDiv:focus {opacity: 0; }
</style>
</head>
<script>
// Esperar que el DOM cargue por completo.
$(function(){
// Agregar un div focable, para cuando presionemos tab en el último campo el foco no pase
// a la pestaña del navegador.
$('.sc-toolbar-bottom > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1)')
.append($('<div>', {id: 'miDiv',tabindex: 0}));
// Redefinir el método x_ajax_***_add_new_line ejecutado por el botón nuevo
window.x_ajax_<?=$thisAppName?>_add_new_line = function () {
sajax_do_call("ajax_<?=$thisAppName?>_add_new_line",
x_ajax_<?=$thisAppName?>_add_new_line.arguments);
delayFocus(500);
}
// Redefinir el método onBlur para el campo $lastColum
window.sc_<?=$thisAppName.'_'.$lastColum?>__onblur = function(oThis, iSeqRow) {
do_ajax_<?=$thisAppName?>_validate_<?=$lastColum?>_(iSeqRow);
scCssBlur(oThis, iSeqRow);
if ( iAjaxNewLine !== '' && iSeqRow == iAjaxNewLine ) {
$("#sc_ins_line_"+iSeqRow).click();
delayFocus(1000);
} else {
if (scFormHasChanged == true)
$("#sc_upd_line_"+iSeqRow).click();
else
$("#sc_cancelu_line_"+iSeqRow).click();
}
}
// Retrasar la asignación del foco a la ultima fila.
function delayFocus(dilaytime){
setTimeout(function(){
if (iAjaxNewLine) $('#id_sc_field_<?=$focusField?>_'+iAjaxNewLine).focus();
}, dilaytime);
}
});
</script>
<?php
Al código anterior solo es necesario cambiar el nombre del campo con el que queremos que se disparé el auto-guardado y el campo que tomará el foco luego del guardado o al presionar el botón nuevo:
Eso es todo lo que se necesita hacer para que al presionar el botón nuevo el foco se coloque de forma automática en el campo que indicamos en la variable $focusField:
Al presionar la tecla tab en el campo3 la aplicación de forma automática debe de guardar el registro e iniciar un registro nuevo con el foco puesto en la nueva fila del campo1:
Listo, eso debería funcionar sin más.
Advertencia : esta técnica no ha sido probada en formularios maestro/detalles. Agradecemos que quien haga pruebas nos colabore con los resultados y con los retoques introducidos en las mejoras del funcionamiento de este.