5
|
1 <!DOCTYPE html>
|
|
2 <html lang="en">
|
|
3 <head>
|
|
4 <meta charset="UTF-8">
|
|
5 <title>jstree basic demos</title>
|
|
6 <style>
|
|
7 html { margin:0; padding:0; font-size:62.5%; }
|
|
8 body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
|
|
9 h1 { font-size:1.8em; }
|
|
10 .demo { overflow:auto; border:1px solid silver; min-height:100px; }
|
|
11 </style>
|
|
12 <link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
|
|
13 </head>
|
|
14 <body>
|
|
15 <h1>HTML demo</h1>
|
|
16 <div id="html" class="demo">
|
|
17 <ul>
|
|
18 <li data-jstree='{ "opened" : true }'>Root node
|
|
19 <ul>
|
|
20 <li data-jstree='{ "selected" : true }'>Child node 1</li>
|
|
21 <li>Child node 2</li>
|
|
22 </ul>
|
|
23 </li>
|
|
24 </ul>
|
|
25 </div>
|
|
26
|
|
27 <h1>Inline data demo</h1>
|
|
28 <div id="data" class="demo"></div>
|
|
29
|
|
30 <h1>Data format demo</h1>
|
|
31 <div id="frmt" class="demo"></div>
|
|
32
|
|
33 <h1>AJAX demo</h1>
|
|
34 <div id="ajax" class="demo"></div>
|
|
35
|
|
36 <h1>Lazy loading demo</h1>
|
|
37 <div id="lazy" class="demo"></div>
|
|
38
|
|
39 <h1>Callback function data demo</h1>
|
|
40 <div id="clbk" class="demo"></div>
|
|
41
|
|
42 <h1>Interaction and events demo</h1>
|
|
43 <button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
|
|
44 <div id="evts" class="demo"></div>
|
|
45
|
|
46 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
47 <script src="./../../dist/jstree.min.js"></script>
|
|
48
|
|
49 <script>
|
|
50 // html demo
|
|
51 $('#html').jstree();
|
|
52
|
|
53 // inline data demo
|
|
54 $('#data').jstree({
|
|
55 'core' : {
|
|
56 'data' : [
|
|
57 { "text" : "Root node", "children" : [
|
|
58 { "text" : "Child node 1" },
|
|
59 { "text" : "Child node 2" }
|
|
60 ]}
|
|
61 ]
|
|
62 }
|
|
63 });
|
|
64
|
|
65 // data format demo
|
|
66 $('#frmt').jstree({
|
|
67 'core' : {
|
|
68 'data' : [
|
|
69 {
|
|
70 "text" : "Root node",
|
|
71 "state" : { "opened" : true },
|
|
72 "children" : [
|
|
73 {
|
|
74 "text" : "Child node 1",
|
|
75 "state" : { "selected" : true },
|
|
76 "icon" : "jstree-file"
|
|
77 },
|
|
78 { "text" : "Child node 2", "state" : { "disabled" : true } }
|
|
79 ]
|
|
80 }
|
|
81 ]
|
|
82 }
|
|
83 });
|
|
84
|
|
85 // ajax demo
|
|
86 $('#ajax').jstree({
|
|
87 'core' : {
|
|
88 'data' : {
|
|
89 "url" : "./root.json",
|
|
90 "dataType" : "json" // needed only if you do not supply JSON headers
|
|
91 }
|
|
92 }
|
|
93 });
|
|
94
|
|
95 // lazy demo
|
|
96 $('#lazy').jstree({
|
|
97 'core' : {
|
|
98 'data' : {
|
|
99 "url" : "//www.jstree.com/fiddle/?lazy",
|
|
100 "data" : function (node) {
|
|
101 return { "id" : node.id };
|
|
102 }
|
|
103 }
|
|
104 }
|
|
105 });
|
|
106
|
|
107 // data from callback
|
|
108 $('#clbk').jstree({
|
|
109 'core' : {
|
|
110 'data' : function (node, cb) {
|
|
111 if(node.id === "#") {
|
|
112 cb([{"text" : "Root", "id" : "1", "children" : true}]);
|
|
113 }
|
|
114 else {
|
|
115 cb(["Child"]);
|
|
116 }
|
|
117 }
|
|
118 }
|
|
119 });
|
|
120
|
|
121 // interaction and events
|
|
122 $('#evts_button').on("click", function () {
|
|
123 var instance = $('#evts').jstree(true);
|
|
124 instance.deselect_all();
|
|
125 instance.select_node('1');
|
|
126 });
|
|
127 $('#evts')
|
|
128 .on("changed.jstree", function (e, data) {
|
|
129 if(data.selected.length) {
|
|
130 alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
|
|
131 }
|
|
132 })
|
|
133 .jstree({
|
|
134 'core' : {
|
|
135 'multiple' : false,
|
|
136 'data' : [
|
|
137 { "text" : "Root node", "children" : [
|
|
138 { "text" : "Child node 1", "id" : 1 },
|
|
139 { "text" : "Child node 2" }
|
|
140 ]}
|
|
141 ]
|
|
142 }
|
|
143 });
|
|
144 </script>
|
|
145 </body>
|
|
146 </html> |