[AJAX] Créer tableau, valeurs en colonnes

**baggie** · 10/11/2010, 15h34

Bonjour,

je souhaite créer un tableau dans lequel j'aurai des évènements classés par mois, et en colonnes.

Exemple :
Première colonne : titre1 - evt1 evt2 evt3
Deuxième colonne : titre2 - evt4
Troisième colonne : titre3 - evt5

En sachant que mes titres sont le nom des mois.
Donc pour chaque mois (seulement 4 en tout), je récupère les évènements associés et je les affiche dans une colonne les uns sous les autres, puis je passe au mois d'après.

Il faut que lorsque j'arrive sur ma page, mon tableau s'affiche directement.

Pour le moment, je récupère toutes mes variables dans un seul tableau $tot, sous cette forme : "annee-mois.id_evenement".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
// Calcul des dates pour avoir le mois en cours, le mois d'avant et les deux mois suivants
$date   = date('Y-m-d');
$actuel = date('Y-m');
$last   = date('Y-m',strtotime("$date -1 month"));
$mois1  = date('Y-m',strtotime("$date +1 month"));
$mois2  = date('Y-m',strtotime("$date +2 months"));
 
// Tableau des différentes dates
$tab = array($last,$actuel,$mois1,$mois2);
 
$i = 0;
$val = array();
$tot = array();
// Parcours du tableau et requête pour chaque mois
foreach($tab as $key)
{
	// Récupération de l'année et du mois
	$explode  = explode('-',$key);
	$anneekey = $explode[0];
	$moiskey  = $explode[1];
 
	// Recherche de tous les id pour ce mois et cette année
	$req = 'SELECT id FROM table WHERE mois = '.$moiskey.' AND annee = '.$anneekey;
	$res = mysql_query($req);
	if(mysql_num_rows($res) != 0)
	{
		while ($row = mysql_fetch_array($res))
		{
			// Récupération des id
			$val[] = $anneekey.'-'.$moiskey.'.'.$row['id'];
			$i++;
		}
		$tot[] = $val;
		$val = '';
	}
}
echo json_encode($tot);

Sauf que renvoyer un tableau dans mon fichier pour le traitement en ajax n'est peut-être pas la meilleure solution puisque j'obtiens ceci comme résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[["2010-11.60107"],["2010-12.60703"]]

Et je ne sais pas comment l'exploiter.

Voici mon JS et HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$.ajax({
	type: 'GET',
	data: '',
	url: 'liste.php',
	success: function(html) {
		$("#lastmonth").append(html);
	}
});
 
<div id="conteneur">
    <div id="lastmonth"></div>
    <div id="mois1"><h3></h3></div>
    <div id="mois2"><h3></h3></div>
    <div id="mois3"><h3></h3></div>
</div>

Dans l'idée, j'ai le nom du mois entre les <h3> et les évènements (les id) à la suite pour chaque mois.

Sauf que je ne vois pas bien comment exploiter mon tableau.
Si vous pouviez m'aider

Invité · 15/11/2010, 11h46

Bonjour,
En tout premier, je ne fais que de l'Ajax pur (sans framework)
donc du bon vieux javascript en dur ...

Ceci étant dit, j'ais un exemple de gestion de tableau genre excell (au niveau du look) qui semble répondre a ton souhait.

Je te laisses l'adapter a ton cas ... (je l'ais écris avec un SQL en PDO)
ajax_edite_tableau.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
 
<?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
//============ICI connection PDO=============
    $result = $bdd->prepare("SELECT * FROM ajax_tableau");
    $result->execute();
 
?>
<script type="text/javascript">
<!--
function image()
{
document.getElementById('load').style.display="none";
}
function maFonctionAjax(lindex, pseudo,valeur)
{
  //========version reduite ne fait qu envoyer===========
  var MonAjax;
  if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
  else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    MonAjax = false;   }
  MonAjax.open('POST',"ajax_edite_tableau_pdo.php",true);
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
          if (document.getElementById) 
          {    
                    document.getElementById('LeRetourL').innerHTML=''+MonAjax.responseText+'';
                    setTimeout("image()", 2000);                    
          }     
      }
      else{
           document.getElementById('load').style.display="inline";
           }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('lindex='+lindex+'&pseudo='+pseudo+'&valeur='+valeur);                  
}
 /* =========================================== */
//Fonction renvoyant le code de la touche appuyée lors d'un événement clavier
function getKeyCode(evenement)
{
 for (prop in evenement)  {  if(prop == 'which') return evenement.which;  }
 return event.keyCode;
}
 
 
//On ne pourra éditer qu'une valeur à la fois
var editionEnCours = false;
function trim(value) {
   var temp = value;
   var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
   if (obj.test(temp)) { temp = temp.replace(obj, '$2'); }
   var obj = /  /g;
   while (temp.match(obj)) { temp = temp.replace(obj, " "); }
   return temp;
}
 
