Table des matières
Niveau
..........
En rapport...

colonnes de tableau redimensionnable

Vous aimeriez avoir les colonnes de votre tableau redimensionnable façon excel ? un simple drag'n'drop et hop la taille des colonnes change !
Voila qui est faisable !
Le code ci dessous est une adaptation des pistes trouvées sur http://www.short-media.com/forum/archive/index.php/t-11568.html .

Code

javascript
var MinSize=0;
var _startPosition = 0;
var _diffPosition = 0;
var _allowMove = false;
var _resizerColumn = null;
var _firstColumn = null;
var _secondColumn = null;
var _resizerColumnLeft = 0;
var _resizerColumnWidth = 0;
var _firstColumnLeft = 0;
var _firstColumnWidth = 0;
var _secondColumnLeft = 0;
var _secondColumnWidth = 0;
var _systemEvent = null;
if (navigator.appName == 'Netscape') {
	document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP | Event.ONLOAD);
}
document.onmouseup = disableMouseMovement;
document.onmousemove = setNewPosition;
function setPosition(e) {
	// Called for OnMouseDown event
	if (navigator.appName == 'Netscape') {
	_systemEvent = e;
	} else {
	_systemEvent = event;
	}
	_startPosition = _systemEvent.clientX;
	_allowMove = true;	
	_resizerColumnLeft = findPosX(_resizerColumn);
	_resizerColumnWidth = _resizerColumn.offsetWidth; //_resizerColumn.style.width;
	_firstColumnLeft = findPosX(_firstColumn);
	_firstColumnWidth = _firstColumn.offsetWidth; //_firstColumn.style.width;
	_secondColumnLeft = findPosX(_secondColumn);
	_secondColumnWidth = _secondColumn.offsetWidth; //_secondColumn.style.width;
	return true;
}
 
function setResizeColumns(resizerColumn, firstColumn, secondColumn) {
	// Called for OnMouseOver event
	// resizerColumn is the actual object of the column that will be moved so that
	// firstColumn and secondColumn can be resized.
	// firstColumn will have its dimensions either grown or shrunk.
	// secondColumn will have the exact opposite done to it that firstColumn has.
	// If firstColumn is shrink by 60px, secondColumn is grown by 60px, the opposite also holds true.
	resizerColumn=document.getElementById(resizerColumn);
	firstColumn=document.getElementById(firstColumn);
	secondColumn=document.getElementById(secondColumn);
	if (_allowMove == false) {
		_resizerColumn = resizerColumn;
		_firstColumn = firstColumn;
		_secondColumn = secondColumn;
	}
	return true;
}
 
function disableMouseMovement(e) {
	// Called for OnMouseUp event
	_allowMove = false;
	return false;
}
 
function setNewPosition(e) {
	// Called for OnMouseMove event
	// BEGIN_HACK so that setPosition() can work.
	if (navigator.appName == 'Netscape') {
	_systemEvent = e;
	} else {
	_systemEvent = event;
	}
	// END_HACK
	newPosition = _systemEvent.clientX;
	if (_allowMove) {
		_diffPosition = _startPosition - newPosition;
		var tpos1 = (parseInt(_firstColumnWidth) - parseInt(_diffPosition)) ;
		var tpos2 = (parseInt(_secondColumnWidth) + parseInt(_diffPosition)) ;
		if (tpos1<MinSize) return;
		if ((tpos2<MinSize) && (_firstColumnWidth>tpos1)) return;
		if (tpos2<0) tpos2=0;
		if (tpos1<0) tpos1=0;
		_firstColumn.style.width = tpos1+ "px";
		_secondColumn.style.width = tpos2+ "px";
	}
	return true;
}
 
function findPosX(obj) {
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
	curleft += obj.x;
	return curleft;
}
 
function findPosY(obj){
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
	curtop += obj.y;
	return curtop;
}

Principe

On dessine un tableau où chaques colonnes de données est séparées par une colonne vide de 'redimensionnement'.
Donc si votre tableau comporte normalement 3 colonnes, vous devez le dessiner avec 5 colonnes.

col1redim1col2redim2col3

Utilisation

Ce n'est pas trivial mais ce n'est pas mortel non plus, voila comment si prendre :
Pour la 1ere ligne de chaque colonne de CONTENU, mettez un ID unique, par exemple

html4strict
<td id="c0">bla</td>

Pour la 1ere ligne de chaque colonne de RESIZE, mettez :

La fonction setResizeColumns prend 3 paramètres :

exemple :

html4strict
<td class="Resizor" id="c01" onmousedown="setPosition(event);" onmouseover="setResizeColumns('c01', 'c0', 'c1');">&nbsp;</td>

Et voila, c'est tout :)

Un peu de style

Vous pouvez ajouter un CSS au colonne de RESIZE pour, par exemple avoir un curseur de souris plus explicite…

Exemple

colredim.htm



04/01/2008 14:14 -

iDo –