Mercurial > repos > mingchen0919 > aurora_skewer_site

annotate vakata-jstree-3.3.5/README.md @ 0:a42e58c71e5b draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
author mingchen0919
date Sun, 30 Dec 2018 12:55:49 -0500
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
1 # jstree
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
2
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
4
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
5 jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
6
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
8
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
9 You also get:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
10 * drag & drop support
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
11 * keyboard navigation
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
12 * inline edit, create and delete
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
13 * tri-state checkboxes
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
14 * fuzzy searching
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
15 * customizable node types
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
16
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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)_.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
18
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
19 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
20
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
21 <!-- MarkdownTOC depth=0 autolink=true bracket=round -->
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
22
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
23 - [Getting Started](#getting-started)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
24 - [Include all neccessary files](#include-all-neccessary-files)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
25 - [Populating a tree using HTML](#populating-a-tree-using-html)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
26 - [Populating a tree using an array \(or JSON\)](#populating-a-tree-using-an-array-or-json)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
27 - [The required JSON format](#the-required-json-format)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
28 - [Populating the tree using AJAX](#populating-the-tree-using-ajax)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
29 - [Populating the tree using AJAX and lazy loading nodes](#populating-the-tree-using-ajax-and-lazy-loading-nodes)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
30 - [Populating the tree using a callback function](#populating-the-tree-using-a-callback-function)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
31 - [Working with events](#working-with-events)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
32 - [Interacting with the tree using the API](#interacting-with-the-tree-using-the-api)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
33 - [More on configuration](#more-on-configuration)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
34 - [Plugins](#plugins)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
35 - [checkbox](#checkbox)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
36 - [contextmenu](#contextmenu)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
37 - [dnd](#dnd)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
38 - [massload](#massload)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
39 - [search](#search)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
40 - [sort](#sort)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
41 - [state](#state)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
42 - [types](#types)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
43 - [unique](#unique)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
44 - [wholerow](#wholerow)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
45 - [More plugins](#more-plugins)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
46 - [PHP demos moved to new repository](#php-demos-moved-to-new-repository)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
47 - [License & Contributing](#license--contributing)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
48
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
49 <!-- /MarkdownTOC -->
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
50
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
51
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
52 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
53
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
54 ## Getting Started
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
55
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
56 ### Include all neccessary files
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
57 To get started you need 3 things in your page:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
58 1. jQuery (anything above 1.9.1 will work)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
59 2. A jstree theme (there is only one theme supplied by default)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
60 3. The jstree source file
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
61
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
62 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
63 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
64
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
65 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
66 <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
67 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
68
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
69 _If you decide to host jstree yourself - the files are located in the `dist` folder. You can safely ignore the `dist/libs` folder._
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
70
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
71 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
72
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
73 ### Populating a tree using HTML
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
74
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
76
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
77 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
78 <div id="container">
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
79 <ul>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
80 <li>Root node
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
81 <ul>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
82 <li>Child node 1</li>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
83 <li>Child node 2</li>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
84 </ul>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
85 </li>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
86 </ul>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
87 </div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
88 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
89 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
90 $('#container').jstree();
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
91 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
92 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
93 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
94
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
95 [view result](http://jsfiddle.net/vakata/2kwkh2uL/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
96
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
97 _You can add a few options when rendering a node using a data-attribute (note the quotes):_
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
98 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
99 <li data-jstree='{ "selected" : true, "opened" : true }'>Root node ...
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
100 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
101
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
102 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
103
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
104 ### Populating a tree using an array (or JSON)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
105
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
106 Building trees from HTML is easy, but it is not very flexible, inline JS data is a better option:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
107
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
108 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
109 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
110 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
111 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
112 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
113 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
114 'data' : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
115 { "text" : "Root node", "children" : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
116 { "text" : "Child node 1" },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
117 { "text" : "Child node 2" }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
118 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
119 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
120 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
121 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
122 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
123 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
124 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
125 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
126
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
127 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4478/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
128
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
129 Unlike the previous simple HTML example, this time the `.jstree()` function accepts a config object.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
130
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
132
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
133 #### The required JSON format
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
134
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
136
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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:_
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
138
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
139 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
140 [ { "text" : "Root node", "children" : [ "Child node 1", "Child node 2" ] } ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
141 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
142
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
143 There are other available options for each node, only set them if you need them like:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
144
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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)_.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
148 * `state` - an object specifyng a few options about the node:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
149 - `selected` - if the node should be initially selected
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
150 - `opened` - if the node should be initially opened
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
151 - `disabled` - if the node should be disabled
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
154 * `type` - __types plugin specific__ - the type of the nodes (should be defined in the types config), if not set `"default"` is assumed.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
155 * `li_attr` - object of values which will be used to add HTML attributes on the resulting `LI` DOM node.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
156 * `a_attr` - object of values which will be used to add HTML attributes on the resulting `A` node.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
157
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
158 Here is a new demo with some of those properties set:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
159
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
160 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
161 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
162 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
163 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
164 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
165 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
166 'data' : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
167 {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
168 "text" : "Root node",
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
169 "state" : {"opened" : true },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
170 "children" : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
171 {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
172 "text" : "Child node 1",
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
173 "state" : { "selected" : true },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
174 "icon" : "glyphicon glyphicon-flash"
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
175 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
176 { "text" : "Child node 2", "state" : { "disabled" : true } }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
177 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
178 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
179 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
180 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
181 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
182 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
183 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
184 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
185
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
186 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4479/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
187
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
188 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
189
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
190 ### Populating the tree using AJAX
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
191
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
192 Building off of the previous example, let's see how to have jstree make AJAX requests for you.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
193
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
194 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
195 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
196 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
197 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
198 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
199 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
200 'data' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
201 "url" : "//www.jstree.com/fiddle/",
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
202 "dataType" : "json" // needed only if you do not supply JSON headers
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
203 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
204 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
205 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
206 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
207 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
208 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
209
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
210 The server response is:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
211 ```json
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
212 [{
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
213 "id":1,"text":"Root node","children":[
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
214 {"id":2,"text":"Child node 1"},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
215 {"id":3,"text":"Child node 2"}
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
216 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
217 }]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
218 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
219
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
220 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4480/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
221
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
222 Instead of a JS array, you can set `core.data` to a [jQuery AJAX config](http://api.jquery.com/jQuery.ajax/).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
223 jsTree will hit that URL, and provided you return properly formatted JSON it will be displayed.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
224
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
225 _If you cannot provide proper JSON headers, set `core.data.dataType` to `"json"`._
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
226
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
228
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
229 __WHEN USING IDS MAKE SURE THEY ARE UNIQUE INSIDE A PARTICULAR TREE__
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
230
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
231 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
232
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
233 ### Populating the tree using AJAX and lazy loading nodes
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
234
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
236
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
237 Here we take our previous example, and lazy load the "Child node 1" node.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
238
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
239 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
240 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
241 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
242 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
243 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
244 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
245 'data' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
246 "url" : "//www.jstree.com/fiddle/?lazy",
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
247 "data" : function (node) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
248 return { "id" : node.id };
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
249 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
250 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
251 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
252 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
253 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
254 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
255 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
256
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
257 The initial server response is:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
258 ```json
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
259 [{
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
260 "id":1,"text":"Root node","children":[
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
261 {"id":2,"text":"Child node 1","children":true},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
262 {"id":3,"text":"Child node 2"}
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
263 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
264 }]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
265 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
266
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
267 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4481/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
268
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
270
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
272
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
273 You will notice that the first request goes off to:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
274 `http://www.jstree.com/fiddle?lazy&id=#`
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
275 `#` is the special ID that the function receives when jstree needs to load the root nodes.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
276
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
278
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
280
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
281 Proceed and open this node - you will see a next request fire off to:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
282 `http://www.jstree.com/fiddle?lazy&id=2`
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
284
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
285 The server response is:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
286 ```json
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
287 ["Child node 3","Child node 4"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
288 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
289
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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`._
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
291
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
292 ### Populating the tree using a callback function
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
293
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
295
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
296 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
297 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
298 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
299 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
300 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
301 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
302 'data' : function (node, cb) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
303 if(node.id === "#") {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
304 cb([{"text" : "Root", "id" : "1", "children" : true}]);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
305 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
306 else {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
307 cb(["Child"]);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
308 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
309 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
310 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
311 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
312 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
313 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
314 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
315
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
316 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4482/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
317
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
319
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
320 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
321
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
322 ## Working with events
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
323
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
325 Let's use the most basic event `changed` - it fires when selection on the tree changes:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
326
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
327 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
328 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
329 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
330 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
331 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
332 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
333 'data' : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
334 {"id" : 1, "text" : "Node 1"},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
335 {"id" : 2, "text" : "Node 2"},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
336 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
337 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
338 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
339 $('#container').on("changed.jstree", function (e, data) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
340 console.log("The selected nodes are:");
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
341 console.log(data.selected);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
342 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
343 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
344 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
345 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
346
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
347 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4483/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
348
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
350
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
351 Let's extend this a bit and log out the text of the node instead of the ID.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
352
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
353 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
354 $('#container').on("changed.jstree", function (e, data) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
355 console.log(data.instance.get_selected(true)[0].text);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
356 console.log(data.instance.get_node(data.selected[0]).text);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
357 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
358 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
359
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
360 The two rows above achieve exactly the same thing - get the text of the first selected node.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
361
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
363
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
364 __All available functions and events are documented in the API docs__
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
365
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
366 ---
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
367
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
368 ## Interacting with the tree using the API
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
369
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
371
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
372 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
373 <button>Select node 1</button>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
374 <div id="container"></div>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
375 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
376 $(function() {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
377 $('#container').jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
378 'core' : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
379 'data' : [
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
380 {"id" : 1, "text" : "Node 1"},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
381 {"id" : 2, "text" : "Node 2"},
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
382 ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
383 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
384 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
385 $('button').on("click", function () {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
386 var instance = $('#container').jstree(true);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
387 instance.deselect_all();
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
388 instance.select_node('1');
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
389 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
390 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
391 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
392 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
393
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
394 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4484/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
395
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
397
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
398 Methods can also be invoked like this:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
399
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
400 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
401 $('#container').jstree("select_node", "1");
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
402 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
403
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
404 __All available functions and events are documented in the API docs__
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
405
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
406 ## More on configuration
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
407
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
408 We already covered the config object in general (when we specified inline & AJAX data sources).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
409
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
410 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
411 $("#tree").jstree({ /* config object goes here */ });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
412 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
413
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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"`:
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
415 * `"core"` stores the core configuration options
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
416 * `"plugins"` is an array of plugin names (strings) you want active on the instance
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
417
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
418 When configuring you only need to set values that you want to be different from the defaults.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
419
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
420 __All config options and defaults are documented in the API docs__
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
421
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
422 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
423 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
424 "core" : { // core options go here
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
425 "multiple" : false, // no multiselection
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
426 "themes" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
427 "dots" : false // no connecting dots between dots
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
428 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
429 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
430 "plugins" : ["state"] // activate the state plugin on this instance
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
431 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
432 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
433
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
434 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4485/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
435
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
436 We will cover all plugins further down.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
437
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.__
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
439
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
440 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
441 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
442 "core" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
443 "check_callback" : true, // enable all modifications
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
444 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
445 "plugins" : ["dnd","contextmenu"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
446 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
447 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
448
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
449 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4486/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
450
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
452
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
453 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
454 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
455 "core" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
456 "check_callback" : function (operation, node, parent, position, more) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
457 if(operation === "copy_node" || operation === "move_node") {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
458 if(parent.id === "#") {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
459 return false; // prevent moving a child above or below the root
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
460 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
461 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
462 return true; // allow everything else
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
463 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
464 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
465 "plugins" : ["dnd","contextmenu"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
466 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
467 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
468
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
469 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4487/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
470
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
471 The `more` parameter you receive contains other information related to the check being performed.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
472
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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`.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
474 You can check for `more.dnd` and only perform a certain action if `dnd` triggered the check.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
475 If you only want to perform an operation when a node is really about to be dropped check for `more.core`.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
476
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
477 ## Plugins
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
478
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
480
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
481 ### checkbox
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
483
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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)._
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
485
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
486 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
487 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
488 "plugins" : ["checkbox"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
489 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
490 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
491
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
492 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4488/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
493
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
494 ### contextmenu
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
495 Makes it possible to right click nodes and shows a list of configurable actions in a menu.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
496
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
497 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
498 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
499 "core" : { "check_callback" : true }, // so that modifying operations work
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
500 "plugins" : ["contextmenu"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
501 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
502 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
503
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
504 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4489/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
505
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
506 ### dnd
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
507 Makes it possible to drag and drop tree nodes and rearrange the tree.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
508
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
509 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
510 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
511 "core" : { "check_callback" : true }, // so that operations work
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
512 "plugins" : ["dnd"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
513 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
514 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
515
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
516 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4490/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
517
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
518 ### massload
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
519 Makes it possible to load multiple nodes in a single go (for a lazy loaded tree).
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
520
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
521 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
522 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
523 "core" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
524 "data" : { .. AJAX config .. }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
525 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
526 "massload" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
527 "url" : "/some/path",
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
528 "data" : function (nodes) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
529 return { "ids" : nodes.join(",") };
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
530 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
531 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
532 "plugins" : [ "massload", "state" ]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
533 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
534 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
535
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
536 ### search
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
538
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
539 ```html
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
540 <form id="s">
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
541 <input type="search" id="q" />
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
542 <button type="submit">Search</button>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
543 </form>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
544 <script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
545 $("#container").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
546 "plugins" : ["search"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
547 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
548 $("#s").submit(function(e) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
549 e.preventDefault();
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
550 $("#container").jstree(true).search($("#q").val());
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
551 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
552 </script>
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
553 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
554
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
555 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4491/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
556
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
557 ### sort
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
558 Automatically arranges all sibling nodes according to a comparison config option function, which defaults to alphabetical order.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
559
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
560 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
561 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
562 "plugins" : ["sort"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
563 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
564 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
565
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
566 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4492/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
567
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
568 ### state
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
570
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
571 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
572 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
573 // the key is important if you have multiple trees in the same domain
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
574 "state" : { "key" : "state_demo" },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
575 "plugins" : ["state"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
576 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
577 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
578
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
579 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4493/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
580
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
581 ### types
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
583
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
584 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
585 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
586 "types" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
587 "default" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
588 "icon" : "glyphicon glyphicon-flash"
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
589 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
590 "demo" : {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
591 "icon" : "glyphicon glyphicon-ok"
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
592 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
593 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
594 "plugins" : ["types"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
595 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
596 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
597
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
598 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4494/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
599
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
600 ### unique
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
602
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
603 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
604 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
605 "plugins" : ["unique"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
606 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
607 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
608
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
609 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4495/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
610
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
611 ### wholerow
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
612 Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
613
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
614 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
615 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
616 "plugins" : ["wholerow"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
617 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
618 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
619
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
620 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4496/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
621
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
622 ### More plugins
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
624
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
625 ```js
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
626 // conditional select
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
627 (function ($, undefined) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
628 "use strict";
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
629 $.jstree.defaults.conditionalselect = function () { return true; };
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
630 $.jstree.plugins.conditionalselect = function (options, parent) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
631 this.activate_node = function (obj, e) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
632 if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
633 parent.activate_node.call(this, obj, e);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
634 }
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
635 };
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
636 };
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
637 })(jQuery);
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
638 $("#tree").jstree({
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
639 "conditionalselect" : function (node) {
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
640 return node.text === "Root node" ? false : true;
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
641 },
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
642 "plugins" : ["conditionalselect"]
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
643 });
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
644 ```
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
645
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
646 [view result](http://jsfiddle.net/vakata/2kwkh2uL/4497/)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
647
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
649
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
650 ## PHP demos moved to new repository
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
651 https://github.com/vakata/jstree-php-demos
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
652
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
653 ## License & Contributing
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
654
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
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!_
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
656
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
657 If you want to you can always [donate a small amount][paypal] to help the development of jstree.
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
658
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
659 [paypal]: https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=paypal@vakata.com&currency_code=USD&amount=&return=http://jstree.com/donation&item_name=Buy+me+a+coffee+for+jsTree
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
660
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
661 Copyright (c) 2014 Ivan Bozhanov (http://vakata.com)
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
662
a42e58c71e5b planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty
mingchen0919
parents:
diff changeset
663 Licensed under the [MIT license](http://www.opensource.org/licenses/mit-license.php).