Author Topic: how to use php/mysql data?  (Read 209 times)

blackpanthere

  • Newbie
  • *
  • Posts: 1
    • View Profile
how to use php/mysql data?
« on: July 11, 2019, 05:12:38 pm »
Hello,

I would like to use this

Code: [Select]
<script>
  $(function () {
 
  $(".selector").find(".ui-widget-header .ui-icon-arrow-4-diag").click();
  $.extend($.paramquery.pqGrid.regional['fr']);
    $.extend($.paramquery.pqGrid.prototype.options, $.paramquery.pqGrid.regional['fr']);
        $.extend($.paramquery.pqPager.prototype.options, $.paramquery.pqPager.regional['fr']);

       
var options = [{"Formationsecours":"PSC1"},{"Formationsecours":"PSE1"},{"Formationsecours":"PSE2"},{"Formationsecours":"Resp. PAPS"},{"Formationsecours":"CI"}];

        //define colModel
        var colM = [
        { title: "Nivol", width: 100, dataIndx: "Nivol", align: "center",
            filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
        },
        { title: "Nom", width: 120, dataIndx: "Nom", align: "center",
            filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
        },
{ title: "Prenom", width: 120, dataIndx: "Prenom", align: "center",
            filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
        },
{ title: "Age", width: 100, dataIndx: "Majorite", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Majorite",
        labelIndx: "Majorite",
        listeners: ['change']
    }
},

{ title: "Tel", width: 120, dataIndx: "Tel", align: "center",
            filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
        },
{ title: "Email", minWidth: 150, dataIndx: "Email", align: "center",
            filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
        },
        { title: "Permis B", width: 100, dataIndx: "PermisVoiture", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "PermisVoiture",
        labelIndx: "PermisVoiture",
        listeners: ['change']
    }
},
        { title: "Permis ASF", width: 100, dataIndx: "PermisVoitur", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "PermisVoitur",
        labelIndx: "PermisVoitur",
        listeners: ['change']
    }
},
{ title: "Permis Ambu", width: 100, dataIndx: "PermisAmbu", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "PermisAmbu",
        labelIndx: "PermisAmbu",
        listeners: ['change']
    }
},
        { title: "MSSP", width: 100, dataIndx: "FormationMSSP", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "FormationMSSP",
        labelIndx: "FormationMSSP",
        listeners: ['change']
    }
},
{ title: "TCAS", width: 100, dataIndx: "FormationTCAS", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "FormationTCAS",
        labelIndx: "FormationTCAS",
        listeners: ['change']
    }
},
{ title: "ISE", width: 100, dataIndx: "FormationISE", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "FormationISE",
        labelIndx: "FormationISE",
        listeners: ['change']
    }
},
        { title: "TCAU", width: 100, dataIndx: "FormationTCAU", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "FormationTCAU",
        labelIndx: "FormationTCAU",
        listeners: ['change']
    }
},
        { title: "TCEO", width: 100, dataIndx: "FormationTCEO", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "FormationTCEO",
        labelIndx: "FormationTCEO",
        listeners: ['change']
    }
},
{ title: "Secourisme", width: 140, dataIndx: "Formationsecours", align: "center",
            filter: { type: 'select',
                     options: options,
                 attr: "multiple",
                 condition: "range",
                 prepend: { '': '[ Vide ]' },                                     
                valueIndx: "Formationsecours",
                labelIndx: "Formationsecours",           
                listeners: ['change'],
                init: function () {
                    $(this).pqSelect();
                }
            }
        },
{ title: "Action Secourisme", width: 100, dataIndx: "Actionsecourisme", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actionsecourisme",
        labelIndx: "Actionsecourisme",
        listeners: ['change']
    }
},
{ title: "Action Formation", width: 100, dataIndx: "Actionformation", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actionformation",
        labelIndx: "Actionformation",
        listeners: ['change']
    }
},
{ title: "Action AS", width: 100, dataIndx: "Actionas", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actionas",
        labelIndx: "Actionas",
        listeners: ['change']
    }
},
{ title: "Action Jeunesse", width: 100, dataIndx: "Actionjeunesse", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actionjeunesse",
        labelIndx: "Actionjeunesse",
        listeners: ['change']
    }
},
{ title: "Action Deva", width: 100, dataIndx: "Actiondeva", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actiondeva",
        labelIndx: "Actiondeva",
        listeners: ['change']
    }
}, { title: "Action Urgence", width: 100, dataIndx: "Actionurgence", align: "center",
    filter: { type: "select",
        condition: 'equal',
        prepend: { '': '--Filtrer--' },
        valueIndx: "Actionurgence",
        labelIndx: "Actionurgence",
        listeners: ['change']
    }
}
];
        //define dataModel
        var dataModel = {
            location: "local",
            sorting: "local",
            sortIndx: "Nom",
            sortDir: "up"
        }
        var obj = {
width: $(window).width(),
height: $(window).height()-50,
            dataModel: dataModel,
            colModel: colM,
            //hwrap: false,
            pageModel: { type: "local", rPP: 50, rPPOptions: [10, 50, 100, 500, 1000] },
            editable: false,
            selectionModel: { type: 'cell' },
            filterModel: { on: true, mode: "AND", header: true },
            title: "Bénévoles de l urgence",
            resizable: true,
            numberCell: { show: true },
            columnBorders: true,
            //nombre de colonne fixe
freezeCols: 3,
toolbar: {
                cls: 'pq-toolbar-export',
                items: [
{
                        type: 'button',
                        label: "Exporter en CSV",
                        icon: 'ui-icon-document',
                        listeners: [{
                            "click": function (evt) {
                                $("#grid_filter").pqGrid("exportCsv", { url: "export_to_csv.php" });
                            }
                        }]
                },
{
                    type: 'button',
                    label: 'Sauver Etat',
                    listener: function () {
                        this.saveState();
                    }
                },
                {
                    type: 'button',
                    label: 'Restaurer Etat',
                    listener: function () {
                        //debugger;
                        this.loadState();
                    }
                }
]
            }               
        };



        var $grid = $("#grid_filter").pqGrid(obj);

        //load all data at once
        $grid.pqGrid("showLoading");
        $.ajax({ url: "urgences.json",
            //url: "/pro/orders/get",//for ASP.NET
            //url: "/orders.php", //for PHP
            cache: false,
            async: true,
            dataType: "JSON",
            success: function (response) {
                var grid = $grid.pqGrid("getInstance").grid;
                grid.option("dataModel.data", response.data);

  var column = grid.getColumn({ dataIndx: "Majorite" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Majorite"] });

var column = grid.getColumn({ dataIndx: "PermisVoiture" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["PermisVoiture"] });

                var column = grid.getColumn({ dataIndx: "PermisVoitur" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["PermisVoitur"] });

var column = grid.getColumn({ dataIndx: "PermisAmbu" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["PermisAmbu"] });

var column = grid.getColumn({ dataIndx: "FormationMSSP" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["FormationMSSP"] });

var column = grid.getColumn({ dataIndx: "FormationTCAS" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["FormationTCAS"] });

var column = grid.getColumn({ dataIndx: "FormationISE" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["FormationISE"] });

var column = grid.getColumn({ dataIndx: "FormationTCAU" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["FormationTCAU"] });

var column = grid.getColumn({ dataIndx: "FormationTCEO" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["FormationTCEO"] });

var column = grid.getColumn({ dataIndx: "Actionsecourisme" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actionsecourisme"] });

var column = grid.getColumn({ dataIndx: "Actionformation" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actionformation"] });

var column = grid.getColumn({ dataIndx: "Actionas" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actionas"] });

var column = grid.getColumn({ dataIndx: "Actionjeunesse" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actionjeunesse"] });

var column = grid.getColumn({ dataIndx: "Actiondeva" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actiondeva"] });

var column = grid.getColumn({ dataIndx: "Actionurgence" });
                var filter = column.filter;
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["Actionurgence"] });

                grid.refreshDataAndView();
                grid.hideLoading();
            }
        });

        //change shipping region filter based upon checkbox.
        $("#range_chkbox").click(function (evt) {
            var filter = $grid.pqGrid("getColumn", { dataIndx: "PermisVoiture" }).filter;
            if ($(this).is(":checked")) {
                $.extend(filter, {
                    attr: "multiple",
                    condition: "range",
                    prepend: { '': '[ Empty ]' },
                    value: [],
                    cache: null,
                    style: "height:20px;"
                });
            }
            else {
                $.extend(filter, {
                    attr: "",
                    condition: "equal",
                    prepend: { '': '' },
                    value: null,
                    cache: null,
                    style: ""
                });
            }
            //refresh the filter and view.
            $grid.pqGrid("filter", { oper: 'add', data: [] })
                .pqGrid("refresh");


        });

//change id of grid to ignore previous state.
        var grid = pq.grid("#grid_filter", obj);

        $(window).on('unload', function () {
            grid.saveState();
        });
        grid.on("destroy", function () {
            this.saveState();
        });

    });

</script>

with php but i don't understand how... i read the doc but... not understand, can you help me ?

thanks