[SRC] Ajout de classe au tutoriel d'Olivier Lance "modification inline de données"
Bonjour à tous,
J'ai créé une classe pour les listes déroulantes à ajouter aux classes déjà présentes dans le tutoriel d'Olivier Lance. La classe est bien entendu largement inspirée des classes existentes, et j'ai glané sur le forum quelques infos pour avancer.
Voici un code qui fonctionne sous Firefox 1.8 et IE 6 mais ne marche pas à mon avis pas sur tous les navigateurs. Toute suggestion à ce sujet est la bienvenue.
fichier inlinemod.class.listeDeroulante.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| var liste = null ;
function ListeDeroulante() {
this.id = -1 ;
this.valeur = "" ;
this.nomChamp = "" ;
this.parent = null ;
this.texteErreur = "" ;
}
ListeDeroulante.prototype.remplacerTexte = function (parent, sauvegarde, tab) {
if (!parent || !sauvegarde) return false ;
else this.parent = parent ;
liste = document.createElement("select") ;
liste.appendChild(document.createElement("option")) ;
var k ;
for (i = 0 ; i < tab.length ; i++) {
if (navigator.appName == "Microsoft Internet Explorer") {
k = new Option(tab[i][1],tab[i][0]);
liste.add(k);
}
else {
var k = document.createElement("option");
k.value = tab[i][0] ;
k.text = tab[i][1] ;
liste.appendChild(k) ;
}
}
liste.onchange = function() {
sauvegarde() ;
} ;
parent.replaceChild(liste, parent.firstChild) ;
}
ListeDeroulante.prototype.activerChamp = function() {
liste.focus() ;
}
ListeDeroulante.prototype.getValeur = function() {
return liste.value ;
}
ListeDeroulante.prototype.getTexte = function() {
return liste.selectedIndex.text ;
}
ListeDeroulante.prototype.terminerEdition = function() {
this.parent.replaceChild(document.createTextNode(liste.options
[liste.selectedIndex].text), this.parent.firstChild) ;
delete liste ;
}
ListeDeroulante.prototype.echaperValeur = function() {
return "false" ;
}
ListeDeroulante.prototype.erreur = function() {
if (this.getValeur() == "") {
this.texteErreur = "Aucune saisie effectuée !" ;
return true ;
}
else return false ;
} |
Modification du fichier inlinemod.js : ajouter simplement au code la fonction suivante :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function inlineModTab(id, obj, tab, nomChamp, classe) {
if(editionEnCours) return false;
else {
editionEnCours = true;
sauve = false;
}
champ = eval('new ' + classe + '();') ;
champ.valeur = obj.innerText ? obj.innerText : obj.textContent ;
champ.valeur = trim(champ.valeur) ;
champ.id = id ;
champ.nomChamp = nomChamp ;
champ.remplacerTexte(obj, sauverModTab, tab) ;
champ.activerChamp() ;
} |
Cette fonction fonctionne comme inlineMod d'Olivier Lance, sauf qu'elle prend en compte le tableau contenant les options du select.
Enfin, voici un exemple d'appel de la fonction ci-dessus
Code:
<td class="cellule" ondblclick="inlineModTab(<?php echo $produit["idproduit"] ; ?>, this, listecategoriesJS, 'idcategorie', 'ListeDeroulante')">
Remplacements à faire pour l'appel :
- <?php echo $produit["idproduit"] ; ?> => par l'id dont vous avez besoin
- listecategorieJS => par le tableau javascript contenant les options de la liste sous la forme tab[i][0] = value ; tab[i][1] = text ;
- 'idcategorie' => par le nom du champ de votre table sql
Pour avoir un tableau javascript, je construis un tableau php comme suit :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <?php
function listeMarques() {
$sql_id = connectAdmin() ; // connexion à la base de données et sélection de la base
$query = "SELECT * FROM marques" ;
$result = mysql_query($query) ;
if ($result) {
$n = mysql_num_rows($result) ;
for ($i = 0 ; $i < $n ; $i++) {
$tmp = mysql_fetch_row($result) ;
for ($j = 0 ; $j < 2 ; $j++)
$tab[$i][$j] = $tmp[$j] ;
}
}
mysql_close($sql_id) ;
return $tab ;
}
?> |
Puis j'utilise le code donné dans la FAQ par torvalds17 et simone.51 pour convertir le tableau php en tableau javascript :
Code:
1
2
3
4
5
6
| <?php
$listemarques = listeMarques() ;
echo "<script type='text/javascript'>" ;
construisTableauJS($listemarques, "listemarquesJS") ;
echo "</script>" ;
?> |
J'espère que ça pourra servir à quelques personnes ! Toute remarque, suggestion, critique etc... est la bienvenue.
pb d'affichage de l'input
bonjour, est ce que c'est possible que l'orsque on clique sur la celule pour modifier son contenu que sa couleur reste la meme et qu'il aura pas de border, cad on voit pas qu'il s'agit d'input.
Merci
Les deux exemples ne fonctionnenet pas chez moi
Bonjour,
en fait, je voudrais juste rentrer en static mes valeurs de variable select
dans la page du formulaire (par exemple Sexe: Masculin, Feminin, Inconnu )
Exemple 1
J ai essayé les deux exmples, mais bien qu ayant crée un tableau
<script type='text/javascript'>
var listecategoriesJS = new Array("Masculin", "Feminin", "Inconnu");
</script>
je n'arrive pas a lancer la bonne ligne d'appel
echo" <td class='cellule' ondblclick='inlineMod(".$user['sexe'].", this, \"listecategoriesJS\", \"idcategorie\",\"ListeDeroulante\")'>".$user['sexe']."</td>";
Cela ne marche pô.... :cry:
Deuxieme exemple
J'ai pas tout compris, ni comment la creation des variables se faisait pour alimenter le select...
Au double click, j'ai bien le select qui apparait, mais est tout vide, et la valeur ancienne n'apparait pas...
Merci de votre aide.
Alain
