Show Posts
1
Help for ParamQuery Grid (free version) / how to use php/mysql data?
« on: July 11, 2019, 05:12:38 pm »
Hello,
I would like to use this
with php but i don't understand how... i read the doc but... not understand, can you help me ?
thanks
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