|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 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 !
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 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 (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
table imbriqué ou multiniveau [ par ammoun1882 ]
voila mon problème c que j'ai besoin de créer des tableau imbriqué l'une dans l'autre sachant que j'ai des données d'une base de donnée jusque là c bo
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|