plier/déplier tableau

Le
Toto
Bonjour,

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.
Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
une solution.
Merci.
Et bon WE.
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 4
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #749054

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.
Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
une solution.


Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
qu'elle ait l'id "total", tu peux faire :
document.getElementById("total").style.display = "none"; /* cacher */
document.getElementById("total").style.display = ""; /* montrer */

Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.

Francis Spiesser
Le #746715
Olivier Miakinen a présenté l'énoncé suivant :

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.
Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
une solution.


Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
qu'elle ait l'id "total", tu peux faire :
document.getElementById("total").style.display = "none"; /* cacher */
document.getElementById("total").style.display = ""; /* montrer */

Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.


Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs
de ligne. Pour les colonnes ça se complique parce que certains styles
ne fonctionnent pas dans les colgroup.
A mon avis, ce serait plus facile d'y arriver avec une matrice de div
habilement nommées
[ idÁ-R1 ][ idÂ-R1 ]...[ id=Cn-R1 ]
[ idÁ-R2 ][ idÂ-R2 ]...[ id=Cn-R2 ]
...
[ idÁ-Rn ][ idÂ-Rn ]...[ id=Cn-Rn ]

--
______
Francis (enlever .NIPUBNISOUMIS)
"Les propriétaires de Lada n'ont pas été surpris de voir L'URSS se
morceler"


Francis Spiesser
Le #746714
Il se trouve que Francis Spiesser a formulé :

Tu peux aussi voir au niveau des tbody pour afficher/masquer des blocs de
ligne. Pour les colonnes ça se complique parce que certains styles ne
fonctionnent pas dans les colgroup.
A mon avis, ce serait plus facile d'y arriver avec une matrice de div
habilement nommées
[ idÁ-R1 ][ idÂ-R1 ]...[ id=Cn-R1 ]
[ idÁ-R2 ][ idÂ-R2 ]...[ id=Cn-R2 ]
...
[ idÁ-Rn ][ idÂ-Rn ]...[ id=Cn-Rn ]


Sinon le code ci-dessous fonctionne dans IE mais pas dans FF (pour la
colonne)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Document sans nom</title>
</head>

<body><table width="200" border="1">
<colgroup span="1"><col id="col1" /></colgroup>
<colgroup span="1"><col id="col2" /></colgroup>
<colgroup span="1"><col id="col3" /></colgroup>
<tbody id="lig1">
<tr>
<th>&nbsp;</th>
<th>A</th>
<th>B</th>
</tr>
</tbody>
<tbody id="lig2">
<tr>
<th>1</th>
<td>A1</td>
<td>B1</td>
</tr>
</tbody>
<tbody id="lig3">
<tr>
<th>2</th>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
<a href="#"
onclick="document.getElementById('col2').style.display='';return
false">Afficher la colonne A</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('col2').style.display='none';return
false">Masquer la colonne A</a><br />
<a href="#"
onclick="document.getElementById('lig2').style.display='';return
false">Afficher la ligne 1</a>&nbsp;/&nbsp;<a href="#"
onclick="document.getElementById('lig2').style.display='none';return
false">Masquer la ligne 1</a>
</body>
</html>

--
______
Francis (enlever .NIPUBNISOUMIS)
"La dinde est tolérante, mais elle déteste les farceurs"

Olivier Miakinen
Le #746711
Une petite précision suite à ma réponse.

Le 29/06/2007 16:43, je répondais à Toto :

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.


document.getElementById("total").style.display = ""; /* montrer */


Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.


filh
Le #746707
Olivier Miakinen

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.
Du coté serveur (PHP) je peux gérer. C'est du coté client que je recherche
une solution.


Pour une ligne, c'est facile. La ligne que tu veux cacher, mettons
qu'elle ait l'id "total", tu peux faire :
document.getElementById("total").style.display = "none"; /* cacher */
document.getElementById("total").style.display = ""; /* montrer */

Pour une colonne, c'est un peu plus complexe car tu dois faire ça pour
chaque <th> et <td>, un par ligne. Mais bon, ça se fait aussi.



J'ai fait un truc comme ça, le mieux est de virer les lignes dans un
tableau bis, et de les remettre après :)

Faudrait que je mettes une belle license pour le code et que je le
publie...

FiLH


--
Le fondement du constat bourgeois, c'est le bon sens, c'est-à-dire
une vérité qui s'arrête sur l'ordre arbitraire de celui qui la parle.
Roland Barthes.
http://www.filh.org


ASM
Le #746485
Bonjour,

