Skip to content

Latest commit

 

History

History
265 lines (205 loc) · 8.35 KB

README.md

File metadata and controls

265 lines (205 loc) · 8.35 KB
Raw

ember-cli-jstree

Travis-CI status Ember Observer Score

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