0

Tengo un jqGrid, en el cual carga los datos. Al entrar en la pagina, lo primero que me aparece es un pequeño dialogo que me pide un mes y el año. Cuando le das ha aceptar carga el dialogo. Me gustaría saber cómo puedo pasar estas variables al archivo de carga, para poder filtrar la consulta por ese mes y ese año.

Muchas gracias y un saludo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>CTA - Cuotas</title>

        <!-- The jQuery library is a prerequisite for all jqSuite products -->
        <script type="text/ecmascript" src="../js/jquery.min.js"></script> 
        <!-- This is the Javascript file of jqGrid -->   
        <script type="text/ecmascript" src="../js/trirand/jquery.jqGrid.min.js"></script>
        <!-- This is the localization file of the grid controlling messages, labels, etc.
        <!-- We support more than 40 localizations -->
        <script type="text/ecmascript" src="../js/trirand/i18n/grid.locale-es.js"></script>
        <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
        <link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="../css/cuotas.css" />

        <!-- The link to the CSS that the grid needs -->
        <link rel="stylesheet" type="text/css" media="screen" href="../css/trirand/ui.jqgrid.css" />
        <script type="text/ecmascript" src="../js/codetabs.js"></script>
        <script type="text/ecmascript" src="../js/themeswitchertool.js"></script>


        <script>
            $(document).ready(function () {
                $('.menuContainer').load('../menu.html');
            });

            function cargaForm(){
                $( function() {
                    $( "#dialog" ).dialog({id:"dialog", closeText: "" });
                } );
            }


        function load(){    

            var nMes = document.getElementById("mes").value; // formulario.mes.value;
            var nAnno = document.getElementById("anno").value; // formulario.mes.value;

            $("#dialog").dialog('close');

                jQuery("#tblCuotas").jqGrid({
                    url:'cargaCuotas.php',
                    datatype: 'json',
                    mtype: 'POST',
                    mes: nMes,
                    anno: nAnno,
                    colModel:[
                        {
                            label: 'ID Cuota',
                            name: 'idCuota',
                            index:'idCuota',
                            width: 50,
                            key: true,
                            hidden: true
                        },
                        {
                            label: 'Num. Cuota',
                            name: 'NumCuota',
                            index:'NumCuota',
                            width: 50
                        },
                        {
                            label: 'id. Afiliado',
                            name: 'idAfiliado',
                            index:'idAfiliado',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Nombre',
                            name: 'NOMBRE',
                            index:'NOMBRE',
                            width: 300
                        },
                        {
                            label: 'Cuota',
                            name: 'cuota',
                            index:'cuota',
                            width: 50,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'nMes',
                            index:'nMes',
                            width: 30,
                            align: 'right'
                        },
                        {
                            label: 'Mes',
                            name: 'mes',
                            index:'mes',
                            width: 80
                        },
                        {
                            label: 'Año',
                            name: 'anno',
                            index:'anno',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Pagado',
                            name: 'pagado',
                            index:'pagado',
                            width: 50,
                            align: 'center'
                        },
                        {
                            label: 'Forma Pago',
                            name: 'FormaPago',
                            index:'FormaPago',
                            width: 100
                        }

                    ],  
                    loadonce: false,
                    width: window.innerWidth-20,
                    height: window.innerHeight-200,
                    pager: '#paginacion',
                    multiselect: true,
                    rowNum: 50,
                    rowList:[50,100,150],
                    sortname: 'Custom',
                    //sortorder: 'desc',
                    viewrecords: true,
                    caption: 'CUOTAS'
                });   


                jQuery("#tblCuotas").jqGrid('navGrid','#paginacion',
                    {edit:false,add:false,del:false,view:true,search:false});


        }
            function getSelectedRows() {
                var grid = $("#tblCuotas");
                var rowKey = grid.getGridParam("selrow");

                if (!rowKey)
                    alert("No ha seleccionado ninguna linea.");
                else {
                    var selectedIDs = grid.getGridParam("selarrrow");
                    var result = "";
                    for (var i = 0; i < selectedIDs.length; i++) {
                        result += selectedIDs[i] + ",";
                    }

                    alert(result);
                }                
            }

        </script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script>

            function openForm() {
                $( function() {
                    $( "#dialog" ).dialog({id:"dialog", closeText: "" });
                } );
            }

        </script>

    </head>
    <body id="cuerpo" onLoad="openForm()">
        <div class="menuContainer"></div>

        <header id="submenu">
            <nav id="enlaces">
                <ul>
                     <li>
                         <a href="javascript:getSelectedRows()" >PAGAR CUOTAS SELECCIONADAS</a>
                    </li>
                    <li>
                         <a href="javascript:openForm()" >LOAD</a>
                    </li>
                </ul>
            </nav>
        </header>       

        <table id="tblCuotas"></table>
        <div id="paginacion"> </div>

        <div id="dialog" hidden="true" title="FILTRO DE CUOTAS">
            <div class="group">
            <table id="formulario">
                <thead>
                    <tr style="height: 35px;">
                        <th colspan="2"><label><span>Elige el mes y el año</span></label></th>
                    </tr>   
                </thead>
                <tbody>
                    <tr>
                        <td><label for="Mes">Mes <span><em>(requerido)</em></span></label></td>
                        <td><?php include("../recursos/mesSelect.php"); ?></td>
                    </tr>
                    <tr>
                        <td><label for="anno">Año <span><em>(requerido)</em></span></label></td>
                        <td><input id="anno" type="number" name="anno" min="1990" max="2500" size="4" value="<?php echo date("Y"); ?>" required/></td>
                    </tr>
                    <tr><td colspan="2"><button id="btn_filtrar" align="middle" class="formButtom" onClick="load()" name="generar" >FILTRAR</button></td></tr>
                </tbody>

            </table>
    </div>
        </div>

    </body>

</html>

1 respuesta 1

0

Ya lo solucione. Tan sencillo como esto:

postData: {
                    mes: nMes,
                    anno: nAnno,
                },

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.