Je recherche un moyen de présenter un tableau (X lignes+ X colonnes) en
offrant la possibilité de plier/déplier certaines parties (lignes ou
colonnes) avec sous totaux à la manière du mode plan d'Excel.


Il faudrait déjà avoir un aperçu du table.
Et comprendre ce que tu entends par "mode plan" (quoi voir? les TH?)
Et les sous-totaux ? où sont-ils ?

function $(tablo) {
tablo = document.getElementById(tablo);
return tablo.getElementsByTagName('TBODY')[0];
}
function montabl(tablo) { // array du table
var tabl = [];
var r = $(tablo).rows;
for (var i=0; i<r.length; i++) {
var c = r[i].cells;
tabl[i] = [];
for(var j=0; j<c.length; i++)
tabl[i][j] = c[i];
}
return tabl;
}

// cacher/montrer une rangée, une colonne
function montrecache(tablo, rang, col) {
if(typeof(rang)!='undefined' && rang.length>0) {
var R = $(tablo).rows[rang].style;
R.display = R.display==''? 'none' : '';
}
if(typeof(col)!='undefined' && col.length>0) {
var T = montabl(tablo);
for(var i=0; i<T.length; i++) {
var C = T[i][col].style;
C.display = C.display==''? 'none' : '';
}
}
}


Exemple pour mode plan :

<html>
<script type="text/javascript">
function $(tablo) {
tablo = document.getElementById(tablo);
return tablo.getElementsByTagName('TBODY')[0];
}
function modeplan(tablo) {
var T = $(tablo).getElementsByTagName('TD');
for(var i=0; i<T.length; i++) {
var C = T[i].style;
C.display = C.display==''? 'none' : '';
}
}
function total(tablo) {
var T = $(tablo).rows;
var S = 0;
for(var i=1; i<T.length-1; i++) {
var R = T[i].cells;
var ss = R[1].getElementsByTagName('INPUT')[0].value;
if(ss && ss.length>0) {
ss = ss.toString().replace(',','.')*R[2].innerHTML.replace(',','.');
S += ss;
R[3].innerHTML = ss.toString().replace('.',',');
}
}
T[T.length-1].cells[1].innerHTML = ss.toString().replace('.',',');
}
onload = function() {
var T = $("monTabl").getElementsByTagName('INPUT');
for(var i=0; i<T.length; i++) {
T[i].size = 5;
T[i].onchange = function() { total('monTabl'); };
}
}
</script>
<table id="monTabl" border=1 cellspacing=2>
<tr class=titre>
<th>article</th><td>quant</td><td>px U</td><th>ss-tot</th>
</tr>
<tr>
<th>item 1</th><td><input name="q01"></td><td>2,5</td><th></th>
</tr>
<tr>
<th>item 2</th><td><input name="q02"></td><td>4,5</td><th></th>
</tr>
<tr>
<th>item 3</th><td><input name="q03"></td><td>5,2</td><th></th>
</tr>
<tr>
<th>total</th><th colspan=3></th>
</tr>
</table>
<p><a href="javascript:modeplan('monTabl')">mode plan</a></p>
</form>
</html>

--
Stephane Moriaux et son (moins) vieux Mac

Laurent vilday
Le #746484
Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.


C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
style.display mais plutôt d'utiliser le className de l'élément avec une
définition très simple.

.cacher { display:none }

Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
et pour le faire réapparaitre il faut simplement enlever cette classe.
Sans jamais me soucier des considération capilotractées du type
d'élément à faire apparaitre selon le type de navigateur.

--
laurent

Olivier Miakinen
Le #746480

Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.


C'est pour ça que j'ai pris le parti de ne *jamais* utiliser
style.display mais plutôt d'utiliser le className de l'élément avec une
définition très simple.

.cacher { display:none }


C'est aussi une méthode. Mais utiliser les valeurs "none" et "" dans
style.display marche tout aussi bien. Sans compter qu'il est plus facile
de positionner une valeur à "none" ou "" que de rajouter ou supprimer
une classe à des éléments qui parfois en contiennent déjà, parfois non.

Ainsi, pour cacher un élément il suffit d'y ajouter la classe "cacher"
et pour le faire réapparaitre il faut simplement enlever cette classe.
Sans jamais me soucier des considération capilotractées du type
d'élément à faire apparaitre selon le type de navigateur.


Je prends un exemple extrême :
class="Dupond Martin Lacacherie Miakinen Vilday"

