Faire un tableau a nombre de colonnes variables

Version imprimable

Bonjour,

En ce moment je cherche à afficher une liste d'objets sur ma page html dans un tableau.

Problème je n'arrive à afficher ce tableau que sur une seule ligne, ce qui n'est évidement pas des masses pratique lorsque la liste contient plusieurs centaines d'objets...

Après moultes recherches sur le sujet je ne suis pas arrivé à ce que je veut...

Voici ce que j'ai tenté pour le moment :

Version "originale" qui n'affiche qu'une seule ligne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <table id="corps" align="center" border="0" cellpadding="5" cellspacing="1"> <div t:type="loop" t:source="borneList" t:value="bornes"> <TD id="Liste" style="background-color: ${getBorneState()}"> <t:pagelink page="borne/BorneDetails" context="[bornes.id.idBorne, bornes.id.idAo]"> ${bornes.nomBorne}<br/> borne num : ${bornes.id.idBorne}</t:pagelink> </TD> </div> </table>
Deuxième version avec l'utilisation de switchs (j'utilise un compteur dans la fonction getBorneState() pour compter le nombre de colonnes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <table id="corps" align="center" border="0" cellpadding="5" cellspacing="1"> <div t:type="loop" t:source="borneList" t:value="bornes"> <t:block t:id="sautLigne"> <TR> </t:block> <t:block t:id="pasSautLigne"> </t:block> <TD id="Liste" style="background-color: ${getBorneState()}"> <t:pagelink page="borne/BorneDetails" context="[bornes.id.idBorne, bornes.id.idAo]"> ${bornes.nomBorne}<br/> borne num : ${bornes.id.idBorne}</t:pagelink> </TD> <t:block t:id="sautLigne"> </TR> </t:block> <t:block t:id="pasSautLigne"> </t:block> </div> </table>
Mais cette version me sort une erreur à l'exécution car avec les balises <TR> qui attendent une balise </TR> à l'intérieur de mon Block...

Si quelqu'un aurait une idée de comment procéder je suis tout ouïe... n'hésitez pas à me demander des précision si cela ne vous parait pas assez clair

Merci d'avance!!!

26/08/2010, 09h07
upgrading

Salut,
Petite question pourquoi tu ne passes pas un grid? Aprés tu alimentes tes cases avec des fonctions et pour la couleur de ton tableau tu peux utiliser de la css.

pour ton code je ne vois pas apparaitre les <TR> </TR>, c'est peut étre ta source d'erreur.
26/08/2010, 14h17
mcfly37

yop encore toi? a croire que l'on est que deux sur cette partie du forum ^^

Pour ce qui est du grid j'ai regarder rapidement sur google mais pas moyen de trouver d'info dessus... Pourrais tu être plus précis?

Pour ce qui est des balises <TR> effectivement je n'en avais pas mis dans le premier code, je pensais qu'en définissant la largeur de ma page dans mon css le retour à la ligne se ferais automatiquement mais apparemment non... C'est pour ça que j'ai essayé dans mon deuxième exemple de code de les rajouter avec mes switch histoire de les avoir tout les X occurrences de la liste, mais peine perdue ^^
27/08/2010, 12h31
upgrading

Yep, encore moi j'ai ma résidence secondaire ici ;)
Je suis pas sure de bien bien comprendre ton besoin, quand tu parles de colonnes variables, tu veux :

1) tableau
1er ligne 2 colonnes
2eme ligne 3 colonnes
3eme ligne 5 colonnes

2) mettre un nombre de colonne variable de colonne, mais aprés les colonnes restent les memes avec les itérations

3) others

Reponds par 1, 2 ou 3 :aie:

Sinon pour le grid je t'enverrai tes exemples as soon as possible
27/08/2010, 17h45
mcfly37

Humm... je me rend compte que je me suis mal expliqué, donc 3 :aie:

En fait je me rend compte que je ne veut pas un nombre de colonne variable mais plutôt un nombre de colonne fixe!!!

Exemple : J'ai une liste de 10 éléments, et je choisi d'avoir un tableau de 7 colonnes max de large. Le tableau généré par la liste devra alors avoir une première ligne de 7 colonnes puis une deuxième de 3 colonnes... En fait c'est plutôt le nombre de lignes qui doit être variable....
03/09/2010, 14h35
mcfly37

Petit up, pas de réponse?

Et si tu essayes quelque chose comme ça ?

Tu aura une methode "isSautLigne" qui retourne "true" ou "false" suivant que tu veux un saut de ligne ou pas.

Et selon les cas, tu crée un tr avant d'afficher ton block td. On utilise alors delegate vers un block afin d'éviter de répéter le même code deux fois, une fois dans le if et dans le else.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <table id="corps" align="center" border="0" cellpadding="5" cellspacing="1"> <t:loop t:source="borneList" t:value="bornes"> <t:if t:test="sautLigne"> <tr> <t:delegate t:to="blockLigne"> </tr> <p:else> <t:deletate t:to="blockLigne"> </p:else> </t:if> <t:loop> </table> <t:block t:id="blockLigne"> <TD id="Liste" style="background-color: ${getBorneState()}"> <t:pagelink page="borne/BorneDetails" context="[bornes.id.idBorne, bornes.id.idAo]"> ${bornes.nomBorne}<br/> borne num : ${bornes.id.idBorne} </t:pagelink> </TD> </t:block>
(code écrit à l'arrache, ça marchera pas forcement du premier coup :mouarf: )

Salut et merci de ta réponse!!!

Par contre tapestry ne connait apparemment pas le <t:else>... a moins que tu n'ais pas fait de faute de frappes et que ce soit bien <p:else>, mais tapestry ne le connait pas non plus ^^ Mais je sens que je touche au but, plus que ce petit problème à régler et ça va marcher ça va marcher!!!!! (priez avec moi mes frères!!!)

edit : Bon après quelques recherche via mon amis google il apparait que la syntaxe que tu à donné est pour tapestry 5.1, hors je suis en 5.0, dans ce cas la bonne syntaxe est :

<t:parameter name="else">

Problème : Maintenant la page ne m'affiche carrément plus du tout ma liste de bornes ^^

voici le code concerné :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <table id="corps" align="center" border="0" cellpadding="5" cellspacing="1"> <t:loop t:source="borneList" t:value="bornes"> <t:if t:test="sautLigne"> <tr> <t:delegate t:to="blockLigne"> </t:delegate> </tr> <t:parameter name="else"> <t:delegate t:to="blockLigne"> </t:delegate> </t:parameter> </t:if> </t:loop> </table> <t:block t:id="blockLigne"> <TD id="Liste" style="background-color: ${getBorneState()}"> <t:pagelink page="borne/BorneDetails" context="[bornes.id.idBorne, bornes.id.idAo]"> ${bornes.nomBorne}<br/> borne num : ${bornes.id.idBorne} </t:pagelink> </TD> </t:block>

Reuhh

bon problème résolue!! en fait pour le <p:else> il fallait juste rajouter le namespace. Et merci de ta solution, après quelques petites modifs j'ai obtenu ce que je voulais. Voici le code si jamais quelqu'un rencontre le même problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table id="corps" align="center" border="0" cellpadding="5" cellspacing="1">
        <t:loop t:source="borneList" t:value="bornes">
        <t:if t:test="sautLigne">
          <tr>
          </tr>
          <t:delegate t:to="ligne">
             </t:delegate>
          <p:else>
             <t:delegate t:to="ligne">
             </t:delegate>
          </p:else>
        </t:if>
        </t:loop>
        </table>
 
        <t:block t:id="ligne">
          <TD id="Liste" style="background-color: ${getBorneState()}">
              <t:pagelink page="borne/BorneDetails" context="[bornes.id.idBorne, bornes.id.idAo]">
                              ${bornes.nomBorne}<br/>
                              borne num : ${bornes.id.idBorne}
              </t:pagelink>
          </TD>
        </t:block>

Merci à tous les deux!!!