[AJAX] Tableau HTML, lignes et colonnes dynamiques

Tableau HTML, lignes et colonnes dynamiques [AJAX] - HTML/CSS - Programmation

Marsh Posté le 25-09-2007 à 22:58:23    

Bonjour à tous,
 
J'ai cherché un peu partout s'il existait des morceaux de codes de tableaux html dynamiques. Je cherche à construire un tableau dont les lignes peuvent se regrouper et les colonnes disparaître après sélection d'une ou plusieurs lignes.
 
Pour l'instant, je construis "bêtement" le tableau via PHP en balise "tableau" html (table, th, tr et td). Mais je suis obligé de recharger la page après sélection d'une ou plusieurs lignes pour faire disparaître des colonnes.
 
Mais AJAX me permettrait de cacher des lignes et des colonnes du tableau de façon plus sympa, je pense, et éviterait surtout de ne pas recharger la page à chaque sélection de ligne adéquate.
 
Sauriez-vous comment je dois m'y prendre ?
 
Je pense à cette structure de "Tableau de div"
 

Code :
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6. <script language="JavaScript" type="text/JavaScript" src="prototype.js"></script>
  7. <script>
  8. function test(elt){
  9.  var d = $(elt);
  10.  d.toggle();
  11. }
  12. function col(elt){
  13.  var d = $H(elt);
  14.  d.toggle();
  15. }
  16. </script>
  17. <body>
  18. <div id="monTableau">
  19. <div id="titre">
  20.  <div class="legende"></div>
  21.  <div class="col1">colonne 1</div>
  22.  <div class="col2">colonne 2</div>
  23.  <div class="col3">colonne 3</div>
  24.  <div class="col4">colonne 4</div>
  25. </div>
  26. <div id="group1">
  27.  <div class="th" onClick="test('tr1');">1er regroupement</div>
  28.  <div id="tr1">
  29.   <div class="legende" onClick="col('col1');">legende 1</div>
  30.   <div class="col1">a1</div>
  31.   <div class="col2">a2</div>
  32.   <div class="col3">a3</div>
  33.   <div class="col4">a4</div>
  34.   <div class="legende">legende 2</div>
  35.   <div class="col1">b1</div>
  36.   <div class="col2">b2</div>
  37.   <div class="col3">b3</div>
  38.   <div class="col4">b4</div>
  39.   <div class="legende">legende 3</div>
  40.   <div class="col1">c1</div>
  41.   <div class="col2">c2</div>
  42.   <div class="col3">c3</div>
  43.   <div class="col4">c4</div>
  44.  </div>
  45. </div>
  46. <div id="group2">
  47.  <div class="th" onClick="test('tr2');">2nd regroupement</div>
  48.  <div id="tr2">
  49.   <div class="legende">legende 4</div>
  50.   <div class="col1">d1</div>
  51.   <div class="col2">d2</div>
  52.   <div class="col3">d3</div>
  53.   <div class="col4">d4</div>
  54.   <div class="legende">legende 5</div>
  55.   <div class="col1">e1</div>
  56.   <div class="col2">e2</div>
  57.   <div class="col3">e3</div>
  58.   <div class="col4">e4</div>
  59.  </div>
  60. </div>
  61. <div id="group3">
  62.  <div class="th" onClick="test('tr3');">3eme regroupement</div>
  63.  <div id="tr3">
  64.   <div class="legende">legende 6</div>
  65.   <div class="col1">f1</div>
  66.   <div class="col2">f2</div>
  67.   <div class="col3">f3</div>
  68.   <div class="col4">f4</div>
  69.   <div class="legende">legende 7</div>
  70.   <div class="col1">g1</div>
  71.   <div class="col2">g2</div>
  72.   <div class="col3">g3</div>
  73.   <div class="col4">g4</div>
  74.   <div class="legende">legende 8</div>
  75.   <div class="col1">h1</div>
  76.   <div class="col2">h2</div>
  77.   <div class="col3">h3</div>
  78.   <div class="col4">h4</div>
  79.  </div>
  80. </div>
  81. </div>
  82. </body>
  83. </html>


 
