IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

Redimensionner les colonnes d'un tableau ( drag and drop )


Sujet :

Contribuez

  1. #1
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut Redimensionner les colonnes d'un tableau ( drag and drop )
    Voila voila tant qu'on est dans les tableaux, encore un script non intrusif sur le redimensionnement des colonnes de tableaux

    un rar en exemple

    pour tester :

    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
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>Untitled Document</title>
    		<style type="text/css">
    			#letableau td{
    				border-right:1px solid #666;
    				padding-left:5px;
    				padding-right:5px;
    			}
    		</style>
    	</head>
    	<body>
    <table cellpadding="0" cellspacing="0" border="0" id="letableau" class="sortable">
    		<thead>
    			<tr>
    				<th class="nosort"><h3>ID</h3></th>
     
    				<th><h3>Name</h3></th>
    				<th><h3>Phone</h3></th>
    				<th><h3>Email</h3></th>
    				<th><h3>Zip</h3></th>
    				<th><h3>Birthdate</h3></th>
    				<th><h3>Last Access</h3></th>
     
    				<th><h3>Rating</h3></th>
    				<th><h3>Done</h3></th>
    				<th><h3>Salary</h3></th>
    				<th><h3>Score</h3></th>
    			</tr>
    		</thead>
    		<tbody>
     
    			<tr>
    				<td>1</td>
    				<td>Ezekiel Hart</td>
    				<td>(627) 536-4760</td>
    				<td><a href="mailto:#">tortor@est.ca</a></td>
    				<td>53082</td>
     
    				<td>12/02/1962</td>
    				<td>March 26, 2009</td>
    				<td>-7</td>
    				<td>7%</td>
    				<td>$73,229</td>
    				<td>6.9</td>
     
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>Jaquelyn Pace</td>
    				<td>(921) 943-5780</td>
    				<td><a href="mailto:#">in@elementum.org</a></td>
    				<td>46789</td>
     
    				<td>06/03/1957</td>
    				<td>October 20, 2006</td>
    				<td>-7</td>
    				<td>33%</td>
    				<td>$130,752</td>
    				<td>4.9</td>
     
    			</tr>
    		</tbody>
    		</table>
    		<script type="text/javascript" src="mRedimTable.js">	
    		</script>
    		<script type="text/javascript">
    			mRedimTable.Redim('letableau');
    			mRedimTable.Redim('letableau2');
     
    		</script>
     
    	</body>
    </html>
    et le script js :

    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
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
     
    /**
     * @author le_chomeur
     */
     
    var mRedimTable = (function(){
    	var M$ = function(e){return document.getElementById(e);};
    	var M$$ = function(e,p){return p.getElementsByTagName(e)};
    	var addEvent = function(func,onEvent,elementDom) { 
    					    if (window.addEventListener) { 
    							elementDom.addEventListener(onEvent, func, false); 
    						} else if (document.addEventListener) { 
    							elementDom.addEventListener(onEvent, func, false); 
    						} else if (window.attachEvent) { 
    							elementDom.attachEvent("on"+onEvent, func); 
    					    } 
    	};
    	var GetEvent = function(e){
    					        if (!e) e = window.event;
    					        return e;
    	};	
    	var findPos = function(obj){
    		        //position x / y de l'objet
    		        var x = obj.offsetLeft || 0;
    		        var y = obj.offsetTop || 0;
    		        //tant qu'il y a un parent, on ajoute la position de son parent
    		        while (obj = obj.offsetParent) {
    		            x += obj.offsetLeft
    		            y += obj.offsetTop
    		        }
    		        //Ici on retourne x ou y ( ou les deux dans un tableau ou un hash
    		        return new Array(x,y);
    	};						
    	return {
    		targ : null,
    		tabRedim : null,
    		Redim : function(tab){
     
    			this.tabRedim = M$(tab);
    			var lstTd = M$$('td',this.tabRedim);
    			//Sur chaque céllule, on va affecter la gestion de redimmensionnement de la colonne
    			if (lstTd) {
    				for (var i = 0, imax = lstTd.length; i < imax; i++) {
    					//Ajout des évènements sur chaque célulle
    					addEvent(function(indexCol,lstTd){return function(e){
     
    						e = GetEvent(e);
    						if (mRedimTable.targ == null) {
    							if (e.target) 
    								mRedimTable.targ = e.target;
    							else 
    								if (e.srcElement) 
    									mRedimTable.targ = e.srcElement;
    							if (mRedimTable.targ.nodeType == 3) // Bug Safari
    								mRedimTable.targ = mRedimTable.targ.parentNode;
    						}
    						posTaille = (parseInt(findPos(mRedimTable.targ)[0])+parseInt(mRedimTable.targ.offsetWidth));
    						if (parseInt(e.clientX) < (findPos(mRedimTable.targ)[0] + 5)) {
    							if (indexCol != 0) {
    								mRedimTable.targ = lstTd[indexCol - 1];
    								mRedimTable.targ.redim = true;
    								mRedimTable.targ.style.cursor = "w-resize";
    							}
    						}
    						else {
    							if (parseInt(e.clientX) > (posTaille - 5) || parseInt(e.clientX) < (findPos(mRedimTable.targ)[0] + 5)) {
    								mRedimTable.targ.redim = true;
    								mRedimTable.targ.style.cursor = "w-resize";
    							}
    							else {
    								mRedimTable.targ.redim = false;
    							}
    						}
     
    					}}(i,lstTd),"mousedown",lstTd[i]);
    				}
    				//Gestion du déplacement de la souris sur le document
    					addEvent(function(){
    						return function(e){
    							e = GetEvent(e);
    							//Récupération de la td
    							if (e.target) 
    								targS = e.target;
    							else 
    								if (e.srcElement) 
    									targS = e.srcElement;
    							if (targS.nodeType == 3) // Bug Safari
    								targS = targS.parentNode;
    							//Récupération de la position de la cellule + la taille	
    							posTaille = (parseInt(findPos(targS)[0]) + parseInt(targS.offsetWidth));
    							//Si on trouve une cellule et que le curseur se trouve a -5px ou +5px de la bordure
    							//Alors on affiche le curseur de redimmensionnement
    							if (targS.tagName == "TD" && mRedimTable.targ == null) {
    								if (mRedimTable.targ == null) {
    									if (parseInt(e.clientX) > (posTaille - 5) || parseInt(e.clientX) < (findPos(targS)[0] + 5)) {
    										targS.style.cursor = "w-resize";
    									}
    									else {
    										targS.style.cursor = "auto";
    									}
    								}
    							}
    							//Si une cellule est en mémoire alors on la redimensionne
    							if (mRedimTable.targ != null && mRedimTable.targ.redim) {
    								mRedimTable.targ.focus(); //On lui donne le focus pour éviter la sélection de texte
    								var ajout = parseInt(e.clientX) - (parseInt(findPos(mRedimTable.targ)[0]) + parseInt(mRedimTable.targ.offsetWidth));
    								mRedimTable.targ.style.width = (parseInt(mRedimTable.targ.offsetWidth) + ajout - 5) + "px";
    							}
    						}
    					}(), "mousemove", document.body);
    					addEvent(function(){return function(e){
    						if(mRedimTable.targ!=null){
    							mRedimTable.targ.redim = false;
    							mRedimTable.targ.style.cursor = "auto";
    							mRedimTable.targ = null;							
    						}
    					}}(i),"mouseup",document);
    			}
    		}
     
    	}
    })();
    Fichiers attachés Fichiers attachés
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Han, sympa.
    Il faudrait que j'étudie le code notamment pour voir si il y a moyen de fixer une colonne une fois pour toute car si j'ai deux colonnes à redimmensionner, je commence par l'une, puis en m'occupant de la seconde, la première perd sa nouvelle taille.

    Je me demandais, est-ce possible de faire pareil avec les lignes et d'avoir alors des scrollbar dans les cellules qui poseraient problème ? En jouant avec des div, sans doute ?

  3. #3
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    Le truc c'est que pour redimensionner la taille des colonnes il faut bien trouver de la place ailleurs et en général le navigateur récupère automatiquement la taille la ou il le peut

    Pour ce qui est de la taille verticale à tester ;-)
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

Discussions similaires

  1. [Xcelsius] Redimensionner les colonnes d'un tableau de feuille de calcul
    Par jordav dans le forum Autres produits SAP BO
    Réponses: 1
    Dernier message: 09/07/2013, 18h15
  2. Replacer les noeuds lors d'un drag and drop
    Par maloups dans le forum Composants
    Réponses: 1
    Dernier message: 19/09/2009, 14h44
  3. [VBA|EXcel]Moduler les colonnes d'un tableau
    Par quario dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 11/03/2007, 17h09
  4. Réponses: 1
    Dernier message: 29/04/2006, 16h55
  5. Redimensionner les images dans un tableau
    Par cyke37 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 13/10/2005, 19h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo