Accueil > > > AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX
 AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX
 Information sur la source
 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
- // 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 !
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
 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
|
Derniers Blogs
 CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
 Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|