Suis-je sur la bonne piste ? J'arrive à réduire les lignes qui appartiennent aux différents "tr" si à la construction de la page je mets les bons "trx" dans les évènements "onClick". Je pense qu'il doit y avoir un meilleur moyen que celui-ci. Si vous avez des idées, je suis preneur.
 
Par contre, pour les colonnes, je sèche un peu. J'ai mis différentes class de colonnes, mais peut être faut il que je mette plutôt les différentes colonnes sur le tag "name" ou sur le tag "id" de la div pour les manipuler, non ?
 
Eclairez-moi de vos conseils, je suis tout ouïe.
 
Merci de vos réponses


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 25-09-2007 à 22:58:23   

Reply

Marsh Posté le 25-09-2007 à 23:35:25    

Pourquoi ne pas utiliser un tableau html?


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 25-09-2007 à 23:41:00    

Vous excuserez le manque de mise en forme de mes div, mais avec des css, on peut obtenir l'apparence d'un tableau.
 
Peut on utiliser un tableau avec prototype.js comme on peut utiliser des div, à savoir cacher des colonnes et/ou des lignes ?


Message édité par Manu la Science le 25-09-2007 à 23:41:11

---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 26-09-2007 à 00:27:31    

Code :
  1. table.rows[i].cells[0]


 
Donne la premiere colonne de table, lorsque tu itères sur 0 < i < table.rows.length
 

Code :
  1. table.rows[i]


 
Donne les lignes de table lorsque tu itères sur 0 < i < table.rows.length
 
Ensuite j'ai l'impression que tu confonds AJAX et les effets cuculs visuels, ça n'a rien à voir.

Message cité 1 fois

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 26-09-2007 à 07:58:51    

Je ne pense pas confondre AJAX et les effets visuels comme tu dis.
 
Dans mes cellules, je vais mettre un peu de code HTML qui me permettra de faire afficher une image et un commentaire au passage de la souris (effet non "cucul" si utilisé à bon escient). De plus, je dois gérer des groupes de lignes car je peux avoir de nombreuses lignes et elles seront regroupées par catégories.
Donc, pour éviter une perte de temps aux utilisateurs, je veux ranger ces lignes dans des catégories bien établies et permettre aux utilisateurs de ne visualiser que les lignes qui les intéressent et qu'ils auront demandées (sur clic ou checkbox).
Ces catégories pourraient être présentes plusieurs fois dans le tableau car c'est une classification de lignes, un regroupement sur certains critères.
Le système du tableau javascript pourrait il me permettre de gérer cela ?
 
Je pensais à AJAX car normalement, il me permettrait de gérer le masquage ou non d'éléments d'une catégorie, le masquage ou non d'une colonne. AJAX permet aussi de remplir des div de code html dans une page déjà chargée côté client ou de "vider" d'autre div.
 
Je vais chercher un exemple de données plus parlant afin de mieux me faire comprendre.


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 26-09-2007 à 09:49:49    

Shinuza a écrit :

Je pensais à AJAX car normalement, il me permettrait de gérer le masquage ou non d'éléments d'une catégorie, le masquage ou non d'une colonne. AJAX permet aussi de remplir des div de code html dans une page déjà chargée côté client ou de "vider" d'autre div.
 


Tu vient de démontrer l'impréssion de Shinuza :S
 
AJAX n'a aucune vocation a régler les aspects visuel de ton application web.

Reply

Marsh Posté le 26-09-2007 à 10:19:42    

Mais AJAX n'est-il pas du javascript plus avancé en terme d'accès au dom ou au contenu d'une page ?
 
AJAX ne permet-il pas d'accéder plus directement à des classes ou des id (fonction $()...) ?
 
Je ne suis pas un accro d'AJAX, car je ne le maitrise pas du tout et le connais que de nom.  
 
J'ai fait un exemple un peu plus précis, il y a encore une mise en forme à revoir, mais le principe est là
 

