Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 29/03/2011, 11h08   #1
Candidat au titre de Membre du Club
 
franco
Inscription : mars 2011
Messages : 199
Détails du profil
Informations personnelles :
Nom : franco

Informations forums :
Inscription : mars 2011
Messages : 199
Points : 11
Points : 11
Par défaut 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
alen22 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 11h32   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
jqgrid ?
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 12h16   #3
Candidat au titre de Membre du Club
 
franco
Inscription : mars 2011
Messages : 199
Détails du profil
Informations personnelles :
Nom : franco

Informations forums :
Inscription : mars 2011
Messages : 199
Points : 11
Points : 11
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
alen22 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 12h31   #4
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 007
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 007
Points : 45 091
Points : 45 091
jqgrid est directement reliable en datasource à un fichier xml
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 12h46   #5
Candidat au titre de Membre du Club
 
franco
Inscription : mars 2011
Messages : 199
Détails du profil
Informations personnelles :
Nom : franco

Informations forums :
Inscription : mars 2011
Messages : 199
Points : 11
Points : 11
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
alen22 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 17h14   #6
Membre habitué
 
Homme
Inscription : septembre 2008
Messages : 161
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Congo-Kinshasa

Informations forums :
Inscription : septembre 2008
Messages : 161
Points : 139
Points : 139
Envoyer un message via Skype™ à tresorunikin
vas d'abord voir jqgrid et sa doc. Elle parait explicite
tresorunikin est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/03/2011, 21h35   #7
Candidat au titre de Membre du Club
 
franco
Inscription : mars 2011
Messages : 199
Détails du profil
Informations personnelles :
Nom : franco

Informations forums :
Inscription : mars 2011
Messages : 199
Points : 11
Points : 11
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
alen22 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/03/2011, 13h23   #8
Candidat au titre de Membre du Club
 
franco
Inscription : mars 2011
Messages : 199
Détails du profil
Informations personnelles :
Nom : franco

Informations forums :
Inscription : mars 2011
Messages : 199
Points : 11
Points : 11
personne n'a aucune idée sur "jqgrid"

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


merci d'avance
alen22 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/04/2011, 04h02   #9
Membre habitué
 
Homme
Inscription : septembre 2008
Messages : 161
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Congo-Kinshasa

Informations forums :
Inscription : septembre 2008
Messages : 161
Points : 139
Points : 139
Envoyer un message via Skype™ à tresorunikin
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
tresorunikin est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 20h37.


 
 
 
 
Partenaires

Hébergement Web