Guriddo » Topic: Datetimepicker in search/filter

Datetimepicker in search/filter

Guriddo
datetimepicker search
Datetimepicker in search/filter

Tagged: datetimepicker search

This topic has 2 replies, 2 voices, and was last updated 10 years ago by Saroumane.

Creator

Topic

April 14, 2016 at 9:01 pm #125079

Saroumane

Participant

Hello,

I have a problem in the search mode. Usually I have no problem in search mode with a datepicker . But today I want use a datetimepicker. Everything is Ok in add or edit mode. I have a problem only with the search mode. When I choose my datetime field, the datetime window don’t appear.

Thank for your help.

Kind Regards,

PS: Sorry for my bad english

index page:



QSE REX-AT

&amp;nbsp;

&amp;nbsp;

&lt;!--- !--&gt;

&lt;script src=&quot;../../js/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../js/trirand/i18n/grid.locale-fr.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../js/trirand/jquery.jqGrid.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[
   
		
	$.jgrid.no_legacy_api = true;
	$.jgrid.useJSON = true;
	$.jgrid.defaults.width = &quot;1200&quot;;
	
// ]]&gt;&lt;/script&gt;

&lt;script src=&quot;../../js/jquery-ui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../../js/jquery-ui-timepicker-addon.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

&lt;!-- tableau dynamique généré par jqgrid --&gt;
&lt;!--?php include (&quot;grid_rex_at.php&quot;);?--&gt; &lt;!-- Chargement du tableau --&gt;
&lt;!-- fin du tableau dynamique --&gt;

QSE REX-AT

&nbsp;

$.jgrid.no_legacy_api = true;

$.jgrid.useJSON = true;

$.jgrid.defaults.width = "1200";

// ]]></script>

Grid page:

&lt;!--?php // Load des parametres de connexion require_once &#039;../rex_at-config.php&#039;; // Load des Class jqGrid require_once &quot;../../php/PHPSuito/jqGrid.php&quot;; // Load des paramétres PDO pour jqGrid require_once &quot;../../php/PHPSuito/DBdrivers/jqGridPdo.php&quot;; require_once &quot;../../php/PHPSuito/jqCalendar.php&quot;; // Load des paramétres français pour jqGrid require_once &quot;../../php/PHPSuito/External/tcpdf/config/lang/fra.php&quot;; mysql_set_charset(&#039;utf8&#039;); // Connexion au serveur $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Déclaration du format UTF-8 de la BDD $conn-&gt;query(&quot;SET NAMES utf8&quot;);&lt;/p&gt;
&lt;p&gt;			// Création d&#039;une instance jqGrid&lt;br ?--&gt; $grid = new jqGridRender($conn);

// Load de la requête SQL
$grid-&gt;SelectCommand = &#039;SELECT id_at, type, date_at, uo_poles, unites, description, commentaires, nom, prenom, CP, jeune_embauche, arret, duree_arret, code1, code2 , code3, lesion, siege, epi, DPA_trait, DPA_valid FROM rex_at&#039;;

// Déclaration de la table MaJ
$grid-&gt;table = &#039;rex_at&#039;;

// Définition d&#039;une clé primaire
$grid-&gt;setPrimaryKeyId(&quot;id_at&quot;);
$grid-&gt;serialKey = false;

//Déclaration du format d&#039;échange en json
$grid-&gt;dataType = &#039;json&#039;;

// Déclaration du model du grid
$grid-&gt;setColModel();

// Déclaration du fichier origine des données
$grid-&gt;setUrl(&#039;grid_rex_at.php&#039;);

// Déclaration d&#039;autres options
$grid-&gt;setGridOptions(array(
&quot;caption&quot;=&gt;&quot;Saisie REX des AT TMV&quot;, // Titre du tableau
&quot;rowNum&quot;=&gt;15, // Nombre de lignes par défaut à afficher
&quot;rowList&quot;=&gt;array(20,35,50), // Déclaration du nombres de lignes affichables
&quot;sortname&quot;=&gt;&quot;date_at&quot;, // Déclaration du tri par défaut
&quot;sortorder&quot;=&gt;&quot;desc&quot;, // Ordre de tri des lignes
&quot;width&quot;=&gt;1900, // Largeur du tableau en px
&quot;height&quot;=&gt;&quot;Auto&quot;, // Hauteur automatique du tableau
&quot;hoverrows&quot;=&gt;true // highlight la ligne survolée
));

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

// Règle d&#039;édition des champs par défaut

$grid-&gt;setColProperty(&#039;id_at&#039;, array(&quot;editoptions&quot;=&gt;array(&quot;readonly&quot;=&gt;true)));
$grid-&gt;setColProperty(&#039;id_at&#039;, array(&quot;hidden&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;type&#039;, array(&quot;label&quot;=&gt;&quot;Type&quot;, &quot;width&quot;=&gt;70, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;uo_poles&#039;, array(&quot;label&quot;=&gt;&quot;UO/Pôles&quot;, &quot;width&quot;=&gt;90, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true, &quot;classes&quot;=&gt;&quot;cvteste&quot;));
$grid-&gt;setColProperty(&#039;unites&#039;, array(&quot;label&quot;=&gt;&quot;Unités&quot;, &quot;width&quot;=&gt;90, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;nom&#039;, array(&quot;label&quot;=&gt;&quot;Nom&quot;, &quot;width&quot;=&gt;90, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;prenom&#039;, array(&quot;label&quot;=&gt;&quot;Prénom&quot;, &quot;width&quot;=&gt;70, &quot;align&quot;=&gt;&quot;left&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;CP&#039;, array(&quot;label&quot;=&gt;&quot;Num CP&quot;, &quot;width&quot;=&gt;60, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;jeune_embauche&#039;, array(&quot;label&quot;=&gt;&quot;J-emb&quot;, &quot;align&quot;=&gt;&quot;center&quot;, &quot;width&quot;=&gt;40, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;arret&#039;, array(&quot;label&quot;=&gt;&quot;Arrêt&quot;, &quot;width&quot;=&gt;25, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;lesion&#039;, array(&quot;label&quot;=&gt;&quot;Lésion&quot;, &quot;width&quot;=&gt;60, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;duree_arret&#039;, array(&quot;label&quot;=&gt;&quot;Durée arrêt&quot;, &quot;width&quot;=&gt;60, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true,&quot;formatter&quot;=&gt;&quot;integer&quot;, &quot;formatoptions&quot;=&gt;array(&quot;suffix&quot;=&gt;&quot; jours&quot;)));
$grid-&gt;setColProperty(&#039;siege&#039;, array(&quot;label&quot;=&gt;&quot;Siège&quot;, &quot;width&quot;=&gt;40, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;epi&#039;, array(&quot;label&quot;=&gt;&quot;EPI&quot;, &quot;width&quot;=&gt;20, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;DPA_trait&#039;, array(&quot;label&quot;=&gt;&quot;Traite DPA&quot;, &quot;width&quot;=&gt;50, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true, &quot;formatter&quot;=&gt;&quot;integer&quot;, &quot;formatoptions&quot;=&gt;array(&quot;suffix&quot;=&gt;&quot; jours&quot;)));
$grid-&gt;setColProperty(&#039;DPA_valid&#039;, array(&quot;label&quot;=&gt;&quot;Valid DPA&quot;, &quot;width&quot;=&gt;50, &quot;align&quot;=&gt;&quot;center&quot;, &quot;editable&quot;=&gt;true, &quot;formatter&quot;=&gt;&quot;integer&quot;, &quot;formatoptions&quot;=&gt;array(&quot;suffix&quot;=&gt;&quot; jours&quot;)));

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

// règle d&#039;édition des champs dropdown
$grid-&gt;setColProperty(&#039;code2&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;,&quot;label&quot;=&gt;&quot;Codage N2&quot;, &quot;width&quot;=&gt;110, &quot;align&quot;=&gt;&quot;left&quot;,&quot;editoptions&quot;=&gt;array(&quot;value&quot;=&gt;&quot; :Select&quot;)));
$grid-&gt;setColProperty(&#039;code1&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;, &quot;label&quot;=&gt;&quot;Codage N1&quot;, &quot;width&quot;=&gt;110, &quot;align&quot;=&gt;&quot;left&quot;,&quot;editoptions&quot;=&gt;array(&quot;value&quot;=&gt;&quot; :Select&quot;)));
$grid-&gt;setColProperty(&#039;code3&#039;, array(&quot;edittype&quot;=&gt;&quot;select&quot;, &quot;label&quot;=&gt;&quot;Codage N3&quot;, &quot;width&quot;=&gt;110, &quot;align&quot;=&gt;&quot;left&quot;,&quot;editoptions&quot;=&gt;array(&quot;value&quot;=&gt;&quot; :Select&quot;)));

$grid-&gt;setSelect(&quot;type&quot;, &quot;SELECT champ_type, champ_type FROM drop_type_at ORDER BY champ_type ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;uo_poles&quot;, &quot;SELECT pole, pole FROM menu_pole ORDER BY pole ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;unites&quot;, &quot;SELECT unite, unite FROM &lt;code&gt;menu_unite&lt;/code&gt; ORDER BY &lt;code&gt;unite&lt;/code&gt; ASC &quot;,false,true,true);
$grid-&gt;setSelect(&quot;lesion&quot;, &quot;SELECT &lt;code&gt;lesion&lt;/code&gt;,&lt;code&gt;lesion&lt;/code&gt; FROM &lt;code&gt;drop_lesion&lt;/code&gt; ORDER BY &lt;code&gt;lesion&lt;/code&gt; ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;siege&quot;, &quot;SELECT &lt;code&gt;siege&lt;/code&gt;,&lt;code&gt;siege&lt;/code&gt; FROM &lt;code&gt;drop_siege&lt;/code&gt; ORDER BY &lt;code&gt;siege&lt;/code&gt; ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;jeune_embauche&quot;, &quot;SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;arret&quot;, &quot;SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC&quot;,false,true,true);
$grid-&gt;setSelect(&quot;epi&quot;, &quot;SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC&quot;,false,true,true);

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

// Champ en zone de texte

$grid-&gt;setColProperty(&#039;description&#039;, array(&quot;label&quot;=&gt;&quot;Description&quot;, &quot;edittype&quot;=&gt; &#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;rows&quot;=&gt;4, &quot;cols&quot;=&gt;50, &quot;maxlength&quot;=&gt;255, &quot;width&quot;=&gt;120), &quot;width&quot;=&gt;200, &quot;editable&quot;=&gt;true));
$grid-&gt;setColProperty(&#039;commentaires&#039;, array(&quot;label&quot;=&gt;&quot;Commentaires&quot;, &quot;edittype&quot;=&gt; &#039;textarea&#039;,&quot;editoptions&quot;=&gt;array(&quot;rows&quot;=&gt;4, &quot;cols&quot;=&gt;50, &quot;maxlength&quot;=&gt;255, &quot;width&quot;=&gt;120), &quot;width&quot;=&gt;100, &quot;editable&quot;=&gt;true));

// ****************************************
// Option d&#039;édition Time datepicker
$grid-&gt;setColProperty(&#039;date_at&#039;,
array(&quot;formatter&quot;=&gt;&quot;date&quot;,
&quot;label&quot;=&gt;&quot;Date événement&quot;,&quot;align&quot;=&gt;&quot;center&quot;, &quot;width&quot;=&gt;100, &quot;editable&quot;=&gt;true,
&quot;formatoptions&quot;=&gt;array(&quot;reformatAfterEdit&quot;=&gt;true, &quot;srcformat&quot;=&gt;&quot;Y-m-d H:i:s&quot;, &quot;newformat&quot;=&gt;&quot;m/d/Y H:i&quot;),
&quot;editoptions&quot;=&gt;array(&quot;dataInit&quot;=&gt;
&quot;js:function(elm){setTimeout(function(){
jQuery(elm).datetimepicker({dateFormat:&#039;mm/dd/yy&#039;});
jQuery(&#039;.ui-datepicker&#039;).css({&#039;font-size&#039;:&#039;75%&#039;});
},200);}&quot;)
));

//$grid-&gt;datearray = array(&#039;date_at&#039;); // Déclaration du champ contenant une date
$grid-&gt;setDbTime(&#039;Y-m-d H:i:s&#039;);
$grid-&gt;setUserTime(&quot;d/m/Y H:i&quot;);

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

// Fonction de génération des menus déroulants en cascade
$beforeshowadd = &lt;&lt;&lt; BEFORESHOW
function(formid)
{
//
jQuery.ajax({
url: &#039;drop_N1.php&#039;,
dataType: &#039;json&#039;,
async : false,
// envoi q:1 dans le cas d&#039;ajout ou de modification drop_N1.php
data: {q:1},
data: {z:1},

success : function(response)
{
var t=&quot;Select&quot;;
jQuery.each(response, function(i,item) {
t += &quot;&quot;+item.value+&quot;&quot;;
});
jQuery(&quot;#code1&quot;,formid).html(&quot;&quot;).append(t);
}
});
jQuery(&quot;#code2&quot;,formid).html(&quot;Select&quot;);
}
BEFORESHOW;

$beforeshowedit = &lt;&lt;&lt; BEFORESHOW2
function(formid)
{
var sr = jQuery(&quot;#grid&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
var selc = jQuery(&quot;#grid&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;code1&#039;);
jQuery.ajax({
url: &#039;drop_N1.php&#039;,
dataType: &#039;json&#039;,
async : false,
// Ne pas envoyer q en cas d&#039;ajout ou de modif
success : function(response)
{
var t=&quot;&quot;;
jQuery.each(response, function(i,item) {
if( selc == item.id) {
t += &quot;&quot;+item.value+&quot;&quot;;
} else {
t += &quot;&quot;+item.value+&quot;&quot;;
}
});
jQuery(&quot;#code1&quot;,formid).html(&quot;&quot;).append(t);
}
});

// Prend la valeur du menu déroulant 1
var cntryval = $(&quot;#code1&quot;,formid).val();
jQuery(&quot;#code2&quot;,formid).html(&quot;Select&quot;);
if(cntryval) {
// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2
// SVP regarder le fichier drop_N2.php
jQuery.ajax({
url: &#039;drop_N2.php&#039;,
dataType: &#039;json&#039;,
data: {q:cntryval},
success : function(response)
{
var t=&quot;&quot;, sv=&quot;&quot;;
if(sr)
{
// récupére le menu N2 dans le Grid
sv = jQuery(&quot;#grid&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;code2&#039;);
jQuery.each(response, function(i,item) {
t += &quot;&quot;+item.value+&quot;&quot;;
});
// vide la selection et ajoute la nouvelle valeur
jQuery(&quot;#code2&quot;,formid).html(&quot;&quot;).append(t);
if(sv)
{
// sélectionne la valeur du menu N2
jQuery(&quot;#code2&quot;,formid).val(sv).removeAttr(&quot;disabled&quot;);
}
}
}
});
} else {
jQuery(&quot;#code2&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
}

var sr3 = jQuery(&quot;#grid&quot;).jqGrid(&#039;getGridParam&#039;,&#039;selrow&#039;);
var selc3 = jQuery(&quot;#grid&quot;).jqGrid(&#039;getCell&#039;,sr,&#039;code2&#039;);
jQuery.ajax({
url: &#039;drop_N2.php&#039;,
dataType: &#039;json&#039;,
async : false,
// Ne pas envoyer q en cas d&#039;ajout ou de modif
success : function(response)
{
var t3=&quot;&quot;;
jQuery.each(response, function(i,item) {
if( selc3 == item.id) {
t3 += &quot;&quot;+item.value+&quot;&quot;;
} else {
t3 += &quot;&quot;+item.value+&quot;&quot;;
}
});
jQuery(&quot;#code2&quot;,formid).html(&quot;&quot;).append(t);
}
});

// Prend la valeur du menu déroulant 2

var N3val = $(&quot;#code2&quot;,formid).val();
// var N3val = &quot;Sol glissant&quot;;

jQuery(&quot;#code3&quot;,formid).html(&quot;Select&quot;);
if(N3val) {
// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3
// SVP regarder le fichier drop_N3.php
jQuery.ajax({
url: &#039;drop_N3.php&#039;,
dataType: &#039;json&#039;,
data: {z:N3val},
success : function(response)
{
var t3=&quot;&quot;, sv3=&quot;&quot;;
if(sr3)
{
// récupére le menu 3 dans le Grid
sv3 = jQuery(&quot;#grid&quot;).jqGrid(&#039;getCell&#039;,sr3,&#039;code3&#039;);
jQuery.each(response, function(i,item) {
t3 += &quot;&quot;+item.value+&quot;&quot;;
});
// vide la selection et ajoute la nouvelle valeur
jQuery(&quot;#code3&quot;,formid).html(&quot;&quot;).append(t3);
if(sv3)
{
// sélectionne la valeur du menu N2
jQuery(&quot;#code3&quot;,formid).val(sv3).removeAttr(&quot;disabled&quot;);
}
}
}
});
} else {
jQuery(&quot;#code3&quot;,formid).attr(&quot;disabled&quot;,&quot;disabled&quot;);
}

// fin de test menu lvl 3

}

BEFORESHOW2;

// Avec cet événement nous lions un changement au niveau du premier dropdown
// Si une nouvelle valeur est choisi, nous faisons un appel AJAX pour avoir les valeurs du second dropdown lié au premier
// Notez que cet événement doit être exécutée une seule fois si le formulaire est construit.

$initform = &lt;&lt;&lt; INITFORM
function(formid)
{
jQuery(&quot;#code1&quot;,formid).change(function(e) {
var cntryval = $(this).val();
if(cntryval) {
jQuery(&quot;#code2&quot;,formid).html(&quot;&quot;);
jQuery.ajax({
url: &#039;drop_N2.php&#039;,
dataType: &#039;json&#039;,
data: {q:cntryval},
success : function(response)
{
var t=&quot;&quot;;
jQuery.each(response, function(i,item) {
t += &quot;&quot;+item.value+&quot;&quot;;
});
jQuery(&quot;#code2&quot;,formid).append(t).removeAttr(&quot;disabled&quot;);
}
});
}
});

jQuery(&quot;#code2&quot;,formid).change(function(e) {
var N3val = $(this).val();
if(N3val) {
jQuery(&quot;#code3&quot;,formid).html(&quot;&quot;);
jQuery.ajax({
url: &#039;drop_N3.php&#039;,
dataType: &#039;json&#039;,
data: {z:N3val},
success : function(response)
{
var t3=&quot;&quot;;
jQuery.each(response, function(i,item) {
t3 += &quot;&quot;+item.value+&quot;&quot;;
});
jQuery(&quot;#code3&quot;,formid).append(t3).removeAttr(&quot;disabled&quot;);
}
});
}
});

// fin de test menu lvl 3

}
INITFORM;

// ***************** Fin du script des menus en cascade ***********************

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

// Parametrage des export Excel et PDF
$grid-&gt;exportfile = &#039;Export_retard_tmv.xls&#039;; // Définition du nom du fichier d&#039;export Excel

$oper = jqGridUtils::GetParam(&quot;oper&quot;); // Parametre d&#039;exportation PDF
if($oper == &quot;pdf&quot;) {
$grid-&gt;setPdfOptions(array(

&quot;page_orientation&quot;=&gt;&quot;L&quot;, // Orientation de la page en paysage &quot;L&quot; ou portrait &quot;P&quot;
&quot;header&quot;=&gt;true, // Activation d&#039;un entête
&quot;margin_top&quot;=&gt;20, // Déclaration d&#039;une en-tete de haut de page
&quot;margin_bottom&quot;=&gt;0, // Déclaration d&#039;une en-tete de bas de page
&quot;margin_footer&quot;=&gt;5,
&quot;header_logo&quot;=&gt;&quot;logo.gif&quot;, // Nom d&#039;un logo dans répertioire PDF php/ tcpdf
&quot;header_logo_width&quot;=&gt;20, //Déclaration de la largeur du logo
&quot;header_title&quot;=&gt;&quot;Export retard sortie de site&quot;, // Titre de l&#039;en-tête
&quot;shrink_cell&quot;=&gt;false, // Activation/Desactivation du tassement des valeurs
&quot;encoding&quot; =&gt; &quot;UTF-8&quot;, // Encodage UTF-8
&quot;reprint_grid_header&quot;=&gt;true, // Affichage des titres de colonnes sur chaque page
&quot;header_string&quot;=&gt;&quot;Technicentre de Villeneuve&quot; // Texte d&#039;en-tête à imprimer

));
}
//*********************************

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

// Configuration du navigateur
$grid-&gt;navigator = true;
// Activation des options d&#039;édition
$grid-&gt;setNavOptions(&#039;navigator&#039;, array(&quot;excel&quot;=&gt;true,&quot;add&quot;=&gt;true,&quot;edit&quot;=&gt;true,&quot;del&quot;=&gt;true,&quot;view&quot;=&gt;true, &quot;search&quot;=&gt;true));
// Fermeture de la fenetre d&#039;édition apres validation
$grid-&gt;setNavOptions(&#039;edit&#039;,array(&quot;closeAfterEdit&quot;=&gt;true,&quot;editCaption&quot;=&gt;&quot;MaJ Action&quot;,&quot;height&quot;=&gt;&#039;auto&#039;,&quot;dataheight&quot;=&gt;&quot;auto&quot;,&quot;width&quot;=&gt;&#039;1000&#039;,&quot;top&quot;=&gt;&#039;50&#039;, &quot;left&quot;=&gt;&#039;100&#039;,&quot;bSubmit&quot;=&gt;&quot;Update&quot;, &quot;viewPagerButtons&quot;=&gt;false));
$grid-&gt;setNavOptions(&#039;add&#039;,array(&quot;closeAfterEdit&quot;=&gt;true,&quot;editCaption&quot;=&gt;&quot;Nouvelle action&quot;,&quot;height&quot;=&gt;&#039;auto&#039;,&quot;dataheight&quot;=&gt;&quot;auto&quot;,&quot;width&quot;=&gt;&#039;1000&#039;,&quot;top&quot;=&gt;&#039;50&#039;, &quot;left&quot;=&gt;&#039;100&#039;,&quot;bSubmit&quot;=&gt;&quot;Update&quot;, &quot;viewPagerButtons&quot;=&gt;false));

$grid-&gt;renderGrid(&#039;#grid&#039;,&#039;#pager&#039;,true, null, null, true,true);
$conn = null;

?&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

<!--?php // Load des parametres de connexion require_once '../rex_at-config.php'; // Load des Class jqGrid require_once "../../php/PHPSuito/jqGrid.php"; // Load des paramétres PDO pour jqGrid require_once "../../php/PHPSuito/DBdrivers/jqGridPdo.php"; require_once "../../php/PHPSuito/jqCalendar.php"; // Load des paramétres français pour jqGrid require_once "../../php/PHPSuito/External/tcpdf/config/lang/fra.php"; mysql_set_charset('utf8'); // Connexion au serveur $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Déclaration du format UTF-8 de la BDD $conn->query("SET NAMES utf8");</p>

<p> // Création d'une instance jqGrid<br ?--> $grid = new jqGridRender($conn);

// Load de la requête SQL

$grid->SelectCommand = 'SELECT id_at, type, date_at, uo_poles, unites, description, commentaires, nom, prenom, CP, jeune_embauche, arret, duree_arret, code1, code2 , code3, lesion, siege, epi, DPA_trait, DPA_valid FROM rex_at';

// Déclaration de la table MaJ

$grid->table = 'rex_at';

// Définition d'une clé primaire

$grid->setPrimaryKeyId("id_at");

$grid->serialKey = false;

//Déclaration du format d'échange en json

$grid->dataType = 'json';

// Déclaration du model du grid

$grid->setColModel();

// Déclaration du fichier origine des données

$grid->setUrl('grid_rex_at.php');

// Déclaration d'autres options

$grid->setGridOptions(array(

"caption"=>"Saisie REX des AT TMV", // Titre du tableau

"rowNum"=>15, // Nombre de lignes par défaut à afficher

"rowList"=>array(20,35,50), // Déclaration du nombres de lignes affichables

"sortname"=>"date_at", // Déclaration du tri par défaut

"sortorder"=>"desc", // Ordre de tri des lignes

"width"=>1900, // Largeur du tableau en px

"height"=>"Auto", // Hauteur automatique du tableau

"hoverrows"=>true // highlight la ligne survolée

));

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

// Règle d'édition des champs par défaut

$grid->setColProperty('id_at', array("editoptions"=>array("readonly"=>true)));

$grid->setColProperty('id_at', array("hidden"=>true));

$grid->setColProperty('type', array("label"=>"Type", "width"=>70, "align"=>"center", "editable"=>true));

$grid->setColProperty('uo_poles', array("label"=>"UO/Pôles", "width"=>90, "align"=>"center", "editable"=>true, "classes"=>"cvteste"));

$grid->setColProperty('unites', array("label"=>"Unités", "width"=>90, "align"=>"left", "editable"=>true));

$grid->setColProperty('nom', array("label"=>"Nom", "width"=>90, "align"=>"left", "editable"=>true));

$grid->setColProperty('prenom', array("label"=>"Prénom", "width"=>70, "align"=>"left", "editable"=>true));

$grid->setColProperty('CP', array("label"=>"Num CP", "width"=>60, "align"=>"center", "editable"=>true));

$grid->setColProperty('jeune_embauche', array("label"=>"J-emb", "align"=>"center", "width"=>40, "editable"=>true));

$grid->setColProperty('arret', array("label"=>"Arrêt", "width"=>25, "align"=>"center", "editable"=>true));

$grid->setColProperty('lesion', array("label"=>"Lésion", "width"=>60, "editable"=>true));

$grid->setColProperty('duree_arret', array("label"=>"Durée arrêt", "width"=>60, "align"=>"center", "editable"=>true,"formatter"=>"integer", "formatoptions"=>array("suffix"=>" jours")));

$grid->setColProperty('siege', array("label"=>"Siège", "width"=>40, "align"=>"center", "editable"=>true));

$grid->setColProperty('epi', array("label"=>"EPI", "width"=>20, "align"=>"center", "editable"=>true));

$grid->setColProperty('DPA_trait', array("label"=>"Traite DPA", "width"=>50, "align"=>"center", "editable"=>true, "formatter"=>"integer", "formatoptions"=>array("suffix"=>" jours")));

$grid->setColProperty('DPA_valid', array("label"=>"Valid DPA", "width"=>50, "align"=>"center", "editable"=>true, "formatter"=>"integer", "formatoptions"=>array("suffix"=>" jours")));

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

// règle d'édition des champs dropdown

$grid->setColProperty('code2', array("edittype"=>"select","label"=>"Codage N2", "width"=>110, "align"=>"left","editoptions"=>array("value"=>" :Select")));

$grid->setColProperty('code1', array("edittype"=>"select", "label"=>"Codage N1", "width"=>110, "align"=>"left","editoptions"=>array("value"=>" :Select")));

$grid->setColProperty('code3', array("edittype"=>"select", "label"=>"Codage N3", "width"=>110, "align"=>"left","editoptions"=>array("value"=>" :Select")));

$grid->setSelect("type", "SELECT champ_type, champ_type FROM drop_type_at ORDER BY champ_type ASC",false,true,true);

$grid->setSelect("uo_poles", "SELECT pole, pole FROM menu_pole ORDER BY pole ASC",false,true,true);

$grid->setSelect("unites", "SELECT unite, unite FROM <code>menu_unite</code> ORDER BY <code>unite</code> ASC ",false,true,true);

$grid->setSelect("lesion", "SELECT <code>lesion</code>,<code>lesion</code> FROM <code>drop_lesion</code> ORDER BY <code>lesion</code> ASC",false,true,true);

$grid->setSelect("siege", "SELECT <code>siege</code>,<code>siege</code> FROM <code>drop_siege</code> ORDER BY <code>siege</code> ASC",false,true,true);

$grid->setSelect("jeune_embauche", "SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC",false,true,true);

$grid->setSelect("arret", "SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC",false,true,true);

$grid->setSelect("epi", "SELECT Choix,Choix FROM drop_choix_o_n ORDER BY Choix ASC",false,true,true);

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

// Champ en zone de texte

$grid->setColProperty('description', array("label"=>"Description", "edittype"=> 'textarea',"editoptions"=>array("rows"=>4, "cols"=>50, "maxlength"=>255, "width"=>120), "width"=>200, "editable"=>true));

$grid->setColProperty('commentaires', array("label"=>"Commentaires", "edittype"=> 'textarea',"editoptions"=>array("rows"=>4, "cols"=>50, "maxlength"=>255, "width"=>120), "width"=>100, "editable"=>true));

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

// Option d'édition Time datepicker

$grid->setColProperty('date_at',

array("formatter"=>"date",

"label"=>"Date événement","align"=>"center", "width"=>100, "editable"=>true,

"formatoptions"=>array("reformatAfterEdit"=>true, "srcformat"=>"Y-m-d H:i:s", "newformat"=>"m/d/Y H:i"),

"editoptions"=>array("dataInit"=>

"js:function(elm){setTimeout(function(){

jQuery(elm).datetimepicker({dateFormat:'mm/dd/yy'});

jQuery('.ui-datepicker').css({'font-size':'75%'});

},200);}")

));

//$grid->datearray = array('date_at'); // Déclaration du champ contenant une date

$grid->setDbTime('Y-m-d H:i:s');

$grid->setUserTime("d/m/Y H:i");

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

// Fonction de génération des menus déroulants en cascade

$beforeshowadd = <<< BEFORESHOW

function(formid)

{

jQuery.ajax({

url: 'drop_N1.php',

dataType: 'json',

async : false,

// envoi q:1 dans le cas d'ajout ou de modification drop_N1.php

data: {q:1},

data: {z:1},

success : function(response)

{

var t="Select";

jQuery.each(response, function(i,item) {

t += ""+item.value+"";

});

jQuery("#code1",formid).html("").append(t);

}

});

jQuery("#code2",formid).html("Select");

}

BEFORESHOW;

$beforeshowedit = <<< BEFORESHOW2

function(formid)

{

var sr = jQuery("#grid").jqGrid('getGridParam','selrow');

var selc = jQuery("#grid").jqGrid('getCell',sr,'code1');

jQuery.ajax({

url: 'drop_N1.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

if( selc == item.id) {

t += ""+item.value+"";

} else {

t += ""+item.value+"";

}

});

jQuery("#code1",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 1

var cntryval = $("#code1",formid).val();

jQuery("#code2",formid).html("Select");

if(cntryval) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 2

// SVP regarder le fichier drop_N2.php

jQuery.ajax({

url: 'drop_N2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="", sv="";

if(sr)

{

// récupére le menu N2 dans le Grid

sv = jQuery("#grid").jqGrid('getCell',sr,'code2');

jQuery.each(response, function(i,item) {

t += ""+item.value+"";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#code2",formid).html("").append(t);

if(sv)

{

// sélectionne la valeur du menu N2

jQuery("#code2",formid).val(sv).removeAttr("disabled");

}

});

} else {

jQuery("#code2",formid).attr("disabled","disabled");

}

var sr3 = jQuery("#grid").jqGrid('getGridParam','selrow');

var selc3 = jQuery("#grid").jqGrid('getCell',sr,'code2');

jQuery.ajax({

url: 'drop_N2.php',

dataType: 'json',

async : false,

// Ne pas envoyer q en cas d'ajout ou de modif

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

if( selc3 == item.id) {

t3 += ""+item.value+"";

} else {

t3 += ""+item.value+"";

}

});

jQuery("#code2",formid).html("").append(t);

}

});

// Prend la valeur du menu déroulant 2

var N3val = $("#code2",formid).val();

// var N3val = "Sol glissant";

jQuery("#code3",formid).html("Select");

if(N3val) {

// Si la valeur est trouvée, utilise AJAX pour obtenir les valeurs de Niv 3

// SVP regarder le fichier drop_N3.php

jQuery.ajax({

url: 'drop_N3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="", sv3="";

if(sr3)

{

// récupére le menu 3 dans le Grid

sv3 = jQuery("#grid").jqGrid('getCell',sr3,'code3');

jQuery.each(response, function(i,item) {

t3 += ""+item.value+"";

});

// vide la selection et ajoute la nouvelle valeur

jQuery("#code3",formid).html("").append(t3);

if(sv3)

{

// sélectionne la valeur du menu N2

jQuery("#code3",formid).val(sv3).removeAttr("disabled");

}

});

} else {

jQuery("#code3",formid).attr("disabled","disabled");

}

// fin de test menu lvl 3

}

BEFORESHOW2;

// Avec cet événement nous lions un changement au niveau du premier dropdown

// Si une nouvelle valeur est choisi, nous faisons un appel AJAX pour avoir les valeurs du second dropdown lié au premier

// Notez que cet événement doit être exécutée une seule fois si le formulaire est construit.

$initform = <<< INITFORM

function(formid)

{

jQuery("#code1",formid).change(function(e) {

var cntryval = $(this).val();

if(cntryval) {

jQuery("#code2",formid).html("");

jQuery.ajax({

url: 'drop_N2.php',

dataType: 'json',

data: {q:cntryval},

success : function(response)

{

var t="";

jQuery.each(response, function(i,item) {

t += ""+item.value+"";

});

jQuery("#code2",formid).append(t).removeAttr("disabled");

}

});

}

});

jQuery("#code2",formid).change(function(e) {

var N3val = $(this).val();

if(N3val) {

jQuery("#code3",formid).html("");

jQuery.ajax({

url: 'drop_N3.php',

dataType: 'json',

data: {z:N3val},

success : function(response)

{

var t3="";

jQuery.each(response, function(i,item) {

t3 += ""+item.value+"";

});

jQuery("#code3",formid).append(t3).removeAttr("disabled");

}

});

}

});

// fin de test menu lvl 3

}

INITFORM;

// ***************** Fin du script des menus en cascade ***********************

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

// Parametrage des export Excel et PDF

$grid->exportfile = 'Export_retard_tmv.xls'; // Définition du nom du fichier d'export Excel

$oper = jqGridUtils::GetParam("oper"); // Parametre d'exportation PDF

if($oper == "pdf") {

$grid->setPdfOptions(array(

"page_orientation"=>"L", // Orientation de la page en paysage "L" ou portrait "P"

"header"=>true, // Activation d'un entête

"margin_top"=>20, // Déclaration d'une en-tete de haut de page

"margin_bottom"=>0, // Déclaration d'une en-tete de bas de page

"margin_footer"=>5,

"header_logo"=>"logo.gif", // Nom d'un logo dans répertioire PDF php/ tcpdf

"header_logo_width"=>20, //Déclaration de la largeur du logo

"header_title"=>"Export retard sortie de site", // Titre de l'en-tête

"shrink_cell"=>false, // Activation/Desactivation du tassement des valeurs

"encoding" => "UTF-8", // Encodage UTF-8

"reprint_grid_header"=>true, // Affichage des titres de colonnes sur chaque page

"header_string"=>"Technicentre de Villeneuve" // Texte d'en-tête à imprimer

));

}

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

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

// Configuration du navigateur

$grid->navigator = true;

// Activation des options d'édition

$grid->setNavOptions('navigator', array("excel"=>true,"add"=>true,"edit"=>true,"del"=>true,"view"=>true, "search"=>true));

// Fermeture de la fenetre d'édition apres validation

$grid->setNavOptions('edit',array("closeAfterEdit"=>true,"editCaption"=>"MaJ Action","height"=>'auto',"dataheight"=>"auto","width"=>'1000',"top"=>'50', "left"=>'100',"bSubmit"=>"Update", "viewPagerButtons"=>false));

$grid->setNavOptions('add',array("closeAfterEdit"=>true,"editCaption"=>"Nouvelle action","height"=>'auto',"dataheight"=>"auto","width"=>'1000',"top"=>'50', "left"=>'100',"bSubmit"=>"Update", "viewPagerButtons"=>false));

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

$conn = null;

Jqgrid PHP 5.1.0

Creator

Topic

Viewing 2 replies - 1 through 2 (of 2 total)

Author

Replies

April 15, 2016 at 2:19 am #125080

guriddo.support

Participant

Hello,

You have set the datepicker only for editing – you use editoptioms dataInit event.

In order to use the datepicker in search form, you will need to add the same code using search options.

Another solution is to use the setDatepicker PHP method where this is by default. See here

Kind Regards,

Will

Guriddo Support Team

April 16, 2016 at 7:27 pm #125083

Saroumane

Participant

Hello,

Thanks for your Help. It’s OK now !!!

// Option d&#039;édition Time datepicker
$grid-&gt;setColProperty(&#039;date_at&#039;, 
        array(&quot;formatter&quot;=&gt;&quot;date&quot;, 
		&quot;label&quot;=&gt;&quot;Date événement&quot;,&quot;align&quot;=&gt;&quot;center&quot;,	&quot;width&quot;=&gt;100, &quot;editable&quot;=&gt;true,
&quot;formatoptions&quot;=&gt;array(&quot;reformatAfterEdit&quot;=&gt;true, &quot;srcformat&quot;=&gt;&quot;Y-m-d H:i:s&quot;, &quot;newformat&quot;=&gt;&quot;d/m/Y H:i&quot;),
              &quot;editoptions&quot;=&gt;array(&quot;dataInit&quot;=&gt;
                &quot;js:function(elm){setTimeout(function(){
                    jQuery(elm).datetimepicker({dateFormat:&#039;dd/mm/yy&#039;});
                    jQuery(&#039;.ui-datepicker&#039;).css({&#039;font-size&#039;:&#039;75%&#039;});
                },200);}&quot;),
				&quot;searchoptions&quot;=&gt;array(&quot;dataInit&quot;=&gt;
                &quot;js:function(elm){setTimeout(function(){
                    jQuery(elm).datetimepicker({dateFormat:&#039;dd/mm/yy&#039;});
                    jQuery(&#039;.ui-datepicker&#039;).css({&#039;font-size&#039;:&#039;75%&#039;});
                },200);}&quot;
            )));

// Option d'édition Time datepicker

$grid->setColProperty('date_at',

array("formatter"=>"date",

"label"=>"Date événement","align"=>"center", "width"=>100, "editable"=>true,

"formatoptions"=>array("reformatAfterEdit"=>true, "srcformat"=>"Y-m-d H:i:s", "newformat"=>"d/m/Y H:i"),

"editoptions"=>array("dataInit"=>

"js:function(elm){setTimeout(function(){

jQuery(elm).datetimepicker({dateFormat:'dd/mm/yy'});

jQuery('.ui-datepicker').css({'font-size':'75%'});

},200);}"),

"searchoptions"=>array("dataInit"=>

"js:function(elm){setTimeout(function(){

jQuery(elm).datetimepicker({dateFormat:'dd/mm/yy'});

jQuery('.ui-datepicker').css({'font-size':'75%'});

},200);}"

)));

Kind Regards,

Sarou

Jqgrid PHP 5.1.0

Author

Replies

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Stay connected with us in your favorite flavor!

Datetimepicker in search/filter

Search Forum

Recent Replies

Forum Statistics

UserOnline