ember-cli-jstree

Brings jsTree 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.

<div class="sample-tree">
    {{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")
    }}
</div>

Adding classes

As per the jsTree JSON docs, you can add custom classes to both the <li> and <a> tags of each individual node. These are passed on to jQuery's attr function.

For example, to add hint.css tooltips, use the following in your JSON data hash.

{
	'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

<a class="jstree-anchor jstree-clicked hint--bottom" href="#" tabindex="-1" data-hint="Some hint goes here" id="node15_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Node title</a>

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.

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

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

{{ember-jstree
    data=data
    plugins=plugins
}}

The following 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 <plugin name>Options key.

In your controller:

jstreeStateOptionHash: {
    'key': 'ember-cli-jstree-dummy'
},
plugins: 'state'

In Handlebars:

{{ember-jstree
    [...]
    plugins=plugins
    stateOptions=jstreeStateOptionHash
}}

The sort plugin accepts a sort function instead of an options hash.

{{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:

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<action name>):

{{ember-jstree
    [...]
    actionGetNode=(action "handleJstreeGetNode")
}}

Any params that jsTree returns will be given in the order specified by its API.

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