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
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 :
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
<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 :
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 :
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.
[SRC] Ajout de classe au tutoriel d'Olivier Lance "modification inline de données"
Répondre avec citation
)
) en espérant que ça inspirera un jour qqun d'autre.
Envoyé par camusdesbois
Partager