Scriptcase 9. Usar SweetAlert para Filtrar desde un botón en una Grid

170 views
Skip to first unread message

Fausto Martinez

unread,
Jul 7, 2022, 9:11:24 PM7/7/22
to Comunidad ScriptCase Latino

Usar SweetAlert para Filtrar desde un botón de una Grid



Al presionar un botón queremos que salte a pantalla una ventana modal solicitando la selección de un año, para mostrar la informaciones correspondiente:



  1. onApplicationInit : es donde vamos a recibir el año seleccionado y en caso de que no tengamos el parametro año, entonces usamos el año actual.

$fec = date("Y");

if (isset($_GET["agno"])) {

  $fec = $_GET["agno"];

} 

[par_agno]  = $fec;



  1. onScriptInit: aquí colocaremos la función JavaScript que mostrará la ventana modal sweetalert solicitando la fecha, también recargamos la aplicación grid pasando el año seleccionado como parámetro (get).


?>

<body>

<script>

/* ******************************************************** */

function getagno() {

Swal.fire(

{title: 'Seleccione Año',

html: "<form>"+ 

"<div style='display: flex;justify-content: center;'> "+


"<input class='input form-control' type='number' min='1900' max='2099' step='1' id='myAgno'"+

" value='<?=[par_agno]?>'"+

"style='width:90px; margin: 2px 2px;font-size: 22px '>"+


"</div>"+

"</form>",

showCancelButton: true,

confirmButtonText: 'Aceptar',

cancelButtonText: 'Cancelar',

preConfirm: function() {

return new Promise((resolve, reject) => {

resolve({agno: document.getElementById('myAgno').value });

});

}

}).then((data) => {


if (data.dismiss) {

Swal.fire({ timer: 1500, toast: true,showConfirmButton: false,

  type: 'info', //"warning", "error", "success" and "info". 

  html: '&nbsp;&nbsp;Cambio de año cancelado.',

  });


} else {

Swal.showLoading();

agno = data.value.agno;

window.location.href ="index.php?agno="+agno;

}

}); 

}

</script>

</body>

<?php



3.- En su consulta SQL recuerde utilizar la variable global [par_agno] como criterio de selección en el where de su consulta. De igual forma puedes usar esta variable global para combinar con el título de la cabecera de su Grid.


4.- Pasamos directamente a Crear el botón JavaScript de donde cargaremos nuestra función getagno().




Solo quedaría ejecutar la aplicación grid y probar su botón.




Espero que este instructivo pueda servir de ayuda!!!!.


Fausto Martinez. 


Reply all
Reply to author
Forward
0 new messages