1
2<!DOCTYPE html>
3<html>
4<head>
5 <meta charset="utf-8">
6 <title>jsTree test</title>
7 <!-- 2 load the theme CSS file -->
8 <link rel="stylesheet" href="dist/themes/default/style.min.css" />
9</head>
10<body>
11 <!-- 3 setup a container element -->
12 <div id="jstree">
13 <!-- in this example the tree is populated from inline HTML -->
14 <ul>
15 <li>Root node 1
16 <ul>
17 <li id="child_node_1">Child node 1</li>
18 <li>Child node 2</li>
19 </ul>
20 </li>
21 <li>Root node 2</li>
22 </ul>
23 </div>
24 <button>demo button</button>
25
26 <!-- 4 include the jQuery library -->
27 <script src="dist/libs/jquery.js"></script>
28 <!-- 5 include the minified jstree source -->
29 <script src="dist/jstree.min.js"></script>
30 <script>
31 $(function () {
32 // 6 create an instance when the DOM is ready
33 $('#jstree').jstree();
34 // 7 bind to events triggered on the tree
35 $('#jstree').on("changed.jstree", function (e, data) {
36 console.log(data.selected);
37 });
38 // 8 interact with the tree - either way is OK
39 $('button').on('click', function () {
40 $('#jstree').jstree(true).select_node('child_node_1');
41 $('#jstree').jstree('select_node', 'child_node_1');
42 $.jstree.reference('#jstree').select_node('child_node_1');
43 });
44 });
45 </script>
46</body>
47</html>
48