Discussion :

[Christophe Charron]

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 :

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
<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 :

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

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.

[danielhagnoul]

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 :

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

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

[Christophe Charron]

Bonsoir,

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

Code :

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

$(document).ready

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

[danielhagnoul]

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

Où dois-je poser mon $ ?

[Christophe Charron]

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

[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.

Code :

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

1
2
3
4
5
6
7
8
9
$( function(){
 
});
 
$( window ).load( function(){
 
	$('#TV_general').jstree('open_all', -1);
 
});

[NoSmoking]

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

Code :

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

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"].

[Christophe Charron]

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 ?

[Christophe Charron]

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.

[NoSmoking]

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

[Christophe Charron]

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