Discussion :

[arlemcities]

Bonjour,

J'ai un treeview avec des menus cachés qui marche très bien.

Le problème est que quand j'arrive sur la page tout le menu est déployé alors que je souhaiterais ne voir que le 1er niveau par défault.
Une idée?

Merci,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function afficher_menu($parent, $niveau, $array) {
    $i=0;
    $html = "";
    $niveau_precedent = 0;
 
    if ($niveau%2 == 0) 
        $fa = "fa fa-caret-right";
    else
        $fa = "fa fa-long-arrow-right";
 
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
    if (!$niveau && !$niveau_precedent) $html .= "\n<ul>\n";
    foreach ($array as $noeud) {
        $idMenu = $noeud['id'];
        if ($parent == $noeud['idParent']) {
            if ($niveau_precedent < $niveau) $html .= "\n<ul style=\"display:block;\">\n";
            $html .= "<li>\n"
            . "<a onclick=\"javascript: showMenu(document.getElementById('menu$i'));\" style=\"cursor:pointer;\"><span class=\"$fa\"></span>" 
            . " " . $noeud['libelle'] 
            . " " . $noeud['id'] 
            . "-" . $noeud['idParent'] . "</a>";
             $niveau_precedent = $niveau;
            $html .= "<span id=\"menu$i\">" . afficher_menu($noeud['id'], ($niveau + 1), $array) . "</span>";
        }
        $i++;
    }
 
    if (($niveau_precedent == $niveau) && ($niveau_precedent != 0)) $html .= "</ul>\n</li>\n";
    else if ($niveau_precedent == $niveau) $html .= "</ul>\n";
    else $html .= "</li>\n";
 
    return $html;
}
?>
 
<script type="text/javascript">
    function showMenu(menu) {
        if (menu.style.display == 'none') menu.style.display = 'block';
        else menu.style.display = 'none';
    }
</script>

[Watilin]

S'il n'y a rien d'autre dans ta page que le code que tu as donné, c'est normal car il n'y rien qui agit au chargement de la page pour replier le menu.

Je m'étonne que PHP ne te dise rien à propos de la variable $niveau_precedent. As-tu activé l'affichage de tous les messages d'erreur ? Si non, ajoute error_reporting(-1); au début de ton script PHP.

D'autre part, peux-tu nous montrer un exemple de code HTML généré par ce script en faisant Ctrl+U dans ton navigateur ?

Astuce : tu n'es pas obligé de formater ton code HTML avec des "\n" partout qui, à mon avis, rendent le code PHP plus difficile à lire. Utilise l'inspecteur de ton navigateur, dans le menu outils de développement.

[arlemcities]

Merci de m'avoir répondu,

J'ai activé tous les messages d'erreur et PHP ne m'indique rien sur $niveau_precedent.
Je n'ai pas mis de code pour cacher certaines erreurs ... Bizarre!
Qu'est que je devrais avoir comme erreur?

Je ne peux pas te montrer le code HTML généré car c'est une appli pour mon travail et je n'ai pas pensé à prendre le code source en rentrant ...

Pour l'instant mon treeview fonctionne très bien, quand je clique sur un menu alors le sous-menu se replie ou se déplie, ...
Le problème c'est que quand tu arrives sur la page, toute l'arborescence est dépliée (9niveaux).
Et je souhaiterais voir seulement le premier niveau en arrivant sur la page ...

J'ai essayé de mettre un onload() mais ça ne marche pas ...
Et j'avoue que Javascript ce n'est pas ma tasse de thé!

As-tu une idée pour replier le menu au chargement de la page?

Merci,

[Watilin]

Non en fait c'est normal qu'il ne dise rien, c'est moi qui déconne Je croyais que c'était une globale.

Pour ton problème je dirais qu'il suffit de mettre le style display: none à toutes les <ul> de second niveau. Grossièrement en JavaScript moderne (garanti non compatible IE6 ), on s'en sort avec un querySelectorAll et un petit forEach et ça donne quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
Array.prototype.forEach.call(
  document.querySelectorAll("ul ul"),
  function ($ul) {
    $ul.style.display = "none";
  }
);

Le tout dans une fonction onload, bien sûr. (Ou mieux, sur l'évènement DOMContentLoaded.)

C'est brutal, ça court-circuite les conventions de ta couche métier (s'il y en a), mais tu vois l'idée

[arlemcities]

Oui j'ai des couches métier ... mais quand tu dis ça court-circuite les conventions des couches métier, quel est l'impact sur mon application? (temps de chargement, faille de sécurité, ...)

Pour le code Javascript, faut-il importer la librairie Prototype?
Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en paramètre querySelectorAll("ul ul ul")?

[Watilin]

Oui j'ai des couches métier ... mais quand tu dis ça court-circuite les conventions des couches métier, quel est l'impact sur mon application? (temps de chargement, faille de sécurité, ...)

Ça rend juste le code incohérent et plus difficile à maintenir. Pour donner un exemple concret, si tu as donné une classe CSS aux menus repliés, il vaut mieux leur ajouter cette classe plutôt que leur mettre directement un display: none, pour rester dans les conventions qui ont été décidées. De la même manière; si une fonction JavaScript est prévue pour replier les menus (comme ta fonction showMenu – qui devrait peut-être plutôt s'appeler toggleMenu), il vaut mieux appeler cette fonction plutôt que réécrire du code équivalent. Tout ça dans un souci de factoriser le code, c'est-à-dire ne pas coder plusieurs fois la même chose. C'est le principe DRY.

Bien entendu s'il y a de la redondance dans ton code, ça augmente la probabilité d'écrire des bugs, et donc ça peut impacter tout un tas de trucs dont le temps de chargement, la sécurité, etc. En fait, ce que je voulais dire par « ça court-circuite les conventions de ta couche métier », c'est qu'il faudra sans doute que tu adaptes le code que je t'ai donné pour qu'il s'intègre proprement dans le projet.

Pour le code Javascript, faut-il importer la librairie Prototype?

Non. JavaScript est un langage à prototypes, ça veut dire que ses objets sont basés sur un prototype et non pas sur une classe. Le framework Prototype a juste repris le nom, mais utiliser un prototype en JS ne signifie pas qu'on a besoin de la bibliothèque Prototype.

Note, quand j'interviens sur un forum JS, je m'efforce de toujours donner du code vanilla, c'est-à-dire sans recourir à un framework (sauf mention contraire). En revanche, j'aime utiliser des fonctionnalités récentes de JavaScript, qui sont normalement présentes dans les versions actuelles de tous les navigateurs ou presque.

Dans le code que j'ai donné, j'utilise le prototype de Array car je veux utiliser la méthode forEach, et la collection renvoyée par querySelectorAll n'a pas de méthode forEach. Le vrai « truc » dans mon code ce n'est pas le prototype mais la méthode call.

Pour commencer il faut comprendre le fonctionnement de forEach. Je t'ai donné un lien vers le MDN dans mon message précédent. En gros c'est une sorte de boucle for « version fonction ». J'aurais pu utiliser effectivement une boucle for, mais ça aurait été moins drôle

Le problème est que :
1^o forEach est une méthode de tableau (objets construits par Array)
2^o querySelectorAll renvoie des collections qui ressemblent à des tableaux, mais ne sont pas des tableaux. (techniquement, leur constructeur n'est pas Array mais NodeList).

Je me rends compte que je suis en train de redire ce que j'ai écrit sur mon blog, donc sans vouloir faire de l'auto-promotion, je t'invite à lire mon article

Et par exemple si je ne veux afficher que les 2 premiers niveaux au chargement de la page, est-ce correct de mettre en paramètre querySelectorAll("ul ul ul")?

Ouaip ! Encore une fois, les outils de développement de ton navigateur peuvent t'aider à écrire le bon sélécteur. Dans la console, tape querySelectorAll("ul ul ul"), valide avec Entrée, et tu auras une collection des éléments correspondants, qui normalement se mettent en surbrillance quand tu survoles la collection.