Affichage, édition graphique de tableaux

Télécharger le projet
Commenter

Description

Ce script permet d'afficher les tableaux, et de les éditer. On peut afficher des tableaux simple ou des tableaux d'objets.
Un click sur le titre d'une colonne la triera.
On peut éditer une cellule en clicant deux fois lentement dessus.
Il y a différentes méthodes disponible pour redimensionner la table, les colonnes ...
La mise en page est gérée en partie via une feuille de style.

Source / Exemple : 


// exemples d'utilisations :

// on suppose que la balise body est <body id="conteneur">
// on peut créer plusieures table sur la même page (en changeant le conteneur)
// ces exemples doivent être testé séparément

// affiche un tableau de nombre
var t1 = new Table("t1",[6,20,43], null);
t1.dessiner("conteneur");

// affiche un tableau à deux dimension de nombre
var t2 = new Table("t2",[[1,2],[2,3],[3,4]], ["colonne 1", "colonne 2"]);
t2.dessiner("conteneur");

// affiche un tableau d'objets perso
// création de la classe des objets perso
function Chanson(tit, aut, alb, dur){
	this.titre = tit;
	this.auteur = aut;
	this.album = alb;
	this.duree = dur;
}

Chanson.prototype.dureeString = function (){
	var min = Math.floor(this.duree/100);
	var sec = this.duree - (min*100);
	return (min + ":" + ((sec < 10)?"0":"") + sec); 
}

// on redefini deux méthode de l'objet table
// afin de n'afficher que les propriétées voulues
// si on ne les redefinis pas toutes les prorpiétées seront affichées

// lecture des propriétées
function obtCellule(indLigne, indColonne){
	var lg = this.obtLigne(indLigne);
	var cel = null;
	switch(indColonne){
		case 0:
			cel = lg.titre;
			break;
		case 1:
			cel = lg.auteur;
			break;
		case 2:
			cel = lg.dureeString();
			break;
		case 3:
			cel = lg.album;
			break;
	}
	return cel;
}

// écriture des propriétées
function defCellule(indLigne, indColonne, valeur){
	var lg = this.obtLigne(indLigne);
	switch(indColonne){
		case 0:
			lg.titre = valeur;
			break;
		case 1:
			lg.auteur = valeur;
			break;
		case 3:
			lg.album = valeur;
			break;
	}
}

// création des objets
var listeLecture = new Array();
listeLecture.push(new Chanson("Stairway to heaven", "Led Zepplin", "Led Zepplin IV", 712));
listeLecture.push(new Chanson("Black Bird", "The Beatles", "White album", 325));
listeLecture.push(new Chanson("Paint it black", "The Roling Stones", "Aftermath", 352));
listeLecture.push(new Chanson("We will rock you", "Queen", "News of the world", 405));
listeLecture.push(new Chanson("I Don't Have To Try", "Avril Lavigne", "The best damns thing", 341));

var t3 = new Table("t3", listeLecture, ["Titre","Auteur","Durée","Album"]);
// association des methodes redéfinies
t.obtCellule = obtCellule;
t.defCellule = defCellule;
// changement des tailles etc ...
t.defTaille(550,200);
t.defLargeurColonne(2, 50);
t.defAlignement(2, 2);
t.defEditable(2, false);
t.dessiner("conteneur");

Conclusion :


Un exemple est disponible sur cette page :
http://users.skynet.be/thebmxeur/table/

Le script fonctionne sous Firefox, Opera, Safari et IE (pas testé sur les autres navigateurs).
Dans IE et Opera la gestion du double click ne fonctionne pas très bien (si quelqu'un a une idée de comment gérer ça qu'il me contacte).

Tout commentaire, suggestion, report de bug ou autre est le bienvenu !
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (thebmxeur)