Skip to content

Commit

Permalink
updated fiddles to always use the latest jstree version - close #1526
Browse files Browse the repository at this point in the history
  • Loading branch information
vakata committed Aug 15, 2016
1 parent 29bc4f0 commit f7f650f
Showing 1 changed file with 21 additions and 21 deletions.
42 changes: 21 additions & 21 deletions README.md
Expand Up @@ -23,7 +23,7 @@ _Aside from this readme you can find a lot more info on [jstree.com](http://www.
- [Getting Started](#getting-started)
- [Include all neccessary files](#include-all-neccessary-files)
- [Populating a tree using HTML](#populating-a-tree-using-html)
- [Populating a tree using an array (or JSON)](#populating-a-tree-using-an-array-or-json)
- [Populating a tree using an array \(or JSON\)](#populating-a-tree-using-an-array-or-json)
- [The required JSON format](#the-required-json-format)
- [Populating the tree using AJAX](#populating-the-tree-using-ajax)
- [Populating the tree using AJAX and lazy loading nodes](#populating-the-tree-using-ajax-and-lazy-loading-nodes)
Expand Down Expand Up @@ -123,7 +123,7 @@ $(function() {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/1/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4478/)

Unlike the previous simple HTML example, this time the `.jstree()` function accepts a config object.

Expand Down Expand Up @@ -182,7 +182,7 @@ $(function() {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/11/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4479/)

---

Expand Down Expand Up @@ -216,7 +216,7 @@ The server response is:
}]
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/4/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4480/)

Instead of a JS array, you can set `core.data` to a [jQuery AJAX config](http://api.jquery.com/jQuery.ajax/).
jsTree will hit that URL, and provided you return properly formatted JSON it will be displayed.
Expand Down Expand Up @@ -263,7 +263,7 @@ The initial server response is:
}]
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/5/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4481/)

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.

Expand Down Expand Up @@ -312,7 +312,7 @@ $(function() {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/13/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4482/)

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).

Expand Down Expand Up @@ -343,7 +343,7 @@ $(function() {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/6/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4483/)

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).

Expand Down Expand Up @@ -390,7 +390,7 @@ $(function() {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/7/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4484/)

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.

Expand Down Expand Up @@ -430,7 +430,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/8/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4485/)

We will cover all plugins further down.

Expand All @@ -445,7 +445,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/9/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4486/)

`"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.

Expand All @@ -465,7 +465,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/10/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4487/)

The `more` parameter you receive contains other information related to the check being performed.

Expand All @@ -488,7 +488,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/14/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4488/)

### contextmenu
Makes it possible to right click nodes and shows a list of configurable actions in a menu.
Expand All @@ -500,7 +500,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/16/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4489/)

### dnd
Makes it possible to drag and drop tree nodes and rearrange the tree.
Expand All @@ -512,7 +512,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/17/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4490/)

### massload
Makes it possible to load multiple nodes in a single go (for a lazy loaded tree).
Expand Down Expand Up @@ -551,7 +551,7 @@ $("#s").submit(function(e) {
</script>
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/18/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4491/)

### sort
Automatically arranges all sibling nodes according to a comparison config option function, which defaults to alphabetical order.
Expand All @@ -562,7 +562,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/19/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4492/)

### state
Saves all opened and selected nodes in the user's browser, so when returning to the same tree the previous state will be restored.
Expand All @@ -575,7 +575,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/20/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4493/)

### types
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.
Expand All @@ -594,7 +594,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/21/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4494/)

### unique
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.
Expand All @@ -605,7 +605,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/22/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4495/)

### wholerow
Makes each node appear block level which makes selection easier. May cause slow down for large trees in old browsers.
Expand All @@ -616,7 +616,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/23/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4496/)

### More plugins
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.
Expand All @@ -642,7 +642,7 @@ $("#tree").jstree({
});
```

[view result](http://jsfiddle.net/vakata/2kwkh2uL/24/)
[view result](http://jsfiddle.net/vakata/2kwkh2uL/4497/)

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.

Expand Down

0 comments on commit f7f650f

Please sign in to comment.