//Fonction donnant la largeur en pixels du texte donné (merci SpaceFrog !)
function getTextWidth(texte)
{
	//Valeur par défaut : 150 pixels
	var largeur = 150;
 
	if(trim(texte) == "")
	{
		return largeur;
	}
 
	//Création d'un span caché que l'on "mesurera"
	var span = document.createElement("span");
	span.style.visibility = "hidden";
	span.style.position = "absolute";
 
	//Ajout du texte dans le span puis du span dans le corps de la page
	span.appendChild(document.createTextNode(texte));
	document.getElementsByTagName("body")[0].appendChild(span);
 
	//Largeur du texte
	largeur = span.offsetWidth;
 
	//Suppression du span
	document.getElementsByTagName("body")[0].removeChild(span);
	span = null;
 
	return largeur;
}
 
 
//Fonction de modification inline de l'élément double-cliqué
function Lajax(id, obj, nomValeur)
{
	if(editionEnCours)
	{
		return false;
	}
	else
	{
		editionEnCours = true;
	}
 
	//Objet servant à l'édition de la valeur dans la page
	var input = null;
 
	//On crée un composant différent selon le type de la valeur à modifier
			input = document.createElement("input");
 
	//Assignation de la valeur
	if (obj.innerText)
		input.value = obj.innerText;
	else
		input.value = obj.textContent;
 
	input.value = trim(input.value);
 
	//On lui donne une taille un peu plus large que le texte à modifier
	input.style.width  = getTextWidth(input.value) + 30 + "px";
 
	//Remplacement du texte par notre objet input
	obj.replaceChild(input, obj.firstChild);
 
	//On donne le focus à l'input et on sélectionne le texte qu'il contient
	input.focus();
	input.select();
 
	//Assignation des deux événements qui déclencheront la sauvegarde de la valeur
 
	//Sortie de l'input
	input.onblur = function sortir()
	{
  sauverMod(id, obj, nomValeur, input.value);
		delete input;
 }
 
	//Appui sur la touche Entrée
	input.onkeydown = function keyDown(event)
	{
  if (!event&&window.event)
   {
    event = window.event;
   }
		if(getKeyCode(event) == 13)
   {
   sauverMod(id, obj, nomValeur, input.value);
			delete input;
   }
 }
}
 
 
 
//Fonction de sauvegarde des modifications apportées
function sauverMod(id, obj, nomValeur, valeur)
{
/* id   champ valeur */
  editionEnCours = false;
 
maFonctionAjax(id, nomValeur,valeur);
			obj.replaceChild(document.createTextNode(valeur), obj.firstChild);
}
 
</script>
	<h1>Liste d'utilisateurs</h1>
 
<div qlass='centre10'>
<img src='x_logos/ajaxloader.gif' style='visibility:hidden' id='load'  name='load' />
<div id='LeRetourL' class='LeRetourL' style='visibility:visible'>
</div>
 
	<table id="table-utilisateurs">
		<tr>
			<th>Nom</th>
			<th>Prénom</th>
			<th>Adresse</th>
			<th>Code Postal</th>
			<th>Ville</th>
			<th>Enfants</th>
			<th>Email</th>
		</tr>
 
<?php
while ($row = $result->fetch())
 {
echo ("<tr><td id='nom-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"nom\")'>".$row['nom']."</td>");
echo ("<td id='prenom-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"prenom\")'>".$row['prenom']."</td>");
echo ("<td id='adresse-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"adresse\")'>".$row['adresse']."</td>");
echo ("<td id='cp-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"code_postal\")'>".$row['code_postal']."</td>");
echo ("<td id='ville-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"ville\")'>".$row['ville']."</td>");
echo ("<td id='enfants-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"enfants\")'>".$row['enfants']."</td>");
echo ("<td id='email-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"email\")'>".$row['email']."</td></tr>");
        }
$bdd=NULL;
?>
	</table>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id='info'></div>
</body></html>

ajax_edite_tableau_pdo.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?PHP
session_start();
//================ICI connection SQL PDO==========
header('Content-type: text/html; charset=ISO-8859-1');
 
$id = (isset($_POST['lindex'])) ? intval($_POST['lindex']) : 9999;
$champ = (isset($_POST['pseudo'])) ? $_POST['pseudo'] : '';
$valeur = (isset($_POST['valeur'])) ? $_POST['valeur'] : '';
 
if($id==9999 || $champ=="" || $valeur==""   ||
 !in_array(  $champ, array('nom', 'prenom', 'adresse', 'code_postal', 'ville', 'enfants', 'email')))
  {
    echo "probleme id>>".$id." >>".$valeur." >>".$champ." >>";
    exit;
  }
 $result = $bdd->prepare("UPDATE ajax_tableau SET ".$champ." = :Saval WHERE id= :Xid");
 $result->execute(array(':Saval'=>$valeur,':Xid' => $id));
 $bdd=NULL;
 echo "";
 
?>

**scourjean** · 15/11/2010, 12h21

Dans ta récupération des données, essaye ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$val[$i]["IdMois"] = $anneekey.'-'.$moiskey;
$val[$i]["IdEvent"] = $row['id'];

Et après comme ça dans le JS tu peux parser le JSON :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var obj = $.parseJSON(html);

Dans obj tu auras donc ton tableau array sous forme d'objet

Il te suffira de boucler pour traiter toutes les lignes.

Récupération de l'IdEvent du premier élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

obj[0].IdEvent

**baggie** · 15/11/2010, 13h24

Merci beaucoup pour vos réponses !

J'avais trouvé une autre solution, en splitant les résultats quand je les récupère.
Cependant, je vais quand même regarder vos solutions, voir si je peux apporter des améliorations à mon code ! ^^

Merci !

[AJAX] Créer tableau, valeurs en colonnes

AJAX

Vue hybride

Discussions similaires

Partager

Partager