JSTree exemple minimal

Version imprimable

Bonjour,

Je n'arrive pas à faire fonctionner cet exemple, pourtant simple, utilisant JSTree :

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
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cachedcommons.org/cache/jquery-cookie/0.0.0/javascripts/jquery-cookie-min.js"></script>
    <script type="text/javascript" src="http://cachedcommons.org/cache/jquery-jstree/1.0.0/javascripts/jquery-jstree-min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
          $("#container").jstree({
              "html_data" : {
                  "data" : "<li id='root'><a href=''>Root node</a>              \
                              <ul>                                              \
                                <li id='child'><a href=''>Child node</a></li>   \
                                <li id='xxxxx'><a href=''>XXXXX node</a></li>   \
                              </ul>                                             \
                            </li>"
              },
              "plugins" : [ "themes", "html_data" ]
          });
       });
    </script>
  </head>
  <body>
    <div id="container">
    </div>
  </body>
</html>

Qu'ai je fait de mal ?

Sachant que si je rajoute :

Code:

"core" : { "initially_open" : [ "root" ] },

dans les options de jstree() cela m'ouvre correctement le premier noeud (la structure semble donc ok). Le problème se situe sur l'ouverture du noeud en cliquant dessus.

Merci d'avance pour vos explications.

Même problème avec ce code directement tiré de la doc :

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
 
<div id="demo1" class="demo">
	<ul>
		<li id="phtml_1">
			<a href="#">D2 Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">D2 Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">D2 Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">D2 Root node 2</a>
		</li>
	</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
	$("#demo1").jstree({ 
		"plugins" : [ "themes", "html_data" ]
	});
});
</script>

25/03/2013, 11h58
Xitog

JSTree fonctionne avec les images qui ornent l'arbre pour ouvrir et fermer les noeuds. S'il n'y a pas de répertoire themes/default/ avec les fichiers images qui vont bien dedans, cela ne marchera pas.

C'est donc résolu.