https://github.com/ritesh83/ember-cli-jstree
ember-cli addon for jstree
https://github.com/ritesh83/ember-cli-jstree
ember-cli-addon jstree
Last synced: about 1 month ago
JSON representation
ember-cli addon for jstree
- Host: GitHub
- URL: https://github.com/ritesh83/ember-cli-jstree
- Owner: ritesh83
- License: mit
- Created: 2015-04-07T06:12:24.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T18:17:13.000Z (over 3 years ago)
- Last Synced: 2026-01-23T17:08:05.644Z (2 months ago)
- Topics: ember-cli-addon, jstree
- Language: JavaScript
- Homepage: http://ritesh83.github.io/ember-cli-jstree/#/static
- Size: 2.52 MB
- Stars: 40
- Watchers: 7
- Forks: 48
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-cli-jstree
[](https://travis-ci.org/ritesh83/ember-cli-jstree) [](http://emberobserver.com/addons/ember-cli-jstree)
Brings [jsTree](http://www.jstree.com/) functionality into your Ember app.
Demo: http://ritesh83.github.io/ember-cli-jstree/#/static
## Installation
Ember CLI addons can be installed with `ember install`
```
ember install ember-cli-jstree
```
## Usage
Out of the box, the bare minimum you need on the template is `data`.
Run supported actions on the tree by registering it to your controller with the `actionReceiver` property.
```Handlebars
{{ember-jstree
actionReceiver=jstreeActionReceiver
selectedNodes=jstreeSelectedNodes
data=data
plugins=plugins
themes=themes
checkboxOptions=checkboxOptions
contextmenuOptions=contextmenuOptions
stateOptions=stateOptions
typesOptions=typesOptions
searchOptions=searchOptions
searchTerm=searchTerm
sort=sort
contextMenuReportClicked=(action "contextMenuReportClicked")
eventDidBecomeReady=(action "handleTreeDidBecomeReady")
}}
```
### Adding classes
As per the [jsTree JSON docs](https://www.jstree.com/docs/json/), you can add custom classes to both the `
individual node. These are passed on to jQuery's `attr` function.
For example, to add [hint.css](http://kushagragour.in/lab/hint/) tooltips, use the following in your JSON data hash.
```Javascript
{
'id': 'node15',
'text': 'Node title',
'state': { 'selected': true },
'a_attr': { 'class': 'hint--bottom', 'data-hint': 'Some hint goes here' }
}
```
This will get rendered in HTML as
```HTML
```
## Event Handling
The addon listens for events from jstree and sends them back to you using actions bound
to the Handlebars template. Simply set the property to the string name of the action
in your controller.
```Handlebars
{{ember-jstree
[...]
eventDidChange=(action "handleJstreeEventDidChange")
treeObject=jstreeObject
}}
```
### Supported events
The following events have basic support included. More are on the way.
| jsTree Event | Ember Action |
| ----------------------- | ----------------------- |
| after_open.jstree | eventDidOpen |
| after_close.jstree | eventDidClose |
| changed.jstree | eventDidChange |
| dehover_node.jstree | eventDidDehoverNode |
| deselect_node.jstree | eventDidDeselectNode |
| hover_node.jstree | eventDidHoverNode |
| init.jstree | eventDidInit |
| loading.jstree | eventIsLoading |
| loaded.jstree | eventDidLoad |
| ready.jstree | eventDidBecomeReady |
| redraw.jstree | eventDidRedraw |
| show_node.jstree | eventDidShowNode |
| select_node.jstree | eventDidSelectNode |
| (destroyed - no event) | eventDidDestroy |
| move_node.jstree | eventDidMoveNode |
| disable_checkbox.jstree | eventDidDisableCheckbox |
| enable_checkbox.jstree | eventDidEnableCheckbox |
| check_node.jstree | eventDidCheckNode |
| uncheck_node.jstree | eventDidUncheckNode |
| check_all.jstree | eventDidCheckAll |
| uncheck_all.jstree | eventDidUncheckAll |
**Note:** In the meantime, you can add event listeners yourself by calling them on a mapped `treeObject` property.
```Javascript
_handleOpenNode: function() {
var treeObject = this.get('jstreeObject');
treeObject.on('open_node.jstree', function(e, data) {
console.info('A node was opened.');
console.log(data);
}.bind(this));
}
```
### Selected nodes
Selected nodes are always available through the `selectedNodes` property
## Plugins
Plugins for your tree should be specified by a `plugins` string property. Multiple plugins should be
separated with commas.
```Handlebars
{{ember-jstree
data=data
plugins=plugins
}}
```
The following [plugins](http://www.jstree.com/plugins/) are currently supported. More on the way!
* Checkbox
* Contextmenu
* Search
* Sort
* State
* Types
* Wholerow
* Drag and Drop
### Configuring plugins
Send a hash containing the jsTree options through to the addon through the `Options` key.
In your **controller**:
```Javascript
jstreeStateOptionHash: {
'key': 'ember-cli-jstree-dummy'
},
plugins: 'state'
```
In **Handlebars**:
```Handlebars
{{ember-jstree
[...]
plugins=plugins
stateOptions=jstreeStateOptionHash
}}
```
The sort plugin accepts a sort function instead of an options hash.
```Handlebars
{{ember-jstree
[...]
plugins=plugins
sort=sortFunction
}}
```
### Configuring tree refresh
Send in the following [properties]() to control how the tree is refreshed when you change the data
* skipLoading
* forgetState
Both default to false if nothing is passed in
## Sending actions to jsTree
The addon component will try to register an `actionReceiver` (see view helper example) to a property in
your controller if you define it. You can then send actions through that bound property:
```Javascript
this.get('jstreeActionReceiver').send('redraw');
```
**Note:** Action names in Ember are camelized (e.g.: `get_node()` in jsTree is mapped to `getNode()` in Ember).
If the corresponding jsTree method has a return value, the addon will send an action with the name corresponding
to supported actions in the table below. Because the addon actually calls these jsTree events, if any events
occur because of an action, they will be sent as actions (see Event Handling above).
### Supported actions
| jsTree Action | Ember Action | Return Action |
| ---------------- | -------------- | -------------------- |
| copy_node | copyNode | |
| close_all | closeAll | |
| close_node | closeNode | |
| create_node | createNode | actionCreateNode |
| delete_node | deleteNode | actionDeleteNode |
| deselect_all | deselectAll | |
| deselect_node | deselectNode | |
| destroy | destroy | |
| get_children_dom | getChildrenDom | actionGetChildrenDom |
| get_container | getContainer | actionGetContainer |
| get_node | getNode | actionGetNode |
| get_parent | getParent | actionGetParent |
| get_path | getPath | actionGetPath |
| get_text | getText | actionGetText |
| last_error | lastError | actionLastError |
| load_all | loadAll | actionLoadAll |
| load_node | loadNode | actionLoadNode |
| move_node | moveNode | |
| open_all | openAll | |
| open_node | openNode | |
| redraw | redraw | |
| rename_node | renameNode | actionRenameNode |
| select_all | selectAll | |
| select_node | selectNode | |
| toggle_node | toggleNode | |
### Receiving return values
In your Handlebars component, map the return action (as above, most of which follow the pattern `action`):
```Handlebars
{{ember-jstree
[...]
actionGetNode=(action "handleJstreeGetNode")
}}
```
Any params that jsTree returns will be given in the order specified by its API.
```Javascript
actionGetNode: function (node) {
this.set('someValue', node);
}
```
## Demo
http://ritesh83.github.io/ember-cli-jstree/#/static
Both dynamic (AJAX loaded) and static examples are in the dummy demo.
* Clone this repo: `git clone`
* Install packages: `yarn`
* Run `ember serve`
* Visit the sample app at http://localhost:4200.
## Guides
http://ridhwana.com/articles/2017/05/28/introduction-to-ember-cli-js-tree.html