CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 08 01 01:35:16

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Divers

> AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX

Information sur la source

Note :

8,50 / 10

Catégorie :Divers Classé sous :tableau, table, edition, tri, quicksort Niveau :Initié Date de création :30/07/2007 Vu / téléchargé :9 036 / 534

Auteur : thebmxeur

Ecrire un message privé

Site perso

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

// 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");

// 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 !

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

fleche_bas.png 209 octets
fleche_haut.png 207 octets
index.html 3 687 octets
librairie.js 1 109 octets
table.css 1 726 octets
table.js 16 462 octets

Télécharger le zip

Sources du même auteur

PLAYER / LECTEUR DE FICHIERS AUDIO (MP3, ...)

Toutes les sources de thebmxeur

Sources de la même categorie

TROUVER UN ITINÉRAIRE AVEC GOOGLE MAP par amrounix

DECOMPTEUR ET CHECKBOX TEMOIN par dialvb

L'API GOOGLE EARTH par brennal

SIMULER UN SERVEUR COMET (EN PUSH) EN PHP ET JS par sebcap26

OPÉRATIONS SUR MATRICES par Minilogus

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

MOOTABLEAU par Miky76

TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT par Klephte

TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML par pifou25

TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI... par the_wwt

TRI DE TABLEAUX HTML par coucou747

Commentaires et avis

Commentaire de Jarod1980 le 31/07/2007 12:09:22

Salut,
J'aime bien ta source. Par contre, j'ai essayé ton exemple mais je ne vois pas comment on peut redimmensionner la taille des colonnes dynamiquement avec la souris. A moins que ce ne soit moi qui n'est pas compris la description de ta source.

Commentaire de thebmxeur le 31/07/2007 12:26:27

Bonjour,
on ne peut pas redimensionner la taille des colonnes à la souris. J'ai essayé de le faire mais ce n'était pas très concluent. Tu peux tester ce que j'avais fait à cette adresse ( !! il y a un bug qui fait que les colonnes ne prennent pas toujours la bonne taille !!) :
http://users.skynet.be/thebmxeur/tableold/
J'ai enlevé cette méthode car elle donnait une impression de 'lourdeur' au script. Si j'arrive à l'améliorer je la réintégrerais peut être.
Pour redimensionner les colonnes il faut le faire dans le code via la méthode :
defLargeurColonne(indice de la colonne, taille en px);
La première colonne a l'indice 0.

a+

Commentaire de Freuddone le 06/08/2007 18:51:44

Salut,

Ça donne pas mal d'idées intéressantes ce script. C'est à mon goût une bonne idée. Il faudrait par contre pouvoir enregistrer les changements, en comparant les cellules au chargement de la page et après un clic sur un bouton.
Je pense à cela par exemple pour gérer des discussions mises en favoris sur un forum, afin que le membre concerné puisse personnalisé à sa guise les titres, pour mieux s'y repérer. Il faut pouvoir vérifier au chargement l'existence d'un titre perso pour tel ou tel utilisateur afin de remplacer l'original si c'est les cas, pouvoir ne rendre modifiables que certaines colonnes, et avant tout rendre possible la sauvegarde des modifications dans une cellule.

J'ai les idées mais pas les connaissances nécessaires !
C'est possible ça ?

@+

Commentaire de thebmxeur le 06/08/2007 19:13:21

Bonjour,
la sauvegarde est possible mais en passant par du php / base de données. Cette partie serait différente en fonction des besoins des utilisateurs et devrait être développée par le webmaster (ou toutes personnes qui veut utiliser ce script).

Merci pour le commentaire.
a+

Commentaire de jcdhl le 08/08/2007 14:50:51

Bonjour,

J'ai réussi à mettre en place ton code en créant un tableau de façon dynamique, mais j'ai un problème pour trier une colonne qui ne contient que des nombres. Exemple de ce que j'obtient en tri décroissant :

503
213
1523
1015
100

Est-il possible de faire le tri en considérant que cette colonne est uniquement numérique ?

Merci

Cordialement
Jcdhl
P.S. sinon ta source est géniale

Commentaire de thebmxeur le 08/08/2007 17:03:50

Bonjour,
le tri devrait fonctionner aussi bien sur des nombres que sur des chaîne de caractère.
http://users.skynet.be/thebmxeur/table/index2.html

Si tu as modifié le script donnes plus d'infos sur ce que tu as fait et comment tu crées le tableau.

Tu peux me contacter par message privé.
a+

Commentaire de jcdhl le 09/08/2007 07:09:29

Re-bonjour,

Toutes mes excuses, cela fonctionne parfaitement en effet.
Lors de la création de mon tableau, je mettais les nombres entre guillemets. Ils étaient donc identifiés comme du texte.

Cordialement
Jcdhl

Commentaire de masternico le 25/10/2007 17:09:52 8/10

Salut, c'est superbe.
Comme JDCHL, je l'ai mis en dynamique avec du php.
Par contre, il y a un petit bug dont je n'ai pas réussi à trouver la soluce:
dans mon code HTML, si "table.css" n'est pas le premier fichier CSS inclu, cela ne marche pas.
Il semblerais que la fonction getCss() ne reçoit que les noeuds CSS du premier fichier CSS.
Il a donc fallu que je mette table.css en premier pour que cela marche.

Cordialement.

Commentaire de thebmxeur le 25/10/2007 23:24:22

Salut.

Pour pouvoir utiliser une autre feuille css que la première de la page il faut modifier :

if(document.styleSheets[0].cssRules)
    this.cssRules = document.styleSheets[0].cssRules;
else
    this.cssRules = document.styleSheets[0].rules;

par :

