faire défiler des colonnes d'un tableau

Version imprimable

15/11/2009, 19h17
lelectronique.com

faire défiler des colonnes d'un tableau

Bonsoir,
voilà j'ai un tableau qui fait x colonne celon la sélection du visiteur du site afin de ne pas pertuber la mise en pae je voudrais ajouter un scrollbar en bas du tableau me permettant de le faire défiler en largeur tout en laissant la colonne de gauche toujours visible car il s'agit de la colonne "légende" du tableau
est ce possible ou non ? sinon comment puis je faire
merci d'avance pour votre aide
15/11/2009, 19h56
kernelfailure

En gérant avec un faux défilement à l'aide de display=none ou alors un iframe.
15/11/2009, 21h33
le_chomeur

... kernelfailure essayes au moins de chercher une réponse cohérente avant de répondre merci !

il te faut utiliser soit 2 tableau imbriqués avec une cellule en taille fixée + la propriété overflow:auto :)
15/11/2009, 22h23
lelectronique.com

merci le_chomeur pour ta reponse, par contre si je fais cela mes lignes ne risque plus d'etre aligné avec ma colonne de gauche non ? je vais tester cela demain
15/11/2009, 23h00
le_chomeur

il te faut fixer la hauteur de chacune des cellules :) (ou tr)

Cadeau !

En quoi c'est pas cohérent ? 8O

Premier cas, on dispose d'un tableau pour faire court : 2 lignes, 6 colonnes.
On en affiche que 3.

tr=ligne
th=entête
td=données

Code:

1
2
3
4
 
table
tr1 th1 td11 td12 td13 td14 td15 td16
tr2 th2 td21 td22 td23 td24 td25 td26

Les tdx1-tdx3 ont style="". les tdx4-tdx6 sont à display='none'
On ajoute ce que bon nous semble pour proposer un défilement droite-gauche (boutons, '<' '>', etc...).
Imaginons un défilement vers la droite, cela donne :
Les tdx1 passent à display='none'; tx2-tdx' ont style="". les tdx5-tdx6 sont à display='none'.
Gestion de la position obligatoire.

Second cas, on encapsule le tableau de données dans un iframe, défilement horizontal, et on place les entêtes dans un autre tableau à gauche. Ici aussi ça fonctionne, mais il faudra veiller à fixer les hauteurs.

EDIT
Cadeau :
Un petit code vite fait pour montrer que c'est loin d'être incohérent. C'est du code bourrin, mais le principe est là.

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
 
<html>
<head><title>SCROLL ME</title></head>
<body>
<table>
<table id="SCROLLID">
<tr><th>T1</th><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><th>T2</th><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
</table>
<input type="button" value="<<" onclick='SCROLL.first()' id='SCROLLFIRST'>
<input type="button" value="<" onclick='SCROLL.left()' id='SCROLLLEFT'>
<input type="button" value=">" onclick='SCROLL.right()' id='SCROLLRIGHT'>
<input type="button" value=">>" onclick='SCROLL.last()' id='SCROLLLAST'>
<script>
var SCROLL = {
	i:0,
	n:8,	// Total des colonnes
	v:4,	// Nombre de colonne visible
 
	first:function(){
		if(this.i == 0) { return; }
		this.i=0;
		this.display();
		},
 
	right:function(){
		if((this.i + this.v) >= this.n) { return; }
		this.i++;
		this.display();
		},
 
	left:function(){
		if(this.i == 0) { return; }
		this.i--;
		this.display();
		},
 
	last:function(){
		if(this.i == (this.n - this.v)) { return; }
		this.i=this.n - this.v;
		this.display();
		},
 
	display:function(){
		var scr = document.getElementById('SCROLLID');
		scr.style.border='1px black solid'; // A virer
		var trs = scr.getElementsByTagName('tr');
		for (var i=0, n=trs.length; i<n; i++) {
			var tds = trs[i].getElementsByTagName('td');
			for (var j=0, m=tds.length; j<m; j++) {
				tds[j].style.display='';
				if(j<this.i) tds[j].style.display='none';
				if(j>=(this.i+this.v)) tds[j].style.display='none';
			}
		}
		var scr0 = document.getElementById('SCROLLFIRST');
		var scrl = document.getElementById('SCROLLLEFT');
		var scrr = document.getElementById('SCROLLRIGHT');
		var scr9 = document.getElementById('SCROLLLAST');
		scr0.style.visibility ='visible';
		scrl.style.visibility ='visible';
		scrr.style.visibility ='visible';
		scr9.style.visibility ='visible';
		if(this.i == 0) { scrl.style.visibility='hidden'; scr0.style.visibility='hidden'  }
		if((this.i + this.v) >= this.n) { scrr.style.visibility ='hidden'; scr9.style.visibility ='hidden' }
		}
};
SCROLL.display();
</script>
</body>
</html>

16/11/2009, 09h10
le_chomeur

:aie:

ce n'est la méthode qui me gène mais le principe , on demande a scroller, pas a naviguer, imagine toi avec 500 cellule a gérer ce n'est pas viable , d'ou la demande d'une barre de scroll ....
16/11/2009, 10h02
le_chomeur

voici un exemple en ligne : http://www.imaputz.com/cssStuff/bigFourVersion.html#

et une méthode plus simple utilisant une div a l'intérieur d'un tableau avec la méthode overflow : http://www.ssi-developer.net/css/non...able-hdr.shtml
16/11/2009, 10h33
Mengué georges

Bonjour

C'est la solution que j'utilise mais existe-t-il une solution similaire sur les 2 axes du type figer les volets d'excel pour un tableau de grande dimension
16/11/2009, 10h47
le_chomeur

tu met ton tableau dans une div de taille fixe avec un style="overflow:auto"
16/11/2009, 10h51
lelectronique.com

merci à tous pour votre aide après avoir tester les deux méthodes c'est celle avec les boutons le mieux dans mon cas car cela permet de garder la meme hauteur de ligne partout car queslques fois j'ai des données qui vont prendre 3 lignes et d'autres non donc si je fixe une hateur cela ne va pas faire jolie du tout :(
16/11/2009, 11h07
Mengué georges

Oui mais ce n'est pas ça que je cherche à faire:
tableau avec entête de colonne et entête de ligne avec 2 scroll.
le scroll vertical fait défiler les lignes et entête de ligne en gardant l'entête de colonne fixe.
le scroll horizontal fait défiler les colonne et entête de colonne en gardant l'entête de ligne fixe.
16/11/2009, 12h21
kernelfailure

Citation:

Envoyé par le_chomeur

:aie:

ce n'est la méthode qui me gène mais le principe , on demande a scroller, pas a naviguer, imagine toi avec 500 cellule a gérer ce n'est pas viable , d'ou la demande d'une barre de scroll ....

Je ne comprends pas ta subtilité sémantique.

Un scroll c'est un défilement. Les méthodes de le simuler sont diverses (masquage, extraction, gestion d'un pointeur, etc...). Les IHM pour l'interaction tout aussi diverses (Bouton, barre, jauge, survol, etc...).

500 cellule, c'est ni plus ni moins lourd qu'un scrolling au pixel. Ce code devra cependant être optimisé pour n'avoir à gérer qu'une zone de "(colonne visible) x ligne" (Tout masquer par défaut. Memento sur pointeur. Itération de masquage de l'ancienne zone + Itération d'affichage de la nouvelle zone).

Mais si la base est très grosse, il faudra commencer à entrevoir le couplage avec un accès BDD.
16/11/2009, 13h59
le_chomeur

j'entendais par la , que le scroll est un élément intègré a tous les navigateurs de façon natif, donc pourquoi implémenter un outil javascript ( qui peut s'avérer utile ^^ ) mais pas dans ce cas la ( toujours selon moi ... ) je n'ai pas vu le résultat escompté :)