Appel d'un Datatable à partir d'un autre DataTable

Version imprimable

1 pièce(s) jointe(s)

Bonsoir tout le monde,
je cherche à afficher un DataTable B lorsque je clique sur un lien contenu dans un Datatable A.
du type :

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
<h:panelGrid cellspacing="10" columns="3" >
<h:dataTable value="#{InitPageBean.personNames}" var="unePersonne"
width="300" border="0" headerClass="HEADING" rowClasses="ROW1,ROW2"
cellspacing="0" cellpadding="2">
<h:column>
<f:facet name="header">
<h:outputText value="Nom" styleClass="EN-TETE" />
</f:facet>
<h:outputText value="#{unePersonne.nom}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Prénom" styleClass="EN-TETE" />
</f:facet>
<h:outputLink>
<h:outputText value="#{unePersonne.prenom}" />
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Autre" styleClass="EN-TETE" />
</f:facet>
<h:outputLink onclick="javascript: Afficher('pg'); return false">
<h:outputText value="yyyyy" />
</h:outputLink>
</h:column>
</h:dataTable>
</h:panelGrid>
<h:panelGrid cellspacing="1" columns="1" id="pg" style="display: none;" >
<h:dataTable value="#{InitPageBean.personNames}" var="unePersonne"
width="300" border="0" headerClass="HEADING" rowClasses="ROW3"
cellspacing="0" cellpadding="2">
<h:column>
<h:outputText value="#{unePersonne.nom}" />
</h:column>
</h:dataTable>
</h:panelGrid>

mais je en sais pas si c'est possible d'écrire une fonction JavaScript par exemple : Afficher(...) qui me permettra d'afficher le Datatable contenu dans le PanelGrid dont l'id est pg.
sinon si quelqu'un a une diée je suis preneur.
l'affichage que je cherche est montré dans l'image ci-jointe.
merci d'avance :mouarf:

29/01/2008, 08h41
romaintaz
En faisant quelque chose comme :
Code:

1 2 3 4 5 6 function afficher(id) { var obj = document.getElementById(id); if (obj) { obj.style.display = "visible"; } }
Attention toutefois à l'ID fourni. Dans ton cas, ce n'est pas pg qu'il faut fournir, mais l'ID complet du composant.
J'imagine que ta datatable est contenue dans un form. Il faut faire précéder l'ID de la datatable par celle du form.
Autrement dit, si ton form a l'ID myForm, alors la datatable aura l'ID myForm:pg.

J'y ai apporté les modifications que tu as citées mais lorsque je clique sur le lien ça me redérige vers la racine de mon aplication.
voici à quoi ressemble ma page :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<f:view>
<html>
<head>
<title>My First JSF</title>
<style>
.HEADING {
font-family: courier;
font-size: 8pt;
color: #000000;
text-align: left;
background-image: url("img/fondaction.gif");
}
.ROW1 {
font-family: courier;
font-size: 8pt;
color: #000000;
}
.ROW2 {
font-family: courier;
font-size: 8pt;
color: #000000;
background-color: #dfc4a3;
}

.ROW3 {
font-family: courier;
font-size: 8pt;
color: black;
background-color: red;
} 
.EN-TETE {
font-family: courier;
font-size: 8pt;
color: white;
} 
</style>
<script language="Javascript">
function afficher(id) {
var obj = document.getElementById(id);
if (obj) {
obj.style.display = "visible";
}
}
</script>
</head>
<body style="background-color: #fff4db">
<h:form id="reportForm" target="report">
<h:panelGrid cellspacing="10" columns="3">
<h:dataTable value="#{InitPageBean.personNames}" var="unePersonne"
width="300" border="0" headerClass="HEADING" rowClasses="ROW1,ROW2"
cellspacing="0" cellpadding="2">
<h:column>
<f:facet name="header">
<h:outputText value="Nom" styleClass="EN-TETE" />
</f:facet>
<h:outputText value="#{unePersonne.nom}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Prénom" styleClass="EN-TETE" />
</f:facet>
<h:outputLink>
<h:outputText value="#{unePersonne.prenom}" />
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Autre" styleClass="EN-TETE" />
</f:facet>
<h:outputLink
onclick="javascript: afficher('reportForm:MyPG'); return false">
<h:outputText value="AfficherMenu" />
</h:outputLink>
</h:column>
</h:dataTable>
</h:panelGrid>
<h:panelGrid cellspacing="1" columns="1" id="myPG"
style="display: none;">
<h:dataTable value="#{InitPageBean.personNames}" width="300"
border="0" headerClass="HEADING" rowClasses="ROW3" cellspacing="0"
cellpadding="2" id="myDT">
<h:column>
<h:outputText value="Valider" />
</h:column></h:dataTable>
</h:panelGrid>
</h:form>
</body>
</html>
</f:view>

