[Struts-Layout] style collection lignes

Version imprimable

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:

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; }

Essaie comme ceci :

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
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;
}

01/06/2007, 21h11
lore2002

Merci.
Est-ce que tu sais également comment changer facilement la couleur de la ligne sur l'évenement onRowMouseOver ?
01/06/2007, 22h18
c_nvy

Ben non, je ne sais pas.:oops:
02/06/2007, 21h22
lore2002

merci quand même !

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.

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:

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:

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 :mrgreen:

Cordialement

tu as ça:

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
/**
             * 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.

Sinon, tu peux t'inspirer de ceci

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
 
<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>

13/07/2010, 17h04
lykan

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

Code:

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
13/07/2010, 17h19
OButterlin

Le problème vient du fait qu'appliquer un style à la balise <tr> n'aura pas de répercussion sur ses <td>
13/07/2010, 17h55
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 ?
13/07/2010, 19h40
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 ;)

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:

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:

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?

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:

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; }

26/07/2010, 20h57
c_nvy

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

Code:

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