Code :
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6. <script language="JavaScript" type="text/JavaScript" src="prototype.js"></script>
  7. <script>
  8.     function test(elt){
  9.         var d = $(elt);
  10.         d.toggle();   
  11. }   
  12. function col(elt){       
  13.  var d = $H(elt);       
  14.  d.toggle();   
  15. }
  16. </script>
  17. <style>
  18. .col1 {
  19. position: absolute;
  20. left: 150px;
  21. top :0px;
  22. }
  23. .col2 {
  24. position: absolute;
  25. left: 200px;
  26. top :0px;
  27. }
  28. .col3 {
  29. position: absolute;
  30. left: 250px;
  31. top : 0px;
  32. }
  33. .col4 {
  34. position: absolute;
  35. left: 300px;
  36. top : 0px;
  37. }
  38. .th1 {
  39. position: relative;
  40. top: 10px;
  41. }
  42. .th2 {
  43. position: relative;
  44. left: 20px;
  45. top: 10px;
  46. }
  47. .legende {
  48. position: relative;
  49. left: 20px;
  50. width: 130px;
  51. }
  52. .clic {
  53. text-decoration: none;
  54. color:#000000;
  55. }
  56. </style>
  57. <body>
  58. <div id="monTableau">
  59.     <div id="titre">       
  60.  <div class="legende"></div>       
  61.  <div class="col1">rouge</div>       
  62.  <div class="col2">vert</div>       
  63.  <div class="col3">bleu</div>       
  64.  <div class="col4">gris</div>   
  65. </div>   
  66. <div id="group1">       
  67.  <div class="th1" onClick="test('tr1');"><a href="#" class="clic">voiture</a></div>       
  68.  <div id="tr1">           
  69.   <div class="th2" onClick="test('piece');"><a href="#" class="clic">pièces mécaniques</a></div>
  70.   <div id="piece" class="th2"> 
  71.    <div class="legende" onClick="col('col1');"><a href="#" class="clic">durite</a></div> 
  72.    <div class="col1"></div>           
  73.    <div class="col2"></div>           
  74.    <div class="col3"></div>           
  75.    <div class="col4">x</div>   
  76.    <div class="legende"><a href="#" class="clic">bloc moteur</a></div>     
  77.    <div class="col1"></div>           
  78.    <div class="col2"></div>           
  79.    <div class="col3"></div>           
  80.    <div class="col4">x</div>       
  81.    <div class="legende"><a href="#" class="clic">alternateur</a></div>           
  82.    <div class="col1"></div>           
  83.    <div class="col2"></div>           
  84.    <div class="col3"></div>           
  85.    <div class="col4">x</div> 
  86.    </div>   
  87.   <div class="th2" onClick="test('habitacle');"><a href="#" class="clic">habitacle</a></div>
  88.   <div id="habitacle" class="th2">
  89.    <div class="legende"><a href="#" class="clic">siège</a></div>
  90.    <div class="col1">x</div>           
  91.    <div class="col2">x</div>           
  92.    <div class="col3">x</div>           
  93.    <div class="col4">x</div>           
  94.    <div class="legende"><a href="#" class="clic">moquette</a></div>           
  95.    <div class="col1">x</div>           
  96.    <div class="col2">x</div>           
  97.    <div class="col3">x</div>           
  98.    <div class="col4">x</div>           
  99.    <div class="legende" onClick="col('col2');"><a href="#" class="clic">tableau de bord</a></div>           
  100.    <div class="col1"></div>           
  101.    <div class="col2"></div>           
  102.    <div class="col3">x</div>           
  103.    <div class="col4">x</div> 
  104.   </div>
  105.   <div class="th2" onClick="test('exterieur');"><a href="#" class="clic">extérieur</a></div>
  106.   <div id="exterieur" class="th2"> 
  107.    <div class="legende"><a href="#" class="clic">carosserie</a></div>
  108.    <div class="col1">x</div>           
  109.    <div class="col2">x</div>           
  110.    <div class="col3">x</div>           
  111.    <div class="col4">x</div>           
  112.    <div class="legende"><a href="#" class="clic">enjoliveurs</a></div>           
  113.    <div class="col1">x</div>           
  114.    <div class="col2">x</div>           
  115.    <div class="col3">x</div>           
  116.    <div class="col4">x</div>             
  117.   </div>
  118.  </div>
  119. </div>   
  120. <div id="group2">       
  121.  <div class="th1" onClick="test('tr2');">camion</div> 
  122.   <div id="tr2">   
  123.    <div class="th2" onClick="test('piece');">pièces mécaniques</div>
  124.    <div id="piece" class="th2"> 
  125.     <div class="legende" onClick="col('col1');">durite</div>
  126.     <div class="col1"></div>           
  127.     <div class="col2"></div>           
  128.     <div class="col3"></div>           
  129.     <div class="col4">x</div>           
  130.     <div class="legende">bloc moteur</div>           
  131.     <div class="col1"></div>           
  132.     <div class="col2"></div>           
  133.     <div class="col3"></div>           
  134.     <div class="col4">x</div>           
  135.     <div class="legende">alternateur</div>           
  136.     <div class="col1"></div>           
  137.     <div class="col2"></div>           
  138.     <div class="col3"></div>           
  139.     <div class="col4">x</div> 
  140.    </div>       
  141.    <div class="th2" onClick="test('habitacle');">habitacle</div>
  142.    <div id="habitacle" class="th2"> 
  143.        <div class="legende">siège</div>
  144.     <div class="col1">x</div>           
  145.     <div class="col2">x</div>           
  146.     <div class="col3">x</div>           
  147.     <div class="col4">x</div>           
  148.     <div class="legende">moquette</div>           
  149.     <div class="col1">x</div>           
  150.     <div class="col2">x</div>           
  151.     <div class="col3">x</div>           
  152.     <div class="col4">x</div>           
  153.     <div class="legende" onClick="col('col1');">tableau de bord</div>           
  154.     <div class="col1"></div>           
  155.     <div class="col2"></div>           
  156.     <div class="col3">x</div>           
  157.     <div class="col4">x</div>     
  158.    </div>
  159.    <div class="th2" onClick="test('remorque');">remorque</div>
  160.    <div id="remorque" class="th2"> 
  161.        <div class="legende">remorque de base</div>
  162.     <div class="col1">x</div>           
  163.     <div class="col2">x</div>           
  164.     <div class="col3">x</div>           
  165.     <div class="col4">x</div>           
  166.     <div class="legende">bâche</div>           
  167.     <div class="col1">x</div>           
  168.     <div class="col2">x</div>           
  169.     <div class="col3">x</div>           
  170.     <div class="col4">x</div>           
  171.     <div class="legende" onClick="col('col1');">portes arrière</div>           
  172.     <div class="col1"></div>           
  173.     <div class="col2"></div>           
  174.     <div class="col3">x</div>           
  175.     <div class="col4">x</div> 
  176.    </div>   
  177.   </div>
  178.  </div>     
  179. </div>
  180. <div id="group3">   
  181.  <div class="th1" onClick="test('tr3');">tracteur</div>       
  182.   <div id="tr3">   
  183.    <div class="th2" onClick="test('piece');">pièces mécaniques</div>
  184.    <div id="piece" class="th2"> 
  185.     <div class="legende" onClick="col('col1');">durite</div>
  186.     <div class="col1"></div>           
  187.     <div class="col2"></div>           
  188.     <div class="col3"></div>           
  189.     <div class="col4">x</div>           
  190.     <div class="legende">bloc moteur</div>           
  191.     <div class="col1"></div>           
  192.     <div class="col2"></div>           
  193.     <div class="col3"></div>           
  194.     <div class="col4">x</div>           
  195.     <div class="legende">alternateur</div>           
  196.     <div class="col1"></div>           
  197.     <div class="col2"></div>           
  198.     <div class="col3"></div>           
  199.     <div class="col4">x</div> 
  200.    </div>       
  201.    <div class="th2" onClick="test('remorque');">remorque</div>
  202.    <div id="remorque" class="th2"> 
  203.        <div class="legende">remorque de base</div>
  204.     <div class="col1">x</div>           
  205.     <div class="col2">x</div>           
  206.     <div class="col3">x</div>           
  207.     <div class="col4">x</div>           
  208.     <div class="legende">bâche</div>           
  209.     <div class="col1">x</div>           
  210.     <div class="col2">x</div>           
  211.     <div class="col3">x</div>           
  212.     <div class="col4">x</div>           
  213.     <div class="legende" onClick="col('col1');">portes arrière</div>           
  214.     <div class="col1"></div>           
  215.     <div class="col2"></div>           
  216.     <div class="col3">x</div>           
  217.     <div class="col4">x</div> 
  218.    </div>   
  219.   </div> 
  220.  </div>
  221. </div>
  222. </div>
  223. </body></html>


 