Si vous voyez d'où vient le problème!
m'ci.

j'ai rémodifié ma page :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<f:view>
<html>
<head>
<title>My First JSF</title>
<style>
.HEADING {
font-family: courier;
font-size: 8pt;
color: #000000;
text-align: left;
background-image: url("img/fondaction.gif");
}
.ROW1 {
font-family: courier;
font-size: 8pt;
color: #000000;
}
.ROW2 {
font-family: courier;
font-size: 8pt;
color: #000000;
background-color: #dfc4a3;
}

.ROW3 {
font-family: courier;
font-size: 8pt;
color: black;
background-color: red;
} 
.EN-TETE {
font-family: courier;
font-size: 8pt;
color: white;
} 
</style>
<script language="Javascript">
var tab;

function afficher(id) {
var obj = document.getElementById(id);
if (obj) {
/*alert(obj);
obj.style.visibility = "visible";*/

x=window.event.x;
y=window.event.y;

obj.style.left=x;
obj.style.top=y;
alert(obj.style.left);
alert(obj.style.left);
obj.style.display="";
hidemenu(tab);
tab=id;
alert('llll');
return false;
}
}
function hidemenu(arg)
{
if(arg!=null)
{
document.getElementById(arg).style.display="none";
}
}
document.oncontextmenu=hidemenu;
</script>
</head>
<body style="background-color: #fff4db">
<h:form id="reportForm" target="report">
<h:panelGrid cellspacing="10" columns="3">
<h:dataTable value="#{InitPageBean.personNames}" var="unePersonne"
width="300" border="0" headerClass="HEADING" rowClasses="ROW1,ROW2"
cellspacing="0" cellpadding="2">
<h:column>
<f:facet name="header">
<h:outputText value="Nom" styleClass="EN-TETE" />
</f:facet>
<h:outputText value="#{unePersonne.nom}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Prénom" styleClass="EN-TETE" />
</f:facet>
<h:outputLink>
<h:outputText value="#{unePersonne.prenom}" />
</h:outputLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Autre" styleClass="EN-TETE" />
</f:facet>
<h:outputLink
onclick="javascript: afficher('reportForm:MyDT');">
<h:outputText value="AffMenu5" />
</h:outputLink>
</h:column>
</h:dataTable>
</h:panelGrid>
<h:dataTable value="#{InitPageBean.personNames}" width="100"
border="0" headerClass="HEADING" rowClasses="ROW3" cellspacing="0"
cellpadding="2" id="myDT" style="display: none;">
<h:column>
<h:outputText value="Valider" />
</h:column>
</h:dataTable>
</h:form>
</body>
</html>
</f:view>

cette fois-ci lorsque je clique sur un lien ça affiche le menu sauf qu'il n'est pas positionné sur le lien sur lequel je viens de cliquer après ce clique je suis redérigé vers la racine de mon application.
il me reste donc à afficher le deuxème DataTable à la bonne place comme je l'ai montré sur l'image jointe et je ne veux pas que je sois redérigé vers une autre page avant de cliquer sur un élément du 2ème DataTable!
merci :mouarf:

29/01/2008, 12h08
djo.mos

Bonjour,
Au lieu de ré-inventer la roue, pourquoi ne pas utiliser un truc existant et eprouvé genre ToolTip ou contextMenu de RichFaces ? ;)

:arrow: http://livedemo.exadel.com/richfaces...?c=contextMenu

:arrow: http://livedemo.exadel.com/richfaces....jsf?c=toolTip
29/01/2008, 12h29
JauB

wow je trouve ça très intéressant.
sinon de quoi j'aurai besoin pour implémenter tout ça ? quel JAR? quoi configurer?...?
merci.
29/01/2008, 12h47
djo.mos

Bonjour,
Faut juste télécharger Richfaces 3.1.3GA (la dernière version) qui contient 3 jars :arrow: à ajouter au buildpath (WEB-INF/lib).
+
Une petit configuration de web.xml: :arrow: http://blog.developpez.com/index.php...&pb=1#more4570.

Pour l'utilisation, la livedemo donne les sources des exemple ;).
Bonne chance.
29/01/2008, 12h54
JauB

je viens de tomber sur ton blog : http://blog.developpez.com/index.php...&pb=1#more4570

je trouve l'exemple très simpliste et très explicatif. je suivrai cette piste, j'espère que je n'aurai pas des ennuis 8O.
;)