[Question]Présentation de données dans dataTable

Version imprimable

12/11/2008, 16h07
Edta

[Question]Présentation de données dans dataTable

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
12/11/2008, 16h45
Sniper37

Citation:

Envoyé par Edta

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:

style="width: 20px;"

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:

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:

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;

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:

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.

Salut,

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

Code:

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>

13/11/2008, 13h43
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?
13/11/2008, 14h09
Esil2008

Pourrais tu mettre une capture d'ecran pour voir l'affichage que tu as mnt et ce qui cloche, car personnellement je me rend compte que j'ai pas bien compris ce que tu voudrais faire

1 pièce(s) jointe(s)

Voici une capture d'écran. Ce que je cherche a faire c'est que mes deux lignes soit l'une en dessous de l'autre sans autant d'espaces. Pour représenter:

Mon en-tête de tableau
ligne 1 "Auchan"......
ligne 2 "Blabla".......
.
.
. du vide fond gris avec mes traits blancs
.
fin du tableau
bouton

voici ma css actuelle:

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

voici mon tableau sur ma page JSP:

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
 
<h:dataTable rows="15" captionClass="titleData" styleClass="tableData" value="#{Acceptors_1.acceptors}" var="item" 
                            id="dataTable" binding="#{Acceptors_1.dataTable}" cellspacing="0"> 
                            <f:facet name="caption">
                                <h:outputText value="#{bundle.acceptors_title}"/>
                            </f:facet>
                            <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>
 
                            <h:column headerClass="tableDataHeader_middle">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.acceptors_terminalsKind}"/>
                                </f:facet>
                                <parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
                            </h:column>
 
                            <h:column headerClass="tableDataHeader_middle">
                                <f:facet name="header">
                                    <h:outputText value="#{bundle.acceptors_tmsAccount}"/>
                                </f:facet>
                                <h:outputText value="#{item.TMSAccount}"/>
                            </h:column>
 
                            <h:column headerClass="tableDataHeader_right">
                                <f:facet name="header">
                                    <h:outputText value=" "/>
                                </f:facet>
                                    <center>
                                        <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>
                                    </center>
                                </h:column> 
                        </h:dataTable>

13/11/2008, 15h08
Esil2008

Je vois mnt :)

A mon avis ton code est bon, perso je vois d'anomalie.

Et si tu entoures carrément ta dataTable avec un pabelgroup qui aura comme style le styleClass="tableDataTest" , enlève le styleclass de la datatable, ça change quelque chose ?

.tableDataTest{ width: 964px;
height: 495px;
background: gray;
}
13/11/2008, 16h14
Edta

J'ai déjà pensé à cette solution enfin j'avais mis en div au lieu d'un panel group. Le problème c'est que mes lignes blanches s'arrête à la fin du tableau et pas à la fin du cadre (que se soit un panelGroup ou un div)
13/11/2008, 16h22
Esil2008

si tu entoure le meme panelgroup avec un autre panelgroup avec un background gris et avec la meme hauteur ca marche pas aussi ?

Par ce que le faite de mettre un height a ta datatable l'oblige à positionner les lignes en fonction de cette hauteur, je pense que ca vient de la.

Il faudra trouver un moyen pour eviter ce height ...
13/11/2008, 16h45
Edta

oui je pense aussi que le problème vient de ce height. Mais le problème c'est comment créer les ligne blanche sur le paneau qui entour mon tableau car je ne sais pas de quelle tailles sont les colonnes.
13/11/2008, 16h47
Esil2008

un border : 1px white; dans le style du panelgroup general !
13/11/2008, 17h38
Edta

apparement, j'ai pas bien compris ton idée... tu pourrais me la redire d'une autre façon

voila ce que je voulais dire :

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
<ice:panelGroup style="height : 500px; border : 1px white; ">
	<ice:panelGroup styleClass="tableDataTest">
		<h:dataTable rows="15" captionClass="titleData"  value="#{Acceptors_1.acceptors}" var="item" 
			id="dataTable" binding="#{Acceptors_1.dataTable}" cellspacing="0"> 
			<f:facet name="caption">
				<h:outputText value="#{bundle.acceptors_title}"/>
			</f:facet>
			<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>
 
			<h:column headerClass="tableDataHeader_middle">
				<f:facet name="header">
					<h:outputText value="#{bundle.acceptors_terminalsKind}"/>
				</f:facet>
				<parser:toText list="#{item.managedTerminalKinds}" property="name" separator=", "/>
			</h:column>
 
			<h:column headerClass="tableDataHeader_middle">
				<f:facet name="header">
					<h:outputText value="#{bundle.acceptors_tmsAccount}"/>
				</f:facet>
				<h:outputText value="#{item.TMSAccount}"/>
			</h:column>
 
			<h:column headerClass="tableDataHeader_right">
				<f:facet name="header">
					<h:outputText value=" "/>
				</f:facet>
					<center>
						<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>
					</center>
				</h:column> 
		</h:dataTable>
	</ice:panelGroup> 
</ice:panelGroup>

EDIT

Pardon, j'ai repondu vite. Je croyais que tu parlais d'une sorte de bordure blanche qui va entourer ton tableau, mais je viens de voir qu'elle sépare aussi les colonnes ...
Donc oublie ce que je viens d'ecrire

24/11/2008, 16h30
Edta

Personne ne sait s'il est possible ajouter un nombre x de lignes vide dans un dataTable?