Pour l'exemple, j'essaie ainsi de gérer des types (de véhicules), des catégories (qui peuvent être présentes dans les différents types (de véhicules) comme les "pièces mécaniques" ) et enfin des éléments comme le "moteur". En fonction de ce que je choisis comme éléments, je dois faire disparaître les colonnes (couleur dans l'exemple).
J'ai pris ces données, car celles que je gérerai sont trop techniques pour être un bon exemple.
 
Mon but est de construire une grille de "décision" et le ou les résultats seraient les colonnes restantes (qui correspondraient à mes critères)
 
Si j'utilise un tableau javascript, comment pourrais-je gérer des groupes de lignes et des "super" groupes de lignes (groupes de groupes de lignes) ?
Je pensais que justement les div encastrées les unes dans les autres me permettrait de le gérer plutôt qu'un tableau javascript.
 
Je ne veux pas prendre AJAX pour mettre ABSOLUMENT des effets visuels (qui sont souvent une perte de temps) car mon public n'a souvent pas le temps d'attendre ou doit accéder très vite au résultat (d'où le non rechargement de page).
 
Merci de l'intérêt que vous portez à mon problème

Message cité 1 fois

---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 26-09-2007 à 10:29:20    

Manu la Science a écrit :

Mais AJAX n'est-il pas du javascript plus avancé en terme d'accès au dom ou au contenu d'une page ?
 
AJAX ne permet-il pas d'accéder plus directement à des classes ou des id (fonction $()...) ?
 
Je ne suis pas un accro d'AJAX, car je ne le maitrise pas du tout et le connais que de nom.  


NON : ajax ,ca veut juste dire "utiliser du javascript pour faire un appel a un serveur et traiter le retour XML"
 
non $() sont des fonctions ajoutée par des librairies tierces
 
non plus, tu ne sais pas ce que ca veut dire

Manu la Science a écrit :


 
Pour l'exemple, j'essaie ainsi de gérer des types (de véhicules), des catégories (qui peuvent être présentes dans les différents types (de véhicules) comme les "pièces mécaniques" ) et enfin des éléments comme le "moteur". En fonction de ce que je choisis comme éléments, je dois faire disparaître les colonnes (couleur dans l'exemple).
J'ai pris ces données, car celles que je gérerai sont trop techniques pour être un bon exemple.
 
Mon but est de construire une grille de "décision" et le ou les résultats seraient les colonnes restantes (qui correspondraient à mes critères)
 
Si j'utilise un tableau javascript, comment pourrais-je gérer des groupes de lignes et des "super" groupes de lignes (groupes de groupes de lignes) ?
Je pensais que justement les div encastrées les unes dans les autres me permettrait de le gérer plutôt qu'un tableau javascript.
 
Je ne veux pas prendre AJAX pour mettre ABSOLUMENT des effets visuels (qui sont souvent une perte de temps) car mon public n'a souvent pas le temps d'attendre ou doit accéder très vite au résultat (d'où le non rechargement de page).
 
Merci de l'intérêt que vous portez à mon problème


 
je pense que le plus simple , c'est quand mem eun tableau normal ( avec un id sur chaque tr ) et un( des )  tableau(x) javascript ( en plus ce sera 15 000 fois plus leger et lus souple)


Message édité par flo850 le 26-09-2007 à 10:29:47
Reply

Marsh Posté le 26-09-2007 à 10:39:51    

OK, je comprends un peu mieux... merci pour les explications...
 
Donc, en utilisant la librairie prototype.js, je peux réussir à cacher une ou plusieurs colonnes en me basant sur les différentes classes (col1, col2...) dans un tableau "pur" html ?
 
Par contre, en "choisissant" une ligne ou plusieurs, je peux récupérer par AJAX (en demandant au serveur après envoi des lignes choisies) quelles colonnes doivent être visibles ou masquées ?
 
Dans ce cas, le tableau "pur" html reste le meilleur moyen ? (c'est celui qui m'arrangerait le plus d'ailleurs)


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 26-09-2007 à 11:00:33    

1- oui , soit en se basnat sur leur classe, soit en se basant sur des données contenues dans un tableau js. A ntoer que tu n'es pas non plus obligé d'utiliser prototype.js

 

2- oui

 

3- pour moi , oui . En plus ca te fera voir les manipulation de tableau en js, ce qui est toujours utile ( enfin avec un gros paté de javascript quand meme )


Message édité par flo850 le 26-09-2007 à 11:00:58
Reply

Marsh Posté le 26-09-2007 à 11:00:33   

Reply

Marsh Posté le 26-09-2007 à 15:26:41    

Bon, j'avance en suivant vos conseils (enfin je pense que je les suis !)
 
Voici un bout de code :

Code :
  1. <HTML>
  2. <script language="JavaScript" type="text/JavaScript" src="prototype.js"></script>
  3. <script language="javascript1.2">
  4. function cache(elt){
  5. var d = document.getElementsByClassName(elt);
  6. var count=d.length;
  7. for(i=0;i<count;i++){
  8.  if (d[i].style.visibility == 'hidden')
  9.  {
  10.   d[i].style.visibility = 'visible'; 
  11.  } else {
  12.   d[i].style.visibility = 'hidden'; 
  13.  }
  14. }
  15. } 
  16. function cacher(elt){
  17. var d = document.getElementsByClassName(elt);
  18. var count=d.length;
  19. for(i=0;i<count;i++){
  20.  if (d[i].style.display == 'none')
  21.  {
  22.   d[i].style.display = 'block'; 
  23.  } else {
  24.   d[i].style.display = 'none'; 
  25.  }
  26. }
  27. }
  28. </script>
  29. <body>
  30. <table border="1">
  31. <tr class="titre"><td></td><td>Colonne1</td><td>Colonne2</td></tr>
  32. <th colspan="3" align="left"><a href="#" onClick="cache('voiture');">Voiture</a></th>
  33. <tr class="voiture"><td>moteur</td><td></td><td>x</td></tr>
  34. <tr class="voiture"><td>carrosserie</td><td>x</td><td></td></tr>
  35. <th colspan="3" align="left"><a href="#" onClick="cache('camion');">Camion</a></th>
  36. <tr class="camion"><td>moteur</td><td>x</td><td></td></tr>
  37. <tr class="camion"><td>cabine</td><td></td><td>x</td></tr>
  38. </table>
  39. </body>
  40. </HTML>


 
Avec cela, je peux cacher des éléments "TR" d'une classe mais il ne faut pas que la classe soit présente plus bas dans mon tableau, sinon je cache tout...
Cependant, je ne fais que cacher, mais l'emplacement reste vide et de même dimension. Si j'utilise display (fonction "cacher()" )plutôt que visibility (fonction "cache()" ) en javascript, je fais disparaître complètement mais lors d'une réapparition, mon tableau se trouve déformé.
Comment pourrais-je faire pour "remonter" ces "tr" lors du désaffichage des "tr" voulus et pour que tout revienne "en place" car je veux réafficher ?
Je pense que le soucis sera le même pour les colonnes...
 
C'est peut être une erreur dans mon code html du tableau...


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 26-09-2007 à 15:40:45    

Je précise que ce comportement "bizarre" (modification de la structure du tableau) s'observe sous Firefox et IE6 et IE7 cache bien les parties désaffichées et les affichent ensuite correctement...
 
Mais Firefox étant le plus proche du standart...
 
Les colonnes se réduisent sur tous les navigateurs si display est utilisé plutôt que visibility en javascript.
 
Mais Firefox ne gère pas bien le fait de désafficher des tr.
 
Si quelqu'un a une idée...


Message édité par Manu la Science le 26-09-2007 à 15:50:50

---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 02-10-2007 à 08:24:40    

Je reviens à la charge, mais pas sur le problème d'affichage avec Firefox...
 
Plus cela va, plus mon tableau se complexifie. Je souhaite gérer en dehors de mon tableau une sélection de groupe de ligne à afficher (on va les appeler des super-groupes). Une fois que ces super-groupes sont demandés ou après sélection de l'un d'eux, ils s'affichent.
Dans ces super-groupes, il y a des groupes (vous l'aurez deviné) de lignes. Je veux pouvoir afficher ou non les lignes appartenant à ces groupes ou non en cliquant sur le titre du groupe par exemple.
Enfin, les lignes correspondent à des données que je dois sélectionner ou non pour faire varier mes colonnes en fonction des notes en intersection.
 
Jusque là tout va à peu près bien dans l'affichage (IE7), sauf pour l'affichage ou non des super groupes (gestion en php en non en javascript, c'est le serveur qui envoie ou non les supergroupes, mais l'affichage reste tel quel).
 
Je ne sais pas ce qui serait le mieux pour gérer ce genre de tableau, à savoir faire un tableau en javascript de ce format:
tab[id_super_groupe][id_groupe][id_ligne] et je mets dans les tags id et name de chaque <TR> l'id_ligne de chacune des lignes. Au chargement de la page, je "balance tout", puis je n'affiche que ce qui est sélectionné comme super groupes OU BIEN je le gère en AJAX comme on peut le faire pour des listes déroulantes liées en récupérant le résultat de requêtes et de mode d'affichage côté serveur.
 
Je dois abosulement garder en mémoire les lignes cochées (ce que je fais en les stockant dans un champ caché) afin de faire varier mes colonnes.
Enfin, je précise qu'au moins une photo devra être disponible pour chaque ligne affichée (ce qui grossit les données envoyées au client).
 
Faut il que je me tourne vers AJAX et dans ce cas est-ce que AJAX permet d'écrire aussi confortablement dans un tableau que dans des div, ou est-ce qu'un tableau du format expliqué ci dessus me permettrait de gérer convenablement l'affichage dynamique escompté ?
 
Merci pour vos conseils


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Marsh Posté le 10-10-2007 à 19:59:29    

J'ai travaillé un peu mon problème et j'ai pu gérer un affichage de div en tableau, créé une fonction permettant sur clic d'un span (identifié) masquer ou afficher les div filles. Voici le résultat :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Mon tableau dynamique</title>
  7. <style type="text/css">
  8. <!--
  9. div.row {
  10.   clear: both;
  11.   padding-top: 5px;
  12.   }
  14. div.row span.label {
  15.   float: left;
  16.   width: 150px;
  17.   text-align: left; 
  18.   }
  19. div.row span.classe {
  20.   float: left;
  21.   width: 100%;
  22.   text-align: left;
  23.   background: #ffff00;
  24.   }
  25. div.row span.groupe {
  26.   float: left;
  27.   width: 100%;
  28.   text-align: left;
  29.   background: #ccc;
  30.   }
  31. div.row span.col1 {
  32.   float: left;
  33.   width: 80px;
  34.   text-align: center;
  35.   background: #f0f000;
  36.   }
  38. div.row span.col2 {
  39.   float: left;
  40.   width: 80px;
  41.   text-align: center;
  42.   background: #0ff0f0;
  43.   }
  44. div.row span.col3 {
  45.   float: left;
  46.   width: 80px;
  47.   text-align: center;
  48.   background: #00f00f;
  49.   }
  50. div.row span.col4 {
  51.   float: left;
  52.   width: 80px;
  53.   text-align: center;
  54.   background: #f0f0f0;
  55.   }
  56. -->
  57. </style>
  58. </head>
  59. <script language="JavaScript" type="text/JavaScript">
  60. function cache_div(elt) {
  61. var tabDiv=document.getElementById(elt).childNodes;
  62. for (x=0;x<tabDiv.length;x++) {
  63. if (tabDiv[x].nodeName=='DIV')
  64.  if (tabDiv[x].style.display=="none" ) {
  65.   tabDiv[x].style.display="block";
  66.  } else {
  67.   tabDiv[x].style.display="none";
  68.  }
  69. }
  70. }
  71. </script>
  73. <body>
  74. <div style="width: 80%; background-color: #ffffff; border: 1px dotted #333; padding: 5px; margin: 0px auto";>
  75.     <div class="row">
  76.       <span class="label">&nbsp;</span>
  77.   <span class="col1">Col1</span>
  78.   <span class="col2">Col2</span>
  79.   <span class="col3">Col3</span>
  80.   <span class="col4">Col4</span>
  81.     </div>
  82. <div class="row" name="class1" id="class1">
  83.  <span class="classe" onClick="cache_div('class1');">classe1</span>
  84.  <div class="row" name="tc1group1" id="tc1group1">
  85.   <span class="groupe" onClick="cache_div('tc1group1');">groupe1</span>
  86.   <div class="row" id="1">
  87.     <span class="label">ligne 1</span>
  88.     <span class="col1">x</span>
  89.     <span class="col2">x</span>
  90.     <span class="col3">x</span>
  91.     <span class="col4">x</span>
  92.   </div>
  93.   <div class="row" id="2">
  94.     <span class="label">ligne 2</span>
  95.     <span class="col1">x</span>
  96.     <span class="col2">x</span>
  97.     <span class="col3">x</span>
  98.     <span class="col4">x</span>
  99.   </div>
  100.  </div>
  101.  <div class="row" name="tc1group2" id="tc1group2">
  102.   <span class="groupe" onClick="cache_div('tc1group2');">groupe2</span>
  103.   <div class="row" id="3">
  104.     <span class="label">ligne 3</span>
  105.     <span class="col1">x</span>
  106.     <span class="col2">x</span>
  107.     <span class="col3">x</span>
  108.     <span class="col4">x</span>
  109.   </div>
  110.   <div class="row" id="4">
  111.     <span class="label">ligne 4</span>
  112.     <span class="col1">x</span>
  113.     <span class="col2">x</span>
  114.     <span class="col3">x</span>
  115.     <span class="col4">x</span>
  116.   </div>
  117.  </div>
  118. </div>
  119.   <div class="spacer">
  120.   &nbsp;
  121.   </div>
  123. </div>
  126. </body>
  127. </html>


 
Excusez les couleurs flashies  . Avec cela, je peux fermer ou ouvrir les "div" filles sur clic des libellés, div qui sont organisées en tableau.
 
Il me reste à gérer la réception de l'action clic sur la balise "span" pour désafficher ou afficher (selon le cas) les div du même niveau (éléments frères dans l'élément parent).
Enfin, je dois gérer le désaffichage de colonnes en sélectionnant certaines lignes. Ce désaffichage correspondra au masquage des colonnes pour lesquelles aucune donnée est renseignée (mais l'info provient d'une BDD, puisque la page sera construite en php).
 
Que me conseillez-vous ?
En cliquant sur des checkbox avant les "ligne...", je récupère et mets dans un champ caché tous les checkbox cochées, puis je demande via AJAX de me dire quelles sont les colonnes à ne pas masquer ?
Ou dois-je stocker dans des champs cachés les colonnes à masquer pour chaque ligne et le gérer à partir de cela ?
Qu'est-ce qui vous semble le plus pratique, efficace ?  


---------------
Proverbe chinois: il vaut mieux apprendre à pêcher à un mendiant que de lui donner du poisson...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed