Déployer l'arbre jstree

Bonjour,

Je débute sur jquery et j'essaye de voir comment utiliser "jstree".
En fait je voudrais déployer mon arbre immédiatement lorsque que le document est chargé :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<script type="text/javascript"> $(document).ready( function(){ $("#TV_general").jstree();   $("#TV_general").jstree({ "themes" : { "theme" : "xsoftware_apple", "dots" : false, "icons" : true }, "plugins" : [ "themes", "html_data","ui" ] });     $('#TV_general').jstree('open_all', -1); } );   </script>

---

Mon arbre se cree bien mais reste fermé.
Si je rajoute un bouton
<input type="button" value="open_all"

Code:

---

onclick="$('#TV_general').jstree('open_all', -1);" />

---

pas de problème en cliquant dessus.

L'exemple est visible ici : http://test03.christophe-charron.org...e_1_0-rc3.html

D'avance, merci pour votre aide et explications.

Bonsoir

Il suffit d'exécuter cette instruction lorsque la page est chargée, autrement dit lorsque le DOM est prêt à recevoir des instructions :

Code:

---

1 2 3 4 5

$( function(){   $('#TV_general').jstree('open_all', -1);   });

---

Bonsoir,

et bien c'est en effet ce que je pensais faire.

Code:

---

$(document).ready

---

détermine bien la disponibilité du DOM, non ?

Oui, $(function(){ ... }); est la forme abrégée.

:faq: Où dois-je poser mon $ ?

D'accord.
Si vous regardez mon code initial, c'est pourtant dans cette fonction que je l'ai posée !!!

Oops, pas vu ! Je me suis focalisé sur le test du bouton.

Si l'instruction ne s'exécute pas lorsque le DOM est prêt et qu'il s'exécute lorsqu'un utilisateur clique sur un bouton alors il faut demander l'exécution de notre instruction lorsque la totalité de la page est chargée.

Code:

---

1 2 3 4 5 6 7 8 9

$( function(){   });   $( window ).load( function(){   $('#TV_general').jstree('open_all', -1);   });

---

Bonsoir à tous,
d'après la documentation tu peux "binder" la fonction pour l'ouverture

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(function(){ $("#TV_general").jstree({ "themes": { "theme": "xsoftware_apple", "dots": false, "icons": true }, "plugins": ["themes", "html_data", "ui"] }) .bind('loaded.jstree', function(){ $(this).jstree('open_all', -1); }); });

---

tu peux également sélectionner les menus à ouvrir en ajoutant "core" : { "initially_open" : [ "tv_00000","tv_00001"]} par exemple sous la ligne "plugins": ["themes", "html_data", "ui"].

Citation:

---

Envoyé par danielhagnoul

Oops, pas vu ! Je me suis focalisé sur le test du bouton.

Si l'instruction ne s'exécute pas lorsque le DOM est prêt et qu'il s'exécute lorsqu'un utilisateur clique sur un bouton alors il faut demander l'exécution de notre instruction lorsque la totalité de la page est chargée.

---

D'acc, d'acc.
Mais quelle est la différence entre ces 2 états ?
Et finalement, ne serait-il alors pas plus prudent, d'une manière générale, de tout exécuter sur le onload ?

Citation:

---

Envoyé par NoSmoking

Bonsoir à tous,
d'après la documentation tu peux "binder" la fonction pour l'ouverture
...
tu peux également sélectionner les menus à ouvrir en ajoutant "core" : { "initially_open" : [ "tv_00000","tv_00001"]} par exemple sous la ligne "plugins": ["themes", "html_data", "ui"].

---

Ok, ok.

Je vais essayer de binder (faudra quand même que je comprenne le principe et que je vois sur d'autres cas ce que cela implique.

Je retiens le "core" mais cela risque d'être un peu fastidieux car en fait mon exemple est colossalement réduit par rapport au vrai treeview et de plus pourrait bien être peuplé dynamiquement de branches qu'il sera impossible d'identifier à l'avance.

:oops: j'ai oublié de mettre le lien :fleche: http://www.jstree.com/demo

Le binding a résolu le problème. Merci.

Voir ici
http://test03.christophe-charron.org...e_1_0-rc3.html
et ici
http://test03.christophe-charron.org...e_1_0-rc3.html