aurora_htseq: vakata-jstree-3.3.5/README.md annotate

annotate vakata-jstree-3.3.5/README.md @ 4:ab0aff96b9d1 draft

planemo upload commit 841d8b22bf9f1aaed6bfe8344b60617f45b275b2-dirty

author	mingchen0919
date	Fri, 14 Dec 2018 16:22:08 -0500
parents	803f4888f36a
children

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

Mercurial > repos > mingchen0919 > aurora_htseq

annotate vakata-jstree-3.3.5/README.md @ 4:ab0aff96b9d1 draft