Affichage, édition graphique de tableaux

Soyez le premier à donner votre avis sur cette source.

Vue 12 639 fois - Téléchargée 725 fois

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 !

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
8
Date d'inscription
vendredi 16 mai 2008
Statut
Membre
Dernière intervention
28 mai 2008

merci infiniment

je vais essayé si j'arrive pas a le faire je vais te contacté

et merci d'avance merci bien
Messages postés
29
Date d'inscription
vendredi 25 juin 2004
Statut
Membre
Dernière intervention
22 juillet 2009

Le javascript ne peut pas accéder directement aux bases de données (le javascript est du coté client et non serveur). Cependant rien n'empêche de récupérer les données au format xml, json (ou autre) du serveur en utilisant un objet XMLHttpRequest javascript et de les utiliser avec le script.

Si tu n'y arrive pas tu peux me contacter par message privé.

a+
Messages postés
8
Date d'inscription
vendredi 16 mai 2008
Statut
Membre
Dernière intervention
28 mai 2008

a Mr thebmxeur
beau travail mais est ce qu'on peu le charger a partir d'une base de donné mysql si c possible posté le svp

merci d'avance
Messages postés
4
Date d'inscription
mercredi 18 juillet 2007
Statut
Membre
Dernière intervention
14 juin 2008

Je te mets 9/10 (^_^)

code excellent, travail soigné. Juste quelques fautes d'orthographe (mouhahaha)

Har_g, geek vs geek
Messages postés
29
Date d'inscription
vendredi 25 juin 2004
Statut
Membre
Dernière intervention
22 juillet 2009

Merci pour le commentaire.

Pour le lecteur multimédia il est disponible sur ce site ( http://www.javascriptfr.com/codes/PLAYER-LECTEUR-FICHIERS-AUDIO-MP3_25203.aspx ). Cependant l'interface à été faite par Ifebo et non par moi.

a+
Afficher les 15 commentaires

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.