Il faut un code pas trop stupide pour détecter que "cacher" ne fait pas
partie de la liste des classes et qu'on peut le rajouter, et surtout
qu'il ne faut pas le supprimer. C'est faisable, bien sûr, mais ça reste
moins simple que « style.display="none" » et « style.display="" ».


Laurent vilday
Le #746478
Très important : pour un élément de tableau, ne surtout pas positionner
la valeur de display à autre chose que "none" ou "". La positionner à
"block" par exemple devrait fonctionner dans IE6 mais pas dans les
navigateurs respectueux des standards. Inversement, la positionner à
"table-row" pour un <tr> ne fonctionnera pas dans IE6.
C'est pour ça que j'ai pris le parti de ne *jamais* utiliser

style.display mais plutôt d'utiliser le className de l'élément avec une
définition très simple.

.cacher { display:none }


C'est aussi une méthode. Mais utiliser les valeurs "none" et "" dans
style.display marche tout aussi bien.


Je n'ai absolument pas dit le contraire :)

Mais je ne vois toujours passer que la solution du style.display hors
comme j'utilise une autre méthode, j'en profitais pour rebondir sur ton
alerte :D

Sans compter qu'il est plus facile
de positionner une valeur à "none" ou "" que de rajouter ou supprimer
une classe à des éléments qui parfois en contiennent déjà, parfois non.


Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
contrôles pas) avec un style.display = 'block', qu'on le cache puis
l'affiche et que ohh ohh, le layout a changé...

Je prends un exemple extrême :
class="Dupond Martin Lacacherie Miakinen Vilday"

Il faut un code pas trop stupide pour détecter que "cacher" ne fait pas
partie de la liste des classes et qu'on peut le rajouter, et surtout
qu'il ne faut pas le supprimer. C'est faisable, bien sûr, mais ça reste
moins simple que « style.display="none" » et « style.display="" ».


Moins simple c'est possible, et encore mon expérience tend à me faire
penser l'inverse. Car contrairement a style.display, la solution par une
classe garantie une prise de tête égale à zéro sur *tous* les cas
possibles et ce quel que soit le navigateur.

function hasCSS(elt, cName)
{
var c;
if ( !elt || !elt.className ) { return false; }
c = elt.className.split(' ');
return c.indexOf(cName) != -1;
}

function isVisible(elt) { return !hasCSS(elt, 'cacher'); }

Le problème ici, c'est que Array.prototype.indexOf c'est du JS1.6 je
crois et donc si on le veut partout (IE6, Opéra et autres), ben faut se
l'implémenter à la main.

Allez, je suis trop bon :D, voila ce que j'utilise :

if ( !Array.prototype.indexOf )
{
Array.prototype.indexOf = function(o, from)
{
if ( !from ) { from = 0; }
else if ( from < 0 ) { from = Math.max(0, this.length + from); }
for ( var i = from, m = this.length; i < m; i++ )
{
if ( this[i] === o ) { return i; }
}
return -1;
};
}

Et au pire, si on veut pas s'embêter avec [].indexOf, on peut toujours
passer par un truc plus générique : les Regexps

function hasCSS(elt, cName)
{
var r;
if ( !elt || !elt.className ) { return false; }
r = new RegExp("(^|\s)" + cName + "(\s|$)");
return r.test(elt.className);
}

--
laurent



Olivier Miakinen
Le #746231

Sans compter qu'il est plus facile
de positionner une valeur à "none" ou "" que de rajouter ou supprimer
une classe à des éléments qui parfois en contiennent déjà, parfois non.


Possible oui. Sauf par exemple quand on a un élément inline (que tu ne
contrôles pas) avec un style.display = 'block', qu'on le cache puis
l'affiche et que ohh ohh, le layout a changé...


Il me semble que ça ne pourrait arriver que si tu positionnes le
display à 'block' en JavaScript et pas s'il est positionné en CSS.
Or je n'arrive pas à imaginer un seul cas dans lequel cela pourrait
être utile (par opposition à « tordu »). En outre, si vraiment tu
arrives à imaginer un tel cas, alors on peut supposer que tu saches
quelle valeur tu as mise. Et pour faire bonne mesure, il suffit
alors de le sauver au moment de le mettre à 'none' :

hide() {
if (this.style.display != 'none') {
this.saveDisplay = this.style.display;
this.style.display = 'none';
}
}

show() {
/* il faut peut-être verifier que this.saveDisplay est défini */
this.style.display = this.saveDisplay;
}

Je me trompe ?


Publicité
Poster une réponse
Anonyme