tableau avec jquery

Version imprimable

29/03/2011, 11h08
alen22

tableau avec jquery
salut,

je veux savoir est ce que c'est possible de créer un tableau dynamique avec jquery

en html si on fait appel à ce tableau
Code:

1 2 <table id="tbl"> </table>
merci d'avance
29/03/2011, 11h32
SpaceFrog

jqgrid ?

merci pour la réponse

mais le problème est comment l'adopter dans mon besoin

car le contenu de tableau creé est relier au fichier test.xml

bref au contenu de ce fichier

Code:

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
<?xml version="1.0" encoding="UTF-8"?>
<societes>
   <societe>
      <nom>HP</nom>
      <nombre>10</nombre>
      <equipe>
          <specialite>DEV</specialite>
          <nombreequipe>36</nombreequipe>
           <local>parix</local>
           <etat>marche</etat>
    </equipe>
     <equipe>
          <specialite>finance</specialite>
          <nombreequipe>26</nombreequipe>
           <local>nework</local>
           <etat>arret</etat>
    </equipe>
 
   </societe>
 <societe>
      <nom>IBM</nom>
      <nombre>40</nombre>
      <equipe>
          <specialite>marketing</specialite>
          <nombreequipe>68</nombreequipe>
          <local>london</local>
          <etat>arret</etat>
    </equipe>
    <equipe>
          <specialite>comerce</specialite>
          <nombreequipe>88</nombreequipe>
          <local>germani</local>
          <etat>marche</etat>
    </equipe>
 
 
 
</societes>

le but apres bien sur creer une liste deroulante(qui contient les nom des societe :HP et IBM) (j'arrive a créer cette liste c'est simple)

est quand je choisie par exemple HP elle m'affiche un tableau a 4 colonnes (specialite,nombreequipe,local,etat)

les colonnes sont relier a l'équipe de société sélectionné

exemple de scenario d'exécution si je choisie HP
le tableau dois être comme suit

specialite nombreequipe local etat

DEV 36 parix marche
finance 26 nework arret

le problème est que le nombre des lignes dépend des nombres des équipes de la societe sélectionné

pour calculer les nombres des équipes de société sélectionné est

Code:

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
$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
 
				var valeur=$(this).val();
 
 
 
                                var cont=0;
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
cont++;// cette ligne calcul les nombre d'equipe lié au chois de depart
 
						 });
 
  }
 });
 });

mais pour remplir le tableau moi j'essaye avec ce code

Code:

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
$(document).ready(function() {
 
       createDynamicTable($("#tbl"), cont, 4);
 
   });
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
 
 
 
 
 function createDynamicTable(tbody, rows, cols) {
 
         if (tbody == null || tbody.length < 1) return;
 
           for (var r = 1; r <= rows; r++) {
 
               var trow = $("<tr>");
for (var c = 1; c <= cols; c++) {
contVal1=$(item2).children("specialite").text(); 
 
contVal2=$(item2).children("nombreequipe").text(); 	
 
contVal3=$(item2).children("local").text(); 	
					contVal4=$(item2).children("etatl").text(); 
$("<td>")
.text(contVal1,contVal2,contVal3,contVal4)
 
                          .data("col", c)
 
                          .appendTo(trow);
 
              }
 
             trow.appendTo(tbody);
 
         }
 
    }   
 
 
 
 
 
 
 
 
 
 
 
 
 
 });
 
  }
 });
 });

c'est sur que cette solution est incorrecte car elle est différent à ce que vous dite " jqgrid"

merci de m'aidez à corriger ce code

29/03/2011, 12h31
SpaceFrog

jqgrid est directement reliable en datasource à un fichier xml

mais en se basant sur code

Code:

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
$(document).ready(function(){
 
				$('#list').change(function(){
 
 
 
 
				var valeur=$(this).val();
 
 
 
 
 
$.post('test.xml', function(data) {
					$(data).find("societes").children("societe").each(function(i, item){
 
								h1=$(item).children("nom").text();
 
								if (h1 == valeur){
 
 
								$(item).children("equipe").each(function(i, item2){
 
.......
.....
.....
.......

comment utilisant cette notion de "jqgrid " pour compléter ce code

tous ce code je dois l'intégrer dans une page .jsp

29/03/2011, 17h14
tresorunikin

vas d'abord voir jqgrid et sa doc. Elle parait explicite
29/03/2011, 21h35
alen22

merci pour votre réponse
j'ai déjà consulter des doc sur le net pour ce plugin

mais franchement ca apparait difficile
autre choses il parait que "jqgrid " est adopter pour php et .net et moi je travail avec des pages jsp

vous avez un aperçu sur mon objectif attendu de ce plugin
(la création du tableau avec comme contenu :les données récupérées de fichier test.xml)

si possible pouvez me donnez juste le debut de code avec jqgrid bien sur je pense que ce code dois etre apres

Code:

$('#list').change(function(){

puisque tous est dépend de la chois de la liste
30/03/2011, 13h23
alen22

personne n'a aucune idée sur "jqgrid"

juste une idée sur le code en utilisant cette notion(jqgrid)

merci d'avance

Là tu vas faire du javascript pur!!! Sinon JqGrid facilite la tâche et t'évite de te taper sur le nerf au cas où tu changeais la source des données; d'où t'as intérêt à t'y pencher
Pour créer un élément (tableau, span, etc) la fonction magique est

Code:

var maTable = document.createElement("TABLE");

t'as aussi le choix entre
Code:

1 2 3 4 5 6 7 var monTitre = document.createElement("CAPTION"); var monHead=document.createElement("THEAD"); var corpsDeTable= document.createElement("TBODY"); var piedDeTable= document.createElement("TFOOT"); var LigneDeTable=document.createElement("TR"); var CelluleDeTable=document.createElement("TR");
Pour ajouter un élément à un autre, utilise

Code:

appendChild(objetElementAjoutable);

On y va pour un tableau de dimension 50%, à 2 lignes et 3 colonnes
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var i, j,objetLigne,objetCellule; objetTable.bgColor="#efefef"; objetTable.setAttribute("width","50%"); for (i=0; i<2; i++) { objetLigne = document.createElement("TR"); objetTable.appendChild(objetLigne); for (j=0; j<3; j++) { objetCellule = document.createElement("TD"); objetCellule.innerHTML = "Un truc de ton node xml"; objetLigne.appendChild(objetCellule); } } $("#tabContainer").appendChild(objetTable);
Voilà, g pas essayé mais c'est juste pour te donner une idée! Avec le souci de voir un Resolu à la prochaine visite