Discussion :

[lore2002]

Bonjour,

Je n'arrive pas à changer la couleur mes lignes en utilisant le Layout:collection et les attribut styleClass="tabs1" et styleClass2="tabs2"

Le problème c'est que le style est posé automatiquement sur la balise TD alors qu'il faudrait qu'il soit sur TR.

Est-ce que vous avez des suggestions ?

Voici un exemple de ma fauille de style

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
.tabs1 {
	border-bottom: 6px #ddd solid;
}
.tabs1 th {
	border-right: 1px solid #333;
	background-color: #ddd;
	color: #fff;
	border-left: 1px solid #fff;
}
 
.tabs1 td {
	background-color: #999;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}
 
 
 
.tabs2 {
	border-bottom: 6px #ddd solid;
}
.tabs2 th {
	border-right: 1px solid #333;
	background-color: #0099CC;
	color: #fff;
	border-left: 1px solid #fff;
}
 
.tabs2 td {
	background-color: #0033FF;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

[c_nvy]

Essaie comme ceci :

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
TABLE.tabs1 {
	border-bottom: 6px #ddd solid;
}
TH.tabs1 {
	border-right: 1px solid #333;
	background-color: #ddd;
	color: #fff;
	border-left: 1px solid #fff;
}
 
TD.tabs1 {
	background-color: #999;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}
 
TABLE.tabs2 {
	border-bottom: 6px #ddd solid;
}
TH.tabs2 {
	border-right: 1px solid #333;
	background-color: #0099CC;
	color: #fff;
	border-left: 1px solid #fff;
}
 
TD.tabs2 {
	background-color: #0033FF;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

[lore2002]

Merci.
Est-ce que tu sais également comment changer facilement la couleur de la ligne sur l'évenement onRowMouseOver ?

[c_nvy]

Ben non, je ne sais pas.

[lore2002]

J'ai une petite idée sur le principe que tu m'as donné. Je vais essayer
onRowMouseClick="this.className='style2'"; et définir un TR.style2 dans ma feuille de style. On verra bien.

[lykan]

Bonjour,

J'aimerais savoir aussi comment on utilise onRowMouseOver et onRowMouseOut si quelqu'un peu m'aider?

Comme la fonction l'indique, je veux que la ligne change de couleur quand on passe dessus avec la souris...

Voila ma collection, elle est dans un popup :

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
<layout:popup styleClass="DCPopup" key="" styleId="myPopup">
				<bean:define id="dcLots" name="dynaCommandesForm" property="dcLots" scope="session"/>	
 
						<layout:pager maxPageItems="25">
					    <layout:collection name="dcLots" onRowMouseOver="" onRowMouseOut="" styleClass="DCtableau" onRowClick="" >
 
							<layout:collectionItem sortable="true" title="lot.num" property="num" url="/dc-ventesuroffre-server/Commande.do?method=listlot&borne1=" param="lotId" />
						    <layout:collectionItem title="lot.lib"    			property="lib"/>
						    <layout:collectionItem title="lot.prix_depart"    	property="prix_depart"/>
 
					    </layout:collection>
					    </layout:pager>
 
				<layout:button styleClass="DCinput" onclick="closeStrutsLayoutPopup('myPopup');">Fermer</layout:button>
			</layout:popup>

et voila mon css pour DCtableau:

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
.DCtableau{
 
	background-color: #f5f5f5;
	font : 8pt verdana, arial, helvetica, sans-serif;
	font-size : 8pt;
}
TABLE.DCtableau{
	text-align:right;
	font:8pt Arial, Helvetica, sans-serif;
	background-color: #000000;
}
 
TH.DCtableau TR TH{
 
	text-align:center;
	font-weight:bold;
	background-color:#000000;/*c3c3c3*/
	vertical-align:middle;
	font-size:8pt;
	color:#E9C66D;
}
 
TH.DCtableau{
	padding:5px;
	border:1px solid white;
	text-align:center;
	font-weight:bold;
	background-color:#000000;/*c3c3c3*/
	vertical-align:middle;
	font-size:8pt;
	color:#E9C66D;
}
 
TD.DCtableau{
	PADDING-LEFT:10px;
	PADDING-RIGHT:10px;
	color:#000000;
	font-weight:bold;
	text-align:center;
	font-size:8pt;	
 
}

Si quelqu'un à une idée ce serait super

Cordialement

[jadey]

tu as ça:

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
43
44
45
46
47
48
49
50
51
52
/**
             * Fixe la couleur d'une ligne
             *
             * @param row                la ligne dont on veut changer la couleur.
             * @param color              nouvelle couleur
             * @param dontChange ligne dont il ne faut pas changer la couleur
             */
		function setColor(row, color, dontChange) {
			var parent = row.parentNode.parentNode;
			var oldRow;
 
			if (parent.stdLayoutOldRow) {
				oldRow = parent.stdLayoutOldRow;	
			}
 
			var elements = row.childNodes;		
 
			if (shouldNotChange(elements, dontChange)) {
				return;
			}
 
			setCellColor(elements, color);
 
			if (oldRow && oldRow!=row) {
				elements = oldRow.childNodes;
				setCellColor(elements, "");
			}
 
			parent.stdLayoutOldRow = row;
		}
 
		function shouldNotChange(elements, dontChangeColor) {
			var i = 0;
			var element = elements[i];
			while (element.nodeName!="td" && element.nodeName!="TD") {
				i++
				element = elements[i];
			}
			var currentBg = element.style.backgroundColor;
			if (currentBg && currentBg==dontChangeColor) {
				return true;
			}			
			return false;
		}
 
		function setCellColor(elements, color) {
			for (i=0; i < elements.length; i++) {
				if (elements[i].nodeName=="td" || elements[i].nodeName=="TD") {
					elements[i].style.backgroundColor = color;
				}
			}
		}

sur l'un exemple fourni avec le framework. Tu peux l'utiliser sur les deux evenements onClick et onRowMouse... mais ça garde change la couleur de ta dernière ligne survolée. Perfectible.

[OButterlin]

Sinon, tu peux t'inspirer de ceci

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
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
 
<html>
<head>
 
<style>
.ligne0{
    background : #a0a0a0;
    color:#000000;
    font-size:12pt;
    text-align:center;
    border-style:solid;
    border-width:1px;
    border-color:#f0f0f0 #909090 #909090 #f0f0f0;    
}
.ligne1{
    background : #f0f0f0;
    border-style:solid;
    border-width:1px;
    border-color:#f0f0f0 #909090 #909090 #f0f0f0;    
}
.ligne2{
    background : #e0e0e0;
    border-style:solid;
    border-width:1px;
    border-color:#f0f0f0 #909090 #909090 #f0f0f0;    
}
.selected{
    background:#00f000;
    color:#000090;
    border-style:solid;
    border-width:1px;
    border-color:#f0f0f0 #909090 #909090 #f0f0f0;    
}
</style>
 
<script>
var prvClass = null;
 
function mouseOver(obj)
{
    prvClass = new Array(obj.cells.length);
    for (var i = 0; i < obj.cells.length; i++)
    {
        prvClass[i] = obj.cells[i].className;
        obj.cells[i].className = "selected";
    }
}
 
function mouseOut(obj)
{
    for (var i = 0; i < obj.cells.length; i++)
    {
        obj.cells[i].className = prvClass[i];
    }
}
</script>
 
</head>
 
<body> 
 
<table id="tbl" cellpadding="0" cellspacing="0" width="500">
<thead>
    <tr>
    <th class="ligne0">Col 1</th>
    <th class="ligne0">Col 2</th>
    <th class="ligne0">Col 3</th>
    </tr>
</thead>
<tbody>
    <col span="1" width="50"/>
    <tr onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
        <td class="ligne1"><input type="checkbox" name="selectedItem" value="1"/></td>
        <td class="ligne1" style="color:green;">ligne 1</td>
        <td class="ligne1"><a href="javascript:alert('ligne1')">un lien</a></td>
    </tr>
    <tr onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
        <td class="ligne2"><input type="checkbox" name="selectedItem" value="2"/></td>
        <td class="ligne2">ligne 1</td>
        <td class="ligne2"><a href="javascript:alert('ligne2')">un lien</a></td>
    </tr>
    <tr onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
        <td class="ligne1"><input type="checkbox" name="selectedItem" value="1"/></td>
        <td class="ligne1" style="color:green;">ligne 1</td>
        <td class="ligne1"><a href="javascript:alert('ligne3')">un lien</a></td>
    </tr>
    <tr onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
        <td class="ligne2"><input type="checkbox" name="selectedItem" value="2"/></td>
        <td class="ligne2">ligne 1</td>
        <td class="ligne2"><a href="javascript:alert('ligne4')">un lien</a></td>
    </tr>
</tbody>
</table>
 
</body>
</html>

[lykan]

Merci, mais il y a pas un truc plus simple du genre (je dis n'importe quoi) :

Code :

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

onRowMouseOver="this.style.backgroundColor=red" onRowMouseOut="this.style.backgroundColor=blue"

Si il existe des fonctions de ce genre pour layout:collection, il doit bien y avoir un truc plus simple non ?

Merci pour votre aide

Cordialement

[OButterlin]

Le problème vient du fait qu'appliquer un style à la balise <tr> n'aura pas de répercussion sur ses <td>

[lykan]

ouep j'ai vu ça dans le code source que ça me génère.

Donc en gros ces deux fonctions servent à rien si ?

[OButterlin]

Ben si, ça sert à déclencher une fonction javascript au survol...
A toi de la concevoir correctement... en fonction de tes besoin...

On pourrait imaginer un appel AJAX pour récupérer des informations complémentaires... ou autre...

Bref, ça peut servir

[lykan]

oué ok.

Du coup j'ai une autre question, c'est pour onRowClick, je suppose que c'est le même principe que les deux autres fonctions...

j'aimerais récupérer la valeur de l'ID lorsque je clique sur la ligne, j'avais trouvé un moyen en faisant ça :

Code :

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

1
2
<layout:collection name="dcLots"  styleClass="DCtableau"  >
<layout:collectionItem title="lot.num" property="num" url="/dc-ventesuroffre-server/Commande.do?method=listlot&borne1=" param="lotId" />

[...]

Donc j'ai été tenté de faire ça :

Code :

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

1
2
<layout:collection name="dcLots"   onRowClick="/dc-ventesuroffre-server/Commande.do?method=listlot&borne1" param="lotId" styleClass="DCtableau"  >
<layout:collectionItem title="lot.num" property="num"   />

Mais vu que le paramètre "param" n'est pas utilisé dans <layout:collection> je ne sais pas comment faire.

Une idée?

[OButterlin]

Là c'est plus compliqué.
Il faudrait faire un méthode javascript qui irait extraire le lien dans la colonne 0 (si c'est la position du lien).
Bref, un truc dans le genre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function processRowClick(evt)
{
    var row = null;
    if (evt.target) row = evt.target;
    else row = event.srcElement;
    row = row.parentNode;
 
    var ar = row.cells[0].firstChild.getAttribute("href");
    window.location = ar;
}

[c_nvy]

Essaie de passer l'id via une EL comme ceci :

Code :

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

<layout:collection name="dcLots" id="lot" onRowClick="/dc-ventesuroffre-server/Commande.do?method=listlot&borne1=${lot.lotId}" styleClass="DCtableau"  >