Discussion :

[alen22]

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 :

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

1
2
<table id="tbl">
</table>

merci d'avance

[SpaceFrog]

jqgrid ?

[alen22]

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 :

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
<?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 :

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
$(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 :

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
$(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

[SpaceFrog]

jqgrid est directement reliable en datasource à un fichier xml

[alen22]

mais en se basant sur code

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
$(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

[tresorunikin]

vas d'abord voir jqgrid et sa doc. Elle parait explicite