var docCss;
for(var i = 0; i < document.styleSheets.length; i++){
    var str = document.styleSheets[i].href;
    if(str.substring(str.lastIndexOf("/")+1) == "table.css"){
        docCss = document.styleSheets[i];
    }
}

if(docCss.cssRules)
    this.cssRules = docCss.cssRules;
else
    this.cssRules = docCss.rules;

IMPORTANT : l'attribut "href" de la balise "link" doit contenir un "/" juste avant "table.css"
Si la feuille css est dans le mème répertoire que la page html il faut donc mettre :

<link rel="stylesheet" type="text/css" href="./table.css" />

a+

Commentaire de masternico le 26/10/2007 09:20:29

Yope, c'est sympa de me répondre.
J'avais fini par arriver à cette conclusion (m'a fallut du temps car je ne suis pas top en java et encore moin en DOM) et j'avais commencé à implémenté une autre méthode: en fait, j'avais mis une classe 'dummy' en début du fichiers CSS. Cela me permettait donc de faire une boucle sur toutes feuilles de styles puis de rechercher dans chacune si la classe dummy existait en première position.
Basiquement, c'est la même chose, mais ta méthode me semble plus élégante. Et puis comme c'est ton code je vais donc utilisé ta modif.
:)
A+

PS: au fait, j'ai visité ton site, j'aime bien l'interface du lecteur multimédia. Le graphisme a de la gueule.
Voili voilou, bonne continuation

Commentaire de thebmxeur le 26/10/2007 13:49:24

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+

Commentaire de har_g le 07/04/2008 15:25:33 9/10

Je te mets 9/10 (^_^)

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

Har_g, geek vs geek

Commentaire de ouassilachraf le 22/07/2009 20:10:04

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

Commentaire de thebmxeur le 22/07/2009 20:53:22

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+

Commentaire de ouassilachraf le 22/07/2009 21:42:37

merci infiniment

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

et merci d'avance merci bien

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

tableau avec tri dynamique [ par rcedric ] Salut a tous,voila mon probleme; je cherche à afficher un tableau et que lorsqu l'on clic sur le libellé le tableau est trié et réafficher dynamiqueme Tri d'une table en fonction du click sur une colonne [ par manutu ] salut a tousj ai un problème. J'ai une table avec plusieurs colonnes. Je dois trier la table par défaut sur la premiere et ensuite sur la colonne sur pb tri tableau! [ par joduak ] salut je voudrai savoir comment on fait un tri d'un tableau javascript de nombres? genre: tableau[0]=4 tableau[1]=8 tableau[2]=23 etc...dans l'ordre c Formulaire : Ajouter une ligne sans reload [ par coraziari ] Bonjour,Je réalise un formulaire de saisie de CV mais je galère un peu pour les expériences. En effet, pour ne pas "polluer" trop la page, j'ai mis un Tri de tableau associatif [ par cydelic ] Bonjour, J’ai un petit problème de tri... je vous explique Rien de bien compliquer, j’ai un tableau associatif du genre : var Tri de tableau [ par Evangun ] Bonjour à tous,je me demande pourquoi quand je trie mon tableau alphabétiquement, ils sont tous bon sauf le premier qui est mis en dernière position ! Trier dynamiquement un tableau HTML (à l'aide de XML, XSL, Javascript) [ par edevouge ] Bonjour, Dans le cadre d'un stage, j'ai besoins de créer un tableau html à partir d'un fichier XML et d'un fichier XSL. Et grâce au JavaScript, je v tri de tableau multiple [ par PROTECTIONNISTE ] Bonjour,Je voudrais pouvoir classer via un élèment de tableau et ressortir ce tri convenablement. j'expliques car pour le moment ça veut rien dire ;-) Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu Tri (fonction sort) [ par John_Doe_88 ] Salut tlm,J'utilise la fonction sort pour trier un tableau, mais ce tableau peut être très grand et dans ce cas j'obtiens un message dans le navigateu

Nos sponsors

Derniers Blogs

WP7 5K BELGIUM CHALLENGE par junarnoalg

LES MONADES POUR LES NULS par mdufourneaudravel

[WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7 par Audrey

VIVE LES MOCKS ET LES POCOS par vLabz

[WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5) par JeremyJeanson

Forum

RE : PROBLEME ENCHAINEMENT DE FONCTION par loicseg

PROBLEME ENCHAINEMENT DE FONCTION par loicseg

RE : MODéLISATION FILE D'ATTENTE DE COMMANDE AVEC HTML/AJAX/MYSQL par PetoleTeam

RE : CHANGER LA VALEUR D'UNE VARIABLE PAR UNE FONCTION par PetoleTeam

RE : SUBMIT AVEC UNE IMAGE EN AJAX : ENVOI DE FORMULAIRE par romi36

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Crystal Report (11)
CRYSTAL REPORT (11)

Crystal Reports est un outil de reporting souple et puissant, vous pouvez très facilement consult...

Cliquez pour télécharger Crystal Report
Academy System (12.0.2.0)
ACADEMY SYSTEM (12.0.2.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft iPod Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPOD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPod Vidéo Convertisseur est un outil puissant de conversion d'iPod, facile à utiliser. ...

Cliquez pour télécharger Xilisoft iPod Vidéo Convertisseur 6
Xilisoft iPhone Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPHONE VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPhone Vidéo Convertisseur est le meilleur logiciel de conversion iPhone qui peut facile...

Cliquez pour télécharger Xilisoft iPhone Vidéo Convertisseur 6
Xilisoft iPad Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPAD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Il s'agit d'un logiciel polyvalent pour convertir les formats vidéo/audio populaires en formats p...

Cliquez pour télécharger Xilisoft iPad Vidéo Convertisseur 6