Discussion :

[Edta]

Bonjour,

J'ai des données qui s'affichent dans un h:dataTable de largeur et longueur fixe. Par défaut la largeur de mes lignes s'adapte au nombre d'éléments à afficher. Je souhaite modifier cette présentation. Je voudrais que mes lignes (th et td) aient tout le temps la même taille quelque soit le nombre de lignes. Si mon nombre de lignes est trop petit pour remplir le tableau au complet alors je voudrais voir mes lignes en un bloc et le restant du tableau vide.
Je ne sais pas, quelle est la façon de s'y prendre. Dois je chercher au niveau de la css? ou bien ajouter un élément html ? Jouer avec les attributs du dataTable? ect

Merci de votre aide

[Sniper37]

Bonjour,
Dois je chercher au niveau de la css? ou bien ajouter un élément html ? Jouer avec les attributs du dataTable? ect

Exactement:

dans la colonne tu peux ajouter

Code :

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

style="width: 20px;"

[Edta]

Etant donné que je veux que mes lignes forment un groupe. Je dois jouer sur la hauteur donc l'attribut height. J'ai essayé mais je ne suis pas arrivée à se que je voulais. Maintenant, j'ai mes lignes qui s'affichent à partir du bas du tableau et l'en-tête du tableau prend l'espace restant et place ses cellules au milieu. De plus les cellules des lignes et les cellules de l'en-tête n'ont pas la même largeur. Pour les lignes ca s'affiche correctement alors que pour l'en tête les cellules sont juste de la taille du texte et séparées par un grand espace.

Voici la déclaration de mon tableau

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
 
<h:dataTable captionClass="titleData" styleClass="tableData" value="#{Acceptors_1.acceptors}" var="item" 
                            id="dataTable" rows="15" binding="#{Acceptors_1.dataTable}" cellpadding="3" cellspacing="0"> 
                            <f:facet name="caption">
                                <h:outputText value="#{bundle.acceptors_title}"/>
                            </f:facet>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_left" value="#{bundle.name}"/>
                                 </f:facet>
                                <h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
                                    <h:outputText value="#{item.name}"/>
                                </h:commandLink>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_middle" value="#{bundle.acceptors_terminalsKind}"/>
                                </f:facet>
                                <parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_middle" value="#{bundle.acceptors_tmsAccount}"/>
                                </f:facet>
                                    <h:outputText value="#{item.TMSAccount}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                    <h:outputText styleClass="tableDataHeader_right" value="coucou"/>
                                </f:facet>
                                    <h:commandLink id="imgLinkEdit" action="#{Acceptors_1.imgLinkEdit_action}" immediate="true">
                                        <h:graphicImage alt="#{bundle.edit}" title="Edit" value="../../resources/images/edit.gif"/>
                                    </h:commandLink>
                                </h:column> 
                        </h:dataTable>

Voici ma css:

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
 
/* style of data table */
.titleData{
    color: black;
}
 
.tableData{
    position: absolute;
    width: 100%;
    height: 495px;
    background: gray;
    border: 0px;
}
 
.tableData img{
    border: 0px;
}
 
.tableData td{
    border: 0px;
    height: 20px;
    border-left: 1px solid white;
}
 
.tableDataHeader_left{
    background: url(images/bandeau-gris-gauche.png);
    color: black;
    height: 44px;
}
 
.tableDataHeader_middle{
    background: url(images/bandeau-gris-centre.png);
    color: black;
    height: 44px;
    border-left: 1px solid gray;
}
 
.tableDataHeader_right{
    background: url(images/bandeau-gris-droite.png);
    color: black;
    height: 44px;
    border-left: 1px solid gray;

[Edta]

Je n'ai aps encore trouvé la solution mais déjà la première erreur est la déclaration des style de l'en-tête. Le style doit etre déclaré dans la balise column et pas dans mon outputText. Je les ai corriger de cette façon:

Code :

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

1
2
3
4
5
6
7
8
9
 
<h:column headerClass="tableDataHeader_left">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.name}"/>
                                 </f:facet>
                                <h:commandLink styleClass="#{item.status}" action="#{Acceptors_1.linkAcceptor_action}" immediate="true">
                                    <h:outputText value="#{item.name}"/>
                                </h:commandLink>  
                            </h:column>

J'ai fixé la taille des en-tête mais j'ai laissé libre celle des td. Il me reste a trouver comment fixer cette taille et quelle soit respectée quelque soit le nombre d'éléments.

[Esil2008]

Salut,

Si tu entoures ton header puis ton commandLink par deux panelgroup qui ont les mêmes dimensions, ca marchera je pense.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 <f:facet name="header">
  <ice:panelGroup styleClass="style">
    <h:outputText value="#{bundle.name}"/>
  </ice:panelGroup>
 </f:facet>
 
 <ice:panelGroup styleClass="style">
   <h:commandLink styleClass="#{item.status}" action="#  {Acceptors_1.linkAcceptor_action}" immediate="true">
      <h:outputText value="#{item.name}"/>
   </h:commandLink> 
  </ice:panelGroup>

[Edta]

Merci pour l'idée mais ca ne marche pas.
J'ai pensé à quelle que chose mais mes connaissances sur JSF son trop restrinetes pour savoir si c'est possible.

Dans mon h:dataTable j'ai fixé le nombre de lignes à 15. dans mon backingBean je peux appeler la fonction dataTable.getRows() pour savoir combien de ligne est affichée. Se que je ne sais pas c'est s'il existe u moyen de faire dans ma page JSP le code :

si mon nombre de lignes < nombre de ligne max alors
for i= nombre de lignes à 15 faire
<tr><td>vide</td><td>.......</td></tr> //ajout d'une ligne vide
fin for
fin si

Est ce que c'est possible de faire quelque chose comme ca?