faire défiler le contenu d'un tableau

**Mengué georges** · 16/11/2009, 11h16

Bonjour suite à la discussion précédente:

http://www.developpez.net/forums/d83...onnes-tableau/

En complément 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.

Merci

**kernelfailure** · 16/11/2009, 12h24

Il y a pourtant pléthore de méthodes dans le thread dont tu parles.

**Mengué georges** · 16/11/2009, 12h59

Que je sache, un axe no pb mais 2 axes avec titre des lignes et colonnes, jamais vu.

**Bovino** · 16/11/2009, 13h21

Salut.
Tu pourrais tester avec un scroll horizontal sur le <table> et un scroll vertical sur le <tbody>

**kernelfailure** · 16/11/2009, 13h25

Comment ferais-tu pour masquer ou afficher des lignes sur un tableau ?

L'objet que je propose gère les colonnes. Quoi faire pour qu'il gère aussi les lignes ?

**Bovino** · 16/11/2009, 13h50

Non, l'idée n'est pas de masquer ou d'afficher des lignes ou colonnes, ce serait plutôt de fixer la taille de la table puis de mettre un overflow-x en scroll sur la balise <table> (donc scroll horizontal) et un overflow-y en scroll sur la balise <tbody> (scroll vertical sans impact sur le thead).

**Mengué georges** · 16/11/2009, 13h51

Tu pourrais tester avec un scroll horizontal sur le <table> et un scroll vertical sur le <tbody>

Le pb est que je vais perdre les entêtes comte tenu de la dimension du tableau.

Pour info, le tableau est un planning calendaire journalier inter-actif, actualisé via AJAX, comportant plus de 200 lignes sur 50 colonnes environ, donc qui dépasse la taille de l'écran.

**le_chomeur** · 16/11/2009, 14h01

malheureusement le scroll n'ai pas géré sous ie ( propriété overflow

) j'avais eu un problème similaire

**kernelfailure** · 16/11/2009, 15h26

Envoyé par Bovino

Non, l'idée n'est pas de masquer ou d'afficher des lignes ou colonnes, ce serait plutôt de fixer la taille de la table puis de mettre un overflow-x en scroll sur la balise <table> (donc scroll horizontal) et un overflow-y en scroll sur la balise <tbody> (scroll vertical sans impact sur le thead).

Arf... Mes questions étaient destinées à Mengué georges (suite à son post avant le tiens).

**Mengué georges** · 16/11/2009, 16h46

j'avais vu ta réponse "kernelfailure" et je l'ai testée mais n'y aurai-t-il pas une solution sans passer par js qui serait plus fluide ? avant de faire un test d'application.

**le_chomeur** · 16/11/2009, 16h55

div dans une cellule ....

**Mengué georges** · 16/11/2009, 17h43

Test de la solution de "kernelfailure" gros pb:
afin de diminuer la taille du tableau, utilisation maximum de colspan dans mon planning et là pb de décalage.

**kernelfailure** · 16/11/2009, 20h40

Envoyé par Mengué georges

Test de la solution de "kernelfailure" gros pb:
afin de diminuer la taille du tableau, utilisation maximum de colspan dans mon planning et là pb de décalage.

Ca ne me surprends pas. Ca ne fonctionne sous cette forme que pour des tableaux "réguliers".
Pour gérer des colspan et des rowspan, ça va être une autre histoire.

**le_chomeur** · 17/11/2009, 00h44

et l'utilisation des div ??? non ???

**kernelfailure** · 17/11/2009, 02h18

Il n'y a que les divs pour le cas des col et row...

Je suis parvenu à un test à peu près fonctionnelle.
Ca réagit pas mal sous FF, c'est capricieux sous Safari. Le soucis vient de la gestion des évènements.
Si quelqu'un a une bonne idée, c'est le moment

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
97
98
99
100
 
<html>
<head></head>
<body>
<br><br><br>
<table><tr><td>sdfgsfdgsdfg</td><td>
<div id="TOTOP"></div>
<div id="TOLEFT"></div>
<div id="TOBODY">
<table id="TOCLONE" border=1>
<tr><th></th><th>h1</th><th>h2</th><th>h3</th><th>h4</th><th>h5</th><th>h6</th><th>h7</th><th>h8</th></tr>
<tr><th>T1</th><td rowspan=2>11 ET 21</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 ERTE</th><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
<tr><th>T3</th><td>31</td><td>32</td><td colspan="2">33 ET 34</td><td>35</td><td>36</td><td>37</td><td>38</td></tr>
<tr><th>T4</th><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48</td></tr>
<tr><th>T5</th><td>51</td><td>52</td><td>53 fgh</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td></tr>
<tr><th>T6</th><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td></tr>
</table>
</div>
</td></tr></table>
<script>
var sizex = 150;
var sizey = 150;
var topHeadColor = 'grey';
var leftHeadColor = 'grey';
var squareColor = 'white';
 
var toclone = document.getElementById('TOCLONE');
 
var top = document.getElementById('TOTOP');
top.appendChild(toclone.cloneNode(true));
var left = document.getElementById('TOLEFT');
left.appendChild(toclone.cloneNode(true));
 
toclone.parentNode.style.overflow = 'scroll';
toclone.parentNode.style.width = sizex+'px';
toclone.parentNode.style.height = sizey+'px';
 
var tobody = document.getElementById('TOBODY');
var w=tobody.clientWidth;
var h=tobody.clientHeight;
 
function moveHeader (event) {
		var tb = document.getElementById('TOBODY');
		var sx = tb.scrollLeft;
		var sy = tb.scrollTop;
		document.getElementById('TOTOP').firstChild.style.left = '-' + sx + 'px';
		document.getElementById('TOLEFT').firstChild.style.top = '-' + sy + 'px';
 
		e.cancelBubble = true;
		if (e.stopPropagation) { e.stopPropagation(); }
	}; 
 
tobody.onmousemove = function(event) { moveHeader(event) };
tobody.onmousedown = function(event) { moveHeader(event) };
tobody.onmouseup = function(event) { moveHeader(event) };
 
var tr = toclone.getElementsByTagName('tr');
var l=0;
var c=0;
l = Math.max(l, tr[0].offsetHeight);
for(var i=0, n=tr.length; i<n; i++) {
	c = Math.max(c, tr[i].firstChild.offsetWidth);
}
 
top.style.display = 'inline';
top.style.position = 'absolute';
top.style.clip = 'rect(0px,'+w+'px,'+l+'px,0px)';
 
top.firstChild.style.background = topHeadColor;
top.firstChild.style.top = '0px';
top.firstChild.style.left = '0px';
top.firstChild.style.bottom = '0px';
top.firstChild.style.right = '0px';
top.firstChild.style.position = 'absolute';
 
left.style.display = 'inline';
left.style.position = 'absolute';
left.style.clip = 'rect('+l+'px,'+c+'px,'+h+'px,0px)';
 
left.firstChild.style.background = leftHeadColor;
left.firstChild.style.top = '0px';
left.firstChild.style.left = '0px';
left.firstChild.style.bottom = '0px';
left.firstChild.style.right = '0px';
left.firstChild.style.position = 'absolute';
 
var clip = document.createElement('div');
clip.style.position = 'absolute';
clip.style.background = squareColor;
clip.style.top = '0px';
clip.style.left = '0px';
clip.style.width = c+'px';
clip.style.height = l+'px';
clip.style.zIndex = '100';
top.appendChild(clip);
 
</script>
</body>
</html>

Le principe est le suivant :
On clone le tableau dans deux divs. On cache ce qui déborde pour ne garder que les entête top et left (clip).
Une troisième div (container du tableau) va servir pour le scroll, en écoute de certains events pour synchroniser (avec plus ou moins de bonheur) le défilement des entêtes.

Enfin, un dernier DIV est ajouter pour cacher les débordement du scrolling en haut à gauche, vu que je n'ai pas réussi à ajouter une zone de clipping pour les données.

Désolé, je n'ai pas passé le ballait dans ce bout de code, je voulais essayé ce que j'avais en tête. Le plus propre reste à faire

Je ne sais pas si IE peut digérer ça. Mais voilà l'idée.

Aussi : La récupération des tailles des éléments mériterait d'être plus précise. Et dernière chose, le scroll du navigateur n'est pas pris en compte (je n'ai aucune idée sur l'impact. J'ai pas testé).

**Mengué georges** · 17/11/2009, 17h43

Bonjour

Après test, c'est pas mal mais j'ai un gros pb, nous sommes à 99% sur IE6 et là pb sur les scroll.
Donc pour l'instant je reste sur le scroll vertical via 2 div contenant entête et données avec scroll, mais je ne désespère pas.

faire défiler le contenu d'un tableau

JavaScript

Discussions similaires

Partager

Partager