|
5
|
1 # jstree
|
|
|
2
|
|
|
3 [jsTree](http://www.jstree.com/) is jquery plugin, that provides interactive trees. It is absolutely free, [open source](https://github.com/vakata/jstree) and distributed under the MIT license.
|
|
|
4
|
|
|
5 jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.
|
|
|
6
|
|
|
7 jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
|
|
|
8
|
|
|
9 You also get:
|
|
|
10 * drag & drop support
|
|
|
11 * keyboard navigation
|
|
|
12 * inline edit, create and delete
|
|
|
13 * tri-state checkboxes
|
|
|
14 * fuzzy searching
|
|
|
15 * customizable node types
|
|
|
16
|
|
|
17 _Aside from this readme you can find a lot more info on [jstree.com](http://www.jstree.com) & [the discussion group](https://groups.google.com/forum/#!forum/jstree)_.
|
|
|
18
|
|
|
19 ---
|
|
|
20
|
|
|
21 <!-- MarkdownTOC depth=0 autolink=true bracket=round -->
|
|
|
22
|
|
|
23 - [Getting Started](#getting-started)
|
|
|
24 - [Include all neccessary files](#include-all-neccessary-files)
|
|
|
25 - [Populating a tree using HTML](#populating-a-tree-using-html)
|
|
|
26 - [Populating a tree using an array \(or JSON\)](#populating-a-tree-using-an-array-or-json)
|
|
|
27 - [The required JSON format](#the-required-json-format)
|
|
|
28 - [Populating the tree using AJAX](#populating-the-tree-using-ajax)
|
|
|
29 - [Populating the tree using AJAX and lazy loading nodes](#populating-the-tree-using-ajax-and-lazy-loading-nodes)
|
|
|
30 - [Populating the tree using a callback function](#populating-the-tree-using-a-callback-function)
|
|
|
31 - [Working with events](#working-with-events)
|
|
|
32 - [Interacting with the tree using the API](#interacting-with-the-tree-using-the-api)
|
|
|
33 - [More on configuration](#more-on-configuration)
|
|
|
34 - [Plugins](#plugins)
|
|
|
35 - [checkbox](#checkbox)
|
|
|
36 - [contextmenu](#contextmenu)
|
|
|
37 - [dnd](#dnd)
|
|
|
38 - [massload](#massload)
|
|
|
39 - [search](#search)
|
|
|
40 - [sort](#sort)
|
|
|
41 - [state](#state)
|
|
|
42 - [types](#types)
|
|
|
43 - [unique](#unique)
|
|
|
44 - [wholerow](#wholerow)
|
|
|
45 - [More plugins](#more-plugins)
|
|
|
46 - [PHP demos moved to new repository](#php-demos-moved-to-new-repository)
|
|
|
47 - [License & Contributing](#license--contributing)
|
|
|
48
|
|
|
49 <!-- /MarkdownTOC -->
|
|
|
50
|
|
|
51
|
|
|
52 ---
|
|
|
53
|
|
|
54 ## Getting Started
|
|
|
55
|
|
|
56 ### Include all neccessary files
|
|
|
57 To get started you need 3 things in your page:
|
|
|
58 1. jQuery (anything above 1.9.1 will work)
|
|
|
59 2. A jstree theme (there is only one theme supplied by default)
|
|
|
60 3. The jstree source file
|
|
|
61
|
|
|
62 ```html
|
|
|
63 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
|
64
|
|
|
65 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
|
|
|
66 <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
|
|
|
67 ```
|
|
|
68
|
|
|
69 _If you decide to host jstree yourself - the files are located in the `dist` folder. You can safely ignore the `dist/libs` folder._
|
|
|
70
|
|
|
71 ---
|
|
|
72
|
|
|
73 ### Populating a tree using HTML
|
|
|
74
|
|
|
75 Now we are all set to create a tree, inline HTML is the easiest option (suitable for menus). All you need to do is select a node (using a jQuery selector) and invoke the `.jstree()` function to let jstree know you want to render a tree inside the selected node. `$.jstree.create(element)` can be used too.
|
|
|
76
|
|
|
77 ```html
|
|
|
78 <div id="container">
|
|
|
79 <ul>
|
|
|
80 <li>Root node
|
|
|
81 <ul>
|
|
|
82 <li>Child node 1</li>
|
|
|
83 <li>Child node 2</li>
|
|
|
84 </ul>
|
|
|
85 </li>
|
|
|
86 </ul>
|
|
|
87 </div>
|
|
|
88 <script>
|
|
|
89 $(function() {
|
|
|
90 $('#container').jstree();
|
|
|
91 });
|
|
|
92 </script>
|
|
|
93 ```
|
|
|
94
|
|
|
95 [view result](http://jsfiddle.net/vakata/2kwkh2uL/)
|
|
|
96
|
|
|
97 _You can add a few options when rendering a node using a data-attribute (note the quotes):_
|
|
|
98 ```html
|
|
|
99 <li data-jstree='{ "selected" : true, "opened" : true }'>Root node ...
|
|
|
100 ```
|
|
|
101
|
|
|
102 ---
|
|
|
103
|
|
|
104 ### Populating a tree using an array (or JSON)
|
|
|
105
|
|
|
106 Building trees from HTML is easy, but it is not very flexible, inline JS data is a better option:
|
|
|
107
|
|
|
108 ```html
|
|
|
109 <div id="container"></div>
|
|
|
110 <script>
|
|
|
111 $(function() {
|
|
|
112 $('#container').jstree({
|
|
|
113 'core' : {
|
|
|
114 'data' : [
|
|
|
115 { "text" : "Root node", "children" : [
|
|
|
116 { "text" : "Child node 1" },
|
|
|
117 { "text" : "Child node 2" }
|
|
|
118 ]
|
|
|
119 }
|
|
|
120 ]
|
|
|
121 }
|
|
|
122 });
|
|
|
123 });
|
|
|
124 </script>
|
|
|
125 ```
|
|
|
126
|
|
|
127 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4478/)
|
|
|
128
|
|
|
129 Unlike the previous simple HTML example, this time the `.jstree()` function accepts a config object.
|
|
|
130
|
|
|
131 For now it is important to note that jstree will try to parse any data you specify in the `core.data` key and use it to create a tree. As seen in the previous example, if this key is missing jstree will try to parse the inline HTML of the container.
|
|
|
132
|
|
|
133 #### The required JSON format
|
|
|
134
|
|
|
135 The data you use must be in a specific format, each branch of the tree is represented by an object, which must at least have a `text` key. The `children` key can be used to add children to the branch, it should be an array of objects.
|
|
|
136
|
|
|
137 _Keep in mind, you can use a simple string instead of an object if all you need is node with the given text, the above data can be written as:_
|
|
|
138
|
|
|
139 ```js
|
|
|
140 [ { "text" : "Root node", "children" : [ "Child node 1", "Child node 2" ] } ]
|
|
|
141 ```
|
|
|
142
|
|
|
143 There are other available options for each node, only set them if you need them like:
|
|
|
144
|
|
|
145 * `id` - makes if possible to identify a node later (will also be used as a DOM ID of the `LI` node). _Make sure you do not repeat the same ID in a tree instance (that would defeat its purpose of being a unique identifier and may cause problems for jstree)_.
|
|
|
146 * `icon` - a string which will be used for the node's icon - this can either be a path to a file, or a className (or list of classNames), which you can style in your CSS (font icons also work).
|
|
|
147 * `data` - this can be anything you want - it is metadata you want attached to the node - you will be able to access and modify it any time later - it has no effect on the visuals of the node.
|
|
|
148 * `state` - an object specifyng a few options about the node:
|
|
|
149 - `selected` - if the node should be initially selected
|
|
|
150 - `opened` - if the node should be initially opened
|
|
|
151 - `disabled` - if the node should be disabled
|
|
|
152 - `checked` - __checkbox plugin specific__ - if the node should be checked (only used when `tie_selection` is `false`, which you should only do if you really know what you are doing)
|
|
|
153 - `undetermined` - __checkbox plugin specific__ - if the node should be rendered in undetermined state (only used with lazy loading and when the node is not yet loaded, otherwise this state is automatically calculated).
|
|
|
154 * `type` - __types plugin specific__ - the type of the nodes (should be defined in the types config), if not set `"default"` is assumed.
|
|
|
155 * `li_attr` - object of values which will be used to add HTML attributes on the resulting `LI` DOM node.
|
|
|
156 * `a_attr` - object of values which will be used to add HTML attributes on the resulting `A` node.
|
|
|
157
|
|
|
158 Here is a new demo with some of those properties set:
|
|
|
159
|
|
|
160 ```html
|
|
|
161 <div id="container"></div>
|
|
|
162 <script>
|
|
|
163 $(function() {
|
|
|
164 $('#container').jstree({
|
|
|
165 'core' : {
|
|
|
166 'data' : [
|
|
|
167 {
|
|
|
168 "text" : "Root node",
|
|
|
169 "state" : {"opened" : true },
|
|
|
170 "children" : [
|
|
|
171 {
|
|
|
172 "text" : "Child node 1",
|
|
|
173 "state" : { "selected" : true },
|
|
|
174 "icon" : "glyphicon glyphicon-flash"
|
|
|
175 },
|
|
|
176 { "text" : "Child node 2", "state" : { "disabled" : true } }
|
|
|
177 ]
|
|
|
178 }
|
|
|
179 ]
|
|
|
180 }
|
|
|
181 });
|
|
|
182 });
|
|
|
183 </script>
|
|
|
184 ```
|
|
|
185
|
|
|
186 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4479/)
|
|
|
187
|
|
|
188 ---
|
|
|
189
|
|
|
190 ### Populating the tree using AJAX
|
|
|
191
|
|
|
192 Building off of the previous example, let's see how to have jstree make AJAX requests for you.
|
|
|
193
|
|
|
194 ```html
|
|
|
195 <div id="container"></div>
|
|
|
196 <script>
|
|
|
197 $(function() {
|
|
|
198 $('#container').jstree({
|
|
|
199 'core' : {
|
|
|
200 'data' : {
|
|
|
201 "url" : "//www.jstree.com/fiddle/",
|
|
|
202 "dataType" : "json" // needed only if you do not supply JSON headers
|
|
|
203 }
|
|
|
204 }
|
|
|
205 });
|
|
|
206 });
|
|
|
207 </script>
|
|
|
208 ```
|
|
|
209
|
|
|
210 The server response is:
|
|
|
211 ```json
|
|
|
212 [{
|
|
|
213 "id":1,"text":"Root node","children":[
|
|
|
214 {"id":2,"text":"Child node 1"},
|
|
|
215 {"id":3,"text":"Child node 2"}
|
|
|
216 ]
|
|
|
217 }]
|
|
|
218 ```
|
|
|
219
|
|
|
220 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4480/)
|
|
|
221
|
|
|
222 Instead of a JS array, you can set `core.data` to a [jQuery AJAX config](http://api.jquery.com/jQuery.ajax/).
|
|
|
223 jsTree will hit that URL, and provided you return properly formatted JSON it will be displayed.
|
|
|
224
|
|
|
225 _If you cannot provide proper JSON headers, set `core.data.dataType` to `"json"`._
|
|
|
226
|
|
|
227 The ids in the server response make it possible to identify nodes later (which we will see in the next few demos), but they are not required.
|
|
|
228
|
|
|
229 __WHEN USING IDS MAKE SURE THEY ARE UNIQUE INSIDE A PARTICULAR TREE__
|
|
|
230
|
|
|
231 ---
|
|
|
232
|
|
|
233 ### Populating the tree using AJAX and lazy loading nodes
|
|
|
234
|
|
|
235 Lazy loading means nodes will be loaded when they are needed. Imagine you have a huge amount of nodes you want to show, but loading them with a single request is way too much traffic. Lazy loading makes it possible to load nodes on the fly - jstree will perform AJAX requests as the user browses the tree.
|
|
|
236
|
|
|
237 Here we take our previous example, and lazy load the "Child node 1" node.
|
|
|
238
|
|
|
239 ```html
|
|
|
240 <div id="container"></div>
|
|
|
241 <script>
|
|
|
242 $(function() {
|
|
|
243 $('#container').jstree({
|
|
|
244 'core' : {
|
|
|
245 'data' : {
|
|
|
246 "url" : "//www.jstree.com/fiddle/?lazy",
|
|
|
247 "data" : function (node) {
|
|
|
248 return { "id" : node.id };
|
|
|
249 }
|
|
|
250 }
|
|
|
251 }
|
|
|
252 });
|
|
|
253 });
|
|
|
254 </script>
|
|
|
255 ```
|
|
|
256
|
|
|
257 The initial server response is:
|
|
|
258 ```json
|
|
|
259 [{
|
|
|
260 "id":1,"text":"Root node","children":[
|
|
|
261 {"id":2,"text":"Child node 1","children":true},
|
|
|
262 {"id":3,"text":"Child node 2"}
|
|
|
263 ]
|
|
|
264 }]
|
|
|
265 ```
|
|
|
266
|
|
|
267 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4481/)
|
|
|
268
|
|
|
269 Now to focus on what is different. First off the `"data"` config option of the data object. If you check with jQuery, it is supposed to be a string or an object. But jstree makes it possible to set a function.
|
|
|
270
|
|
|
271 Each time jstree needs to make an AJAX call this function will be called and will receive a single parameter - the node that is being loaded. The return value of this function will be used as the actual `"data"` of the AJAX call. To understand better open up the demo and see the requests go off in the console.
|
|
|
272
|
|
|
273 You will notice that the first request goes off to:
|
|
|
274 `http://www.jstree.com/fiddle?lazy&id=#`
|
|
|
275 `#` is the special ID that the function receives when jstree needs to load the root nodes.
|
|
|
276
|
|
|
277 Now go ahead and open the root node - two children will be shown, but no request will be made - that is because we loaded those children along with the first request.
|
|
|
278
|
|
|
279 Onto the next difference - "Child node 1" appears closed - that is because in the data we supplied `true` as the `"children"` property of this node (you can see it in the server response). This special value indicated to jstree, that it has to lazy load the "Child node 1" node.
|
|
|
280
|
|
|
281 Proceed and open this node - you will see a next request fire off to:
|
|
|
282 `http://www.jstree.com/fiddle?lazy&id=2`
|
|
|
283 ID is set to `2` because the node being loaded has an ID of `2`, and we have configured jstree to send the node ID along with the AJAX request (the `data` function).
|
|
|
284
|
|
|
285 The server response is:
|
|
|
286 ```json
|
|
|
287 ["Child node 3","Child node 4"]
|
|
|
288 ```
|
|
|
289
|
|
|
290 _You can also set `"url"` to a function and it works exactly as with `"data"` - each time a request has to be made, jstree will invoke your function and the request will go off to whatever you return in this function. This is useful when dealing with URLs like: `http://example.com/get_children/1`._
|
|
|
291
|
|
|
292 ### Populating the tree using a callback function
|
|
|
293
|
|
|
294 Sometimes you may not want jsTree to make AJAX calls for you - you might want to make them yourself, or use some other method of populating the tree. In that case you can use a callback function.
|
|
|
295
|
|
|
296 ```html
|
|
|
297 <div id="container"></div>
|
|
|
298 <script>
|
|
|
299 $(function() {
|
|
|
300 $('#container').jstree({
|
|
|
301 'core' : {
|
|
|
302 'data' : function (node, cb) {
|
|
|
303 if(node.id === "#") {
|
|
|
304 cb([{"text" : "Root", "id" : "1", "children" : true}]);
|
|
|
305 }
|
|
|
306 else {
|
|
|
307 cb(["Child"]);
|
|
|
308 }
|
|
|
309 }
|
|
|
310 }
|
|
|
311 });
|
|
|
312 });
|
|
|
313 </script>
|
|
|
314 ```
|
|
|
315
|
|
|
316 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4482/)
|
|
|
317
|
|
|
318 As you can see your function will receive two arguments - the node whose children need to be loaded and a callback function to call with the data once you have it. The data follows the same familiar JSON format and lazy loading works just as with AJAX (as you can see in the above example).
|
|
|
319
|
|
|
320 ---
|
|
|
321
|
|
|
322 ## Working with events
|
|
|
323
|
|
|
324 jstree provides a lot of events to let you know something happened with the tree. The events are the same regardless of how you populate the tree.
|
|
|
325 Let's use the most basic event `changed` - it fires when selection on the tree changes:
|
|
|
326
|
|
|
327 ```html
|
|
|
328 <div id="container"></div>
|
|
|
329 <script>
|
|
|
330 $(function() {
|
|
|
331 $('#container').jstree({
|
|
|
332 'core' : {
|
|
|
333 'data' : [
|
|
|
334 {"id" : 1, "text" : "Node 1"},
|
|
|
335 {"id" : 2, "text" : "Node 2"},
|
|
|
336 ]
|
|
|
337 }
|
|
|
338 });
|
|
|
339 $('#container').on("changed.jstree", function (e, data) {
|
|
|
340 console.log("The selected nodes are:");
|
|
|
341 console.log(data.selected);
|
|
|
342 });
|
|
|
343 });
|
|
|
344 </script>
|
|
|
345 ```
|
|
|
346
|
|
|
347 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4483/)
|
|
|
348
|
|
|
349 All jstree events fire in a special `".jstree"` namespace - this is why we listen for `"changed.jstree"`. The handler itself receives one additional parameter - it will be populated with all you need to know about the event that happened. In this case `data.selected` is an array of selected node IDs (please note, that if you have not specified IDs they will be autogenerated).
|
|
|
350
|
|
|
351 Let's extend this a bit and log out the text of the node instead of the ID.
|
|
|
352
|
|
|
353 ```js
|
|
|
354 $('#container').on("changed.jstree", function (e, data) {
|
|
|
355 console.log(data.instance.get_selected(true)[0].text);
|
|
|
356 console.log(data.instance.get_node(data.selected[0]).text);
|
|
|
357 });
|
|
|
358 ```
|
|
|
359
|
|
|
360 The two rows above achieve exactly the same thing - get the text of the first selected node.
|
|
|
361
|
|
|
362 In the `data` argument object you will always get an `instance` key - that is a reference to the tree instance, so that you can easily invoke methods.
|
|
|
363
|
|
|
364 __All available functions and events are documented in the API docs__
|
|
|
365
|
|
|
366 ---
|
|
|
367
|
|
|
368 ## Interacting with the tree using the API
|
|
|
369
|
|
|
370 We scratched the surface on interacting with the tree in the previous example. Let's move on to obtaining an instance and calling a method on this instance:
|
|
|
371
|
|
|
372 ```html
|
|
|
373 <button>Select node 1</button>
|
|
|
374 <div id="container"></div>
|
|
|
375 <script>
|
|
|
376 $(function() {
|
|
|
377 $('#container').jstree({
|
|
|
378 'core' : {
|
|
|
379 'data' : [
|
|
|
380 {"id" : 1, "text" : "Node 1"},
|
|
|
381 {"id" : 2, "text" : "Node 2"},
|
|
|
382 ]
|
|
|
383 }
|
|
|
384 });
|
|
|
385 $('button').on("click", function () {
|
|
|
386 var instance = $('#container').jstree(true);
|
|
|
387 instance.deselect_all();
|
|
|
388 instance.select_node('1');
|
|
|
389 });
|
|
|
390 });
|
|
|
391 </script>
|
|
|
392 ```
|
|
|
393
|
|
|
394 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4484/)
|
|
|
395
|
|
|
396 The above example shows how to obtain a reference to a jstree instance (again with a selector, but this time instead of a config, we pass a boolean `true`), and call a couple of methods - the latter one is selecting a node by its ID.
|
|
|
397
|
|
|
398 Methods can also be invoked like this:
|
|
|
399
|
|
|
400 ```js
|
|
|
401 $('#container').jstree("select_node", "1");
|
|
|
402 ```
|
|
|
403
|
|
|
404 __All available functions and events are documented in the API docs__
|
|
|
405
|
|
|
406 ## More on configuration
|
|
|
407
|
|
|
408 We already covered the config object in general (when we specified inline & AJAX data sources).
|
|
|
409
|
|
|
410 ```js
|
|
|
411 $("#tree").jstree({ /* config object goes here */ });
|
|
|
412 ```
|
|
|
413
|
|
|
414 Each key in the config object corresponds to a plugin, and the value of that key is the configuration for that plugin. There are also two special keys `"core"` and `"plugins"`:
|
|
|
415 * `"core"` stores the core configuration options
|
|
|
416 * `"plugins"` is an array of plugin names (strings) you want active on the instance
|
|
|
417
|
|
|
418 When configuring you only need to set values that you want to be different from the defaults.
|
|
|
419
|
|
|
420 __All config options and defaults are documented in the API docs__
|
|
|
421
|
|
|
422 ```js
|
|
|
423 $("#tree").jstree({
|
|
|
424 "core" : { // core options go here
|
|
|
425 "multiple" : false, // no multiselection
|
|
|
426 "themes" : {
|
|
|
427 "dots" : false // no connecting dots between dots
|
|
|
428 }
|
|
|
429 },
|
|
|
430 "plugins" : ["state"] // activate the state plugin on this instance
|
|
|
431 });
|
|
|
432 ```
|
|
|
433
|
|
|
434 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4485/)
|
|
|
435
|
|
|
436 We will cover all plugins further down.
|
|
|
437
|
|
|
438 __Keep in mind by default all modifications to the structure are prevented - that means drag'n'drop, create, rename, delete will not work unless you enable them.__
|
|
|
439
|
|
|
440 ```js
|
|
|
441 $("#tree").jstree({
|
|
|
442 "core" : {
|
|
|
443 "check_callback" : true, // enable all modifications
|
|
|
444 },
|
|
|
445 "plugins" : ["dnd","contextmenu"]
|
|
|
446 });
|
|
|
447 ```
|
|
|
448
|
|
|
449 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4486/)
|
|
|
450
|
|
|
451 `"core.check_callback"` can also be set to a function, that will be invoked every time a modification is about to happen (or when jstree needs to check if a modification is possible). If you return `true` the operation will be allowed, a value of `false` means it will not be allowed. The possible operation you can expect are `create_node`, `rename_node`, `delete_node`, `move_node` and `copy_node`. The `more` parameter will contain various information provided by the plugin that is invoking the check. For example the DND plugin will provide an object containing information about the move or copy operation that is being checked - is it a multi tree operation, which node is currently hovered, where the insert arrow is pointing - before, after or inside, etc.
|
|
|
452
|
|
|
453 ```js
|
|
|
454 $("#tree").jstree({
|
|
|
455 "core" : {
|
|
|
456 "check_callback" : function (operation, node, parent, position, more) {
|
|
|
457 if(operation === "copy_node" || operation === "move_node") {
|
|
|
458 if(parent.id === "#") {
|
|
|
459 return false; // prevent moving a child above or below the root
|
|
|
460 }
|
|
|
461 },
|
|
|
462 return true; // allow everything else
|
|
|
463 }
|
|
|
464 },
|
|
|
465 "plugins" : ["dnd","contextmenu"]
|
|
|
466 });
|
|
|
467 ```
|
|
|
468
|
|
|
469 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4487/)
|
|
|
470
|
|
|
471 The `more` parameter you receive contains other information related to the check being performed.
|
|
|
472
|
|
|
473 __For example__: `move_node` & `copy_node` checks will fire repeatedly while the user drags a node, if the check was triggered by the `dnd` plugin `more` will contain a `dnd` key, which will be set to `true`.
|
|
|
474 You can check for `more.dnd` and only perform a certain action if `dnd` triggered the check.
|
|
|
475 If you only want to perform an operation when a node is really about to be dropped check for `more.core`.
|
|
|
476
|
|
|
477 ## Plugins
|
|
|
478
|
|
|
479 jsTree comes with a few plugin bundled, but they will only modify your tree if you activate them using the `"plugins"` config option. Here is a brief description of each plugin. You can read more on the available config options for each plugin in the API docs.
|
|
|
480
|
|
|
481 ### checkbox
|
|
|
482 Renders a checkbox icon in front of each node, making multiselection easy. It also has a "tri-state" option, meaning a node with some of its children checked will get a "square" icon.
|
|
|
483
|
|
|
484 _Keep in mind that if any sort of cascade is enabled, disabled nodes may be checked too (not by themselves, but for example when a parent of a disabled node is checked and selection is configured to cascade down)._
|
|
|
485
|
|
|
486 ```js
|
|
|
487 $("#tree").jstree({
|
|
|
488 "plugins" : ["checkbox"]
|
|
|
489 });
|
|
|
490 ```
|
|
|
491
|
|
|
492 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4488/)
|
|
|
493
|
|
|
494 ### contextmenu
|
|
|
495 Makes it possible to right click nodes and shows a list of configurable actions in a menu.
|
|
|
496
|
|
|
497 ```js
|
|
|
498 $("#tree").jstree({
|
|
|
499 "core" : { "check_callback" : true }, // so that modifying operations work
|
|
|
500 "plugins" : ["contextmenu"]
|
|
|
501 });
|
|
|
502 ```
|
|
|
503
|
|
|
504 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4489/)
|
|
|
505
|
|
|
506 ### dnd
|
|
|
507 Makes it possible to drag and drop tree nodes and rearrange the tree.
|
|
|
508
|
|
|
509 ```js
|
|
|
510 $("#tree").jstree({
|
|
|
511 "core" : { "check_callback" : true }, // so that operations work
|
|
|
512 "plugins" : ["dnd"]
|
|
|
513 });
|
|
|
514 ```
|
|
|
515
|
|
|
516 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4490/)
|
|
|
517
|
|
|
518 ### massload
|
|
|
519 Makes it possible to load multiple nodes in a single go (for a lazy loaded tree).
|
|
|
520
|
|
|
521 ```js
|
|
|
522 $("#tree").jstree({
|
|
|
523 "core" : {
|
|
|
524 "data" : { .. AJAX config .. }
|
|
|
525 },
|
|
|
526 "massload" : {
|
|
|
527 "url" : "/some/path",
|
|
|
528 "data" : function (nodes) {
|
|
|
529 return { "ids" : nodes.join(",") };
|
|
|
530 }
|
|
|
531 },
|
|
|
532 "plugins" : [ "massload", "state" ]
|
|
|
533 });
|
|
|
534 ```
|
|
|
535
|
|
|
536 ### search
|
|
|
537 Adds the possibility to search for items in the tree and show only matching nodes. It also has AJAX / callback hooks, so that search will work on lazy loaded trees too.
|
|
|
538
|
|
|
539 ```html
|
|
|
540 <form id="s">
|
|
|
541 <input type="search" id="q" />
|
|
|
542 <button type="submit">Search</button>
|
|
|
543 </form>
|
|
|
544 <script>
|
|
|
545 $("#container").jstree({
|
|
|
546 "plugins" : ["search"]
|
|
|
547 });
|
|
|
548 $("#s").submit(function(e) {
|
|
|
549 e.preventDefault();
|
|
|
550 $("#container").jstree(true).search($("#q").val());
|
|
|
551 });
|
|
|
552 </script>
|
|
|
553 ```
|
|
|
554
|
|
|
555 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4491/)
|
|
|
556
|
|
|
557 ### sort
|
|
|
558 Automatically arranges all sibling nodes according to a comparison config option function, which defaults to alphabetical order.
|
|
|
559
|
|
|
560 ```js
|
|
|
561 $("#tree").jstree({
|
|
|
562 "plugins" : ["sort"]
|
|
|
563 });
|
|
|
564 ```
|
|
|
565
|
|
|
566 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4492/)
|
|
|
567
|
|
|
568 ### state
|
|
|
569 Saves all opened and selected nodes in the user's browser, so when returning to the same tree the previous state will be restored.
|
|
|
570
|
|
|
571 ```js
|
|
|
572 $("#tree").jstree({
|
|
|
573 // the key is important if you have multiple trees in the same domain
|
|
|
574 "state" : { "key" : "state_demo" },
|
|
|
575 "plugins" : ["state"]
|
|
|
576 });
|
|
|
577 ```
|
|
|
578
|
|
|
579 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4493/)
|
|
|
580
|
|
|
581 ### types
|
|
|
582 Makes it possible to add a "type" for a node, which means to easily control nesting rules and icon for groups of nodes instead of individually. To set a node type add a type property to the node structure.
|
|
|
583
|
|
|
584 ```js
|
|
|
585 $("#tree").jstree({
|
|
|
586 "types" : {
|
|
|
587 "default" : {
|
|
|
588 "icon" : "glyphicon glyphicon-flash"
|
|
|
589 },
|
|
|
590 "demo" : {
|
|
|
591 "icon" : "glyphicon glyphicon-ok"
|
|
|
592 }
|
|
|
593 },
|
|
|
594 "plugins" : ["types"]
|
|
|
595 });
|
|
|
596 ```
|
|
|
597
|
|
|
598 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4494/)
|
|
|
599
|
|
|
600 ### unique
|
|
|
601 Enforces that no nodes with the same name can coexist as siblings - prevents renaming and moving nodes to a parent, which already contains a node with the same name.
|
|
|
602
|
|
|
603 ```js
|
|
|
604 $("#tree").jstree({
|
|
|
605 "plugins" : ["unique"]
|
|
|
606 });
|
|
|
607 ```
|
|
|
608
|
|
|
609 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4495/)
|
|
|
610
|
|
|
611 ### wholerow
|
|
|
612 Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.
|
|
|
613
|
|
|
614 ```js
|
|
|
615 $("#tree").jstree({
|
|
|
616 "plugins" : ["wholerow"]
|
|
|
617 });
|
|
|
618 ```
|
|
|
619
|
|
|
620 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4496/)
|
|
|
621
|
|
|
622 ### More plugins
|
|
|
623 If you create your own plugin (or download a 3rd party one) you must include its source on the page and list its name in the `"plugins"` config array.
|
|
|
624
|
|
|
625 ```js
|
|
|
626 // conditional select
|
|
|
627 (function ($, undefined) {
|
|
|
628 "use strict";
|
|
|
629 $.jstree.defaults.conditionalselect = function () { return true; };
|
|
|
630 $.jstree.plugins.conditionalselect = function (options, parent) {
|
|
|
631 this.activate_node = function (obj, e) {
|
|
|
632 if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
|
|
|
633 parent.activate_node.call(this, obj, e);
|
|
|
634 }
|
|
|
635 };
|
|
|
636 };
|
|
|
637 })(jQuery);
|
|
|
638 $("#tree").jstree({
|
|
|
639 "conditionalselect" : function (node) {
|
|
|
640 return node.text === "Root node" ? false : true;
|
|
|
641 },
|
|
|
642 "plugins" : ["conditionalselect"]
|
|
|
643 });
|
|
|
644 ```
|
|
|
645
|
|
|
646 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4497/)
|
|
|
647
|
|
|
648 As seen here when creating a plugin you can define a default config, add your own functions to jstree, or override existing ones while maintaining the ability to call the overridden function.
|
|
|
649
|
|
|
650 ## PHP demos moved to new repository
|
|
|
651 https://github.com/vakata/jstree-php-demos
|
|
|
652
|
|
|
653 ## License & Contributing
|
|
|
654
|
|
|
655 _Please do NOT edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!_
|
|
|
656
|
|
|
657 If you want to you can always [donate a small amount][paypal] to help the development of jstree.
|
|
|
658
|
|
|
659 [paypal]: https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com¤cy_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree
|
|
|
660
|
|
|
661 Copyright (c) 2014 Ivan Bozhanov (http://vakata.com)
|
|
|
662
|
|
|
663 Licensed under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
|
