Tree(container, options)

new Tree(container, options)

Create tree model and inject data to model

Parameters:
Name Type Description
container string | HTMLElement | jQueryObject

Tree container element or id string value

options Object

The options

Properties
Name Type Attributes Default Description
data Object <optional>

A data to be used on tree

nodeIdPrefix string <optional>

A default prefix of a node

nodeDefaultState Object <optional>

A default state of a node

stateLabels Object <optional>

Toggle button state label

Properties
Name Type Attributes Description
opened string <optional>

State-OPENED label

closed string <optional>

State-CLOSED label

template Object <optional>

A markup set to make element

Properties
Name Type Attributes Description
internalNode string <optional>

HTML template

leafNode string <optional>

HTML template

renderTemplate function <optional>

Function for rendering template

usageStatistics boolean <optional>
true

Let us know the hostname. If you don't want to send the hostname, please set to false.

Mixes In:
  • tui.util.CustomEvents
Examples

Get `Tree` module

// * node, commonjs
// * Get Tree module from `node_modules/tui-tree`
var Tree = require('tui-tree');
var instance = new Tree(...);
// * distribution file, script
// * there is `tui.Tree` as a global variable
var Tree = tui.Tree;
var instance = new Tree(...);

Initialize Tree

// Default options:
// {
//     data: [],
//     nodeIdPrefix: 'tui-tree-node-',
//     nodeDefaultState: 'closed',
//     stateLabels: {
//         opened: '-',
//         closed: '+'
//     },
//     template: {
//         internalNode:
//             '<div class="tui-tree-content-wrapper">' +
//                 '<button type="button" class="tui-tree-toggle-btn tui-js-tree-toggle-btn">' +
//                     '<span class="tui-ico-tree"></span>' +
//                     '{{stateLabel}}' +
//                 '</button>' +
//                 '<span class="tui-tree-text tui-js-tree-text">' +
//                     '<span class="tui-tree-ico tui-ico-folder"></span>' +
//                     '{{text}}' +
//                 '</span>' +
//             '</div>' +
//             '<ul class="tui-tree-subtree tui-js-tree-subtree">' +
//                 '{{children}}' +
//             '</ul>',
//         leafNode:
//             '<div class="tui-tree-content-wrapper">' +
//                 '<span class="tui-tree-text tui-js-tree-text">' +
//                     '<span class="tui-tree-ico tui-ico-file"></span>' +
//                     '{{text}}' +
//                 '</span>' +
//             '</div>'
//     }
// }
var container = document.getElementById('tree');
var data = [
    {text: 'rootA', children: [
        {text: 'root-1A'},
        {text: 'root-1B'},
        {text: 'root-1C'},
        {text: 'root-1D'},
        {text: 'root-2A', children: [
            {text: 'sub_1A', children:[
                {text: 'sub_sub_1A'}
            ]},
            {text: 'sub_2A'}
        ]},
        {text: 'root-2B'},
        {text: 'root-2C'},
        {text: 'root-2D'},
        {text: 'root-3A', children: [
            {text: 'sub3_a'},
            {text: 'sub3_b'}
        ]},
        {text: 'root-3B'},
        {text: 'root-3C'},
        {text: 'root-3D'}
    ]},
    {text: 'rootB', children: [
        {text: 'B_sub1'},
        {text: 'B_sub2'},
        {text: 'b'}
    ]}
];
var tree = new Tree(container, {
    data: data,
    nodeDefaultState: 'opened',

    // ========= Option: Override template renderer ===========

    template: { // template for Mustache engine
        internalNode:
            '<div class="tui-tree-content-wrapper">' +
                '<button type="button" class="tui-tree-toggle-btn tui-js-tree-toggle-btn">' +
                    '<span class="tui-ico-tree"></span>' +
                    '{{stateLabel}}' +
                '</button>' +
                '<span class="tui-tree-text tui-js-tree-text">' +
                    '<span class="tui-tree-ico tui-ico-folder"></span>' +
                    '{{text}}' +
                '</span>' +
            '</div>' +
            '<ul class="tui-tree-subtree tui-js-tree-subtree">' +
                 '{{{children}}}' +
            '</ul>',
        leafNode:
            '<div class="tui-tree-content-wrapper">' +
                '<span class="tui-tree-text tui-js-tree-text">' +
                    '<span class="tui-tree-ico tui-ico-file"></span>' +
                    '{{text}}' +
                '</span>' +
            '</div>'
    },
    renderTemplate: function(tmpl, props) {
        // Mustache template engine
        return Mustache.render(tmpl, props);
    }
});

Methods

add(data, parentIdopt, optionsopt)nullable {Array.<string>}

Add node(s).

  • If the parentId is falsy, the node will be appended to rootNode.
  • If 'isSilent' is not true, it redraws the tree
Parameters:
Name Type Attributes Description
data Array | object

Raw-data

parentId * <optional>

Parent id

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't redraw children

useAjax boolean <optional>

State of using Ajax

Returns:
Array.<string> -

Added node ids

Example
// add node with redrawing
var firstAddedIds = tree.add({text:'FE development team1'}, parentId);
console.log(firstAddedIds); // ["tui-tree-node-10"]

// add node without redrawing
var secondAddedIds = tree.add([
   {text: 'FE development team2'},
   {text: 'FE development team3'}
], parentId, true);
console.log(secondAddedIds); // ["tui-tree-node-11", "tui-tree-node-12"]

changeContextMenu(newMenuData)

Change current context-menu view

Parameters:
Name Type Description
newMenuData Array.<Object>

New context menu data

Requires:
  • module:ContextMenu
Example
tree.changeContextMenu([
     {title: 'menu1'},
     {title: 'menu2', disable: true},
     {title: 'menu3', menu: [
         {title: 'submenu1', disable: true},
         {title: 'submenu2'}
     ]}
]);

check(nodeId)

Check node

Parameters:
Name Type Description
nodeId string

Node id

Example
var nodeId = 'tui-tree-node-3';
tree.check(nodeId);

close(nodeId, recursive)

Close node

Parameters:
Name Type Description
nodeId string

Node id

recursive boolean

If true, it close all child node (default: false)

Example
tree.close(nodeId, true);

contains(containerNodeId, containedNodeId) → {boolean}

Whether a node is a ancestor of another node.

Parameters:
Name Type Description
containerNodeId string

Id of a node that may contain the other node

containedNodeId string

Id of a node that may be contained by the other node

Returns:
boolean -

Whether a node contains another node

createChildNode(parentId)

Create child node

Parameters:
Name Type Description
parentId string

Parent node id to create new node

Requires:
  • module:Editable
Example
tree.createChildNode('tui-tree-node-1');

deselect(nodeId)

Deselect node by id

Parameters:
Name Type Description
nodeId string

Node id

Requires:
  • module:Selectable
Example
tree.deselect('tui-tree-node-3');

disableFeature(featureName) → {Tree}

Disable facility of tree

Parameters:
Name Type Description
featureName string

'Selectable', 'Draggable', 'Editable'

Returns:
Tree -

this

Example
tree
 .disableFeature('Selectable')
 .disableFeature('Draggable')
 .disableFeature('Editable')
 .disableFeature('Checkbox')
 .disableFeature('ContextMenu')
 .disableFeature('Ajax');

each(iteratee, parentId, contextopt)

Traverse this tree iterating over all descendants of a node.

Parameters:
Name Type Attributes Description
iteratee function

Iteratee function

parentId string

Parent node id

context object <optional>

Context of iteratee

Example
tree.each(function(node, nodeId) {
    console.log(node.getId() === nodeId); // true
}, parentId);

eachAll(iteratee, contextopt)

Traverse this tree iterating over all nodes.

Parameters:
Name Type Attributes Description
iteratee function

Iteratee function

context object <optional>

Context of iteratee

Example
tree.eachAll(function(node, nodeId) {
    console.log(node.getId() === nodeId); // true
});

editNode(nodeId)

Edit node

Parameters:
Name Type Description
nodeId string

Node id

Requires:
  • module:Editable
Example
tree.editNode('tui-tree-node-1');

enableFeature(featureName, optionsopt) → {Tree}

Enable facility of tree

Parameters:
Name Type Attributes Description
featureName string

'Selectable', 'Draggable', 'Editable', 'ContextMenu'

options object <optional>

Feature options

Returns:
Tree -

this

Example
tree
 .enableFeature('Selectable', {
     selectedClassName: 'tui-tree-selected'
 })
 .enableFeature('Editable', {
     enableClassName: tree.classNames.textClass,
     dataKey: 'text',
     defaultValue: 'new node',
     inputClassName: 'myInput'
 })
 .enableFeature('Draggable', {
     useHelper: true,
     helperPos: {x: 5, y: 2},
     rejectedTagNames: ['UL', 'INPUT', 'BUTTON'],
     rejectedClassNames: ['notDraggable', 'notDraggable-2'],
     autoOpenDelay: 1500,
     isSortable: true,
     hoverClassName: 'tui-tree-hover'
     lineClassName: 'tui-tree-line',
     lineBoundary: {
         top: 10,
         bottom: 10
     }
 })
 .enableFeature('Checkbox', {
     checkboxClassName: 'tui-tree-checkbox'
 })
 .enableFeature('ContextMenu', {
     menuData: [
         {title: 'menu1', command: 'copy'},
         {title: 'menu2', command: 'paste'},
         {separator: true},
         {
             title: 'menu3',
             menu: [
                 {title: 'submenu1'},
                 {title: 'submenu2'}
             ]
         }
     }
 })
 .enableFeature('Ajax', {
     command: {
         read: {
             url: 'api/read',
             dataType: 'json',
             type: 'get'
         },
         create: {
             url: 'api/create',
             dataType: 'json',
             type: 'post'
         },
         update: {
             url: 'api/update',
             dataType: 'json',
             type: 'post',
             data: {
                 paramA: 'a',
                 paramB: 'b'
             }
         },
         remove: {
             url: 'api/remove',
             dataType: 'json',
             type: 'post',
             data: function(params) {
                 return {
                     paramA: params.a,
                     paramB: params.b
                 };
             }
         },
         removeAllChildren: {
             url: function(params) {
                 return 'api/remove_all/' + params.nodeId,
             },
             dataType: 'json',
             type: 'post'
         },
         move: {
             url: 'api/move',
             dataType: 'json',
             type: 'post'
         }
     },
     parseData: function(type, response) {
         if (type === 'read' && response.code === '200') {
             return response;
         } else {
             return false;
         }
     }
 });

finishEditing()

Exit edit though remove input tag

Requires:
  • module:Editable
Example
tree.finishEditing();

getBottomCheckedList(parentIdopt) → {Array.<string>}

Get bottom checked list

Parameters:
Name Type Attributes Description
parentId string <optional>

Node id (default: rootNode id)

Returns:
Array.<string> -

Checked node ids

Example
//
// node1(v)
//   node2(v)
//   node3(v)
// node4
//   node5(v)
// node6
//   node7(v)
//     node8(v)
//   node9

var allBottomCheckedList = tree.getBottomCheckedList(); // ['node2', 'node3', 'node5', 'node8']
var descendantsBottomCheckedList = tree.getBottomCheekedList('node6'); // ['node8']

getCheckedList(parentIdopt) → {Array.<string>}

Get checked list

Parameters:
Name Type Attributes Description
parentId string <optional>

Node id (default: rootNode id)

Returns:
Array.<string> -

Checked node ids

Example
//
// node1(v)
//   node2(v)
//   node3(v)
// node4
//   node5(v)
// node6
//   node7(v)
//     node8(v)
//   node9

var allCheckedList = tree.getCheckedList(); // ['node1', 'node2', 'node3' ,....]
var descendantsCheckedList = tree.getCheekedList('node6'); // ['node7', 'node8']

getChildIds(nodeId) → {Array.<string>|undefined}

Return child ids

Parameters:
Name Type Description
nodeId string

Node id

Returns:
Array.<string> | undefined -

Child ids

getDepth(nodeId) → {number|undefined}

Return the depth of node

Parameters:
Name Type Description
nodeId string

Node id

Returns:
number | undefined -

Depth

getIndentWidth(nodeId) → {number}

calculate tree node's padding left

Parameters:
Name Type Description
nodeId string

Node id

Returns:
number -
  • padding left of tree node division

getLastDepth() → {number}

Return the last depth of tree

Returns:
number -

Last depth

getNodeData(nodeId) → {object|undefined}

Get node data

Parameters:
Name Type Description
nodeId string

Node id

Returns:
object | undefined -

Node data

getNodeIdFromElement(element) → {string}

Get node id from element

Parameters:
Name Type Description
element HTMLElement

Element

Returns:
string -

Node id

Example
tree.getNodeIdFromElement(elementInNode); // 'tui-tree-node-3'

getNodeIdPrefix() → {string}

Get prefix of node id

Returns:
string -

Prefix of node id

Example
tree.getNodeIdPrefix(); // 'tui-tree-node-'

getNodeIndex(nodeId) → {number}

Get index number of selected node

Parameters:
Name Type Description
nodeId string

Id of selected node

Returns:
number -

Index number of attached node

getParentId(nodeId) → {string|undefined}

Return parent id of node

Parameters:
Name Type Description
nodeId string

Node id

Returns:
string | undefined -

Parent id

getRootNodeId() → {string}

Return root node id

Returns:
string -

Root node id

getSelectedNodeId() → {string}

Get selected node id

Returns:
string -

selected node id

getState(nodeId) → {string|null}

Get node state.

Parameters:
Name Type Description
nodeId string

Node id

Returns:
string | null -

Node state(('opened', 'closed', null)

Example
tree.getState(nodeId); // 'opened', 'closed',
                       // undefined if the node is nonexistent

getTopCheckedList(parentIdopt) → {Array.<string>}

Get top checked list

Parameters:
Name Type Attributes Description
parentId string <optional>

Node id (default: rootNode id)

Returns:
Array.<string> -

Checked node ids

Example
//
// node1(v)
//   node2(v)
//   node3(v)
// node4
//   node5(v)
// node6
//   node7(v)
//     node8(v)
//   node9

var allTopCheckedList = tree.getTopCheckedList(); // ['node1', 'node5', 'node7']
var descendantsTopCheckedList = tree.getTopCheekedList('node6'); // ['node7']

isChecked(nodeId) → {boolean}

Whether the node is checked

Parameters:
Name Type Description
nodeId string

Node id

Returns:
boolean -

True if node is indeterminate

Example
var nodeId = 'tui-tree-node-3';
tree.check(nodeId);
console.log(tree.isChecked(nodeId)); // true

isIndeterminate(nodeId) → {boolean}

Whether the node is indeterminate

Parameters:
Name Type Description
nodeId string

Node id

Returns:
boolean -

True if node is indeterminate

Example
var nodeId = 'tui-tree-node-3';
tree.check(nodeId);
console.log(tree.isIndeterminate(nodeId)); // false

isLeaf(nodeId) → {boolean}

Whether the node is leaf

Parameters:
Name Type Description
nodeId string

Node id

Returns:
boolean -

True if the node is leaf.

isUnchecked(nodeId) → {boolean}

Whether the node is unchecked or not

Parameters:
Name Type Description
nodeId string

Node id

Returns:
boolean -

True if node is unchecked.

Example
var nodeId = 'tui-tree-node-3';
tree.uncheck(nodeId);
console.log(tree.isUnchecked(nodeId)); // true

move(nodeId, newParentId, index, optionsopt)

Move a node to new parent

  • If 'isSilent' is not true, it redraws the tree
Parameters:
Name Type Attributes Description
nodeId string

Node id

newParentId string

New parent id

index number

Index number of selected node

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't trigger the 'update' event

useAjax boolean <optional>

State of using Ajax

Example
tree.move(myNodeId, newParentId); // mode node with redrawing
tree.move(myNodeId, newParentId, true); // move node without redrawing

open(nodeId, recursive)

Open node

Parameters:
Name Type Description
nodeId string

Node id

recursive boolean

If true, it open all parent (default: false)

Example
tree.open(nodeId ,true);

refresh(nodeIdopt)

Refresh tree or node's children

Parameters:
Name Type Attributes Description
nodeId string <optional>

TreeNode id to refresh

remove(nodeId, optionsopt)

Remove a node with children.

  • If 'isSilent' is not true, it redraws the tree
Parameters:
Name Type Attributes Description
nodeId string

Node id to remove

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't redraw children

useAjax boolean <optional>

State of using Ajax

Example
tree.remove(myNodeId); // remove node with redrawing
tree.remove(myNodeId, true); // remove node without redrawing

removeAllChildren(nodeId, optionsopt)

Remove all children

Parameters:
Name Type Attributes Description
nodeId string

Parent node id

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't redraw the node

useAjax boolean <optional>

State of using Ajax

Example
tree.removeAllChildren(nodeId); // Redraws the node
tree.removeAllChildren(nodId, true); // Doesn't redraw the node

removeNodeData(nodeId, names, optionsopt)

Remove node data

Parameters:
Name Type Attributes Description
nodeId string

Node id

names string | Array

Names of properties

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't trigger the 'update' event

useAjax boolean <optional>

State of using Ajax

Example
tree.setNodeData(nodeId, 'foo'); // auto refresh
tree.setNodeData(nodeId, 'foo', true); // not refresh

resetAllData(data, optionsopt)nullable {Array.<string>}

Reset all data

Parameters:
Name Type Attributes Description
data Array | object

Raw data for all nodes

options object <optional>

Options

Properties
Name Type Attributes Description
nodeId string <optional>

Parent node id to reset all child data

useAjax boolean <optional>

State of using Ajax

Returns:
Array.<string> -

Added node ids

Example
tree.resetAllData([
 {text: 'hello', children: [
     {text: 'foo'},
     {text: 'bar'}
 ]},
 {text: 'world'}
]);
tree.resetAllData([
 {text: 'hello world'}
], {
 nodeId: 'tui-tree-node-5',
 useAjax: true
});

resetClickTimer()

Reset click timer

Search node ids by passing the predicate check or matching data

Parameters:
Name Type Attributes Description
predicate function | Object

Predicate or data

context Object <optional>

Context of predicate

Returns:
Array.<string> -

Node ids

Example
// search from predicate
var leafNodeIds = tree.search(function(node, nodeId) {
    return node.isLeaf();
});
console.log(leafNodeIds); // ['tui-tree-node-3', 'tui-tree-node-5']

// search from data
var specialNodeIds = tree.search({
    isSpecial: true,
    foo: 'bar'
});
console.log(specialNodeIds); // ['tui-tree-node-5', 'tui-tree-node-10']
console.log(tree.getNodeData('tui-tree-node-5').isSpecial); // true
console.log(tree.getNodeData('tui-tree-node-5').foo); // 'bar'

select(nodeId)

Select node if the feature-"Selectable" is enabled.

Parameters:
Name Type Description
nodeId string

Node id

Requires:
  • module:Selectable
Example
tree.select('tui-tree-node-3');

setNodeData(nodeId, data, optionsopt)

Set data properties of a node

Parameters:
Name Type Attributes Description
nodeId string

Node id

data object

Properties

options object <optional>

Options

Properties
Name Type Attributes Description
isSilent boolean <optional>

If true, it doesn't trigger the 'update' event

useAjax boolean <optional>

State of using Ajax

sort(comparator, isSilentopt, parentIdopt)

Sort all nodes

Parameters:
Name Type Attributes Description
comparator function

Comparator for sorting

isSilent boolean <optional>

If true, it doesn't redraw tree

parentId string <optional>

Id of a node to sort partially

Example
var comparator = function(nodeA, nodeB) {
    var aValue = nodeA.getData('text'),
        bValue = nodeB.getData('text');

    if (!bValue || !bValue.localeCompare) {
        return 0;
    }
    return bValue.localeCompare(aValue);
};

// Sort with redrawing tree
tree.sort(comparator);

// Sort, but not redraw tree
tree.sort(comparator, true);

// Sort partially
tree.sort(comparator, false, parentId)

toggle(nodeId)

Toggle node

Parameters:
Name Type Description
nodeId string

Node id

toggleCheck(nodeId)

Toggle node checking

Parameters:
Name Type Description
nodeId string

Node id

Example
var nodeId = 'tui-tree-node-3';
tree.toggleCheck(nodeId);

uncheck(nodeId)

Uncheck node

Parameters:
Name Type Description
nodeId string

Node id

Example
var nodeId = 'tui-tree-node-3';
tree.uncheck(nodeId);

Events

afterDraw

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Node id

Example
tree.on('afterDraw', function(evt) {
    if (tree.isMovingNode) {
        console.log('isMovingNode');
    }
    console.log('afterDraw: ' + evt.nodeId);
});

beforeAjaxRequest

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Attributes Description
command string

Command type

data object <optional>

Request data

Example
tree.on('beforeAjaxRequest', function(evt) {
    console.log('before ' + evt.command + ' request!');
    return false; // It cancels request
    // return true; // It fires request
});

beforeCreateChildNode

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
value string

Return value of creating input element

nodeId string

Return id of creating node

cause string

Return 'blur' or 'enter' according cause of the event

Example
tree
 .enableFeature('Editable')
 .on('beforeCreateChildNode', function(evt) {
     console.log(evt.value);
     console.log(evt.nodeId);
     console.log(evt.cause);
     return false; // It cancels
     // return true; // It execute next
 });

beforeDraw

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Node id

Example
tree.on('beforeDraw', function(evt) {
    if (tree.isMovingNode) {
        console.log('isMovingNode');
    }
    console.log('beforeDraw: ' + evt.nodeId);
});

beforeEditNode

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
value string

Return value of creating input element

nodeId string

Return id of editing node

cause string

Return 'blur' or 'enter' according cause of the event

Example
tree
 .enableFeature('Editable')
 .on('beforeEditNode', function(evt) {
     console.log(evt.value);
     console.log(evt.nodeId);
     console.log(evt.cause);
     return false; // It cancels
     // return true; // It execute next
 });

beforeMove

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Current dragging node id

newParentId string

New parent id

Example
tree.on('beforeMove', function(evt) {
     console.log('dragging node: ' + evt.nodeId);
     console.log('new parent node: ' + evt.newParentId);
     console.log('original parent node: ' + tree.getParentId(evt.nodeId));

     return false; // Cancel "move" event
     // return true; // Fire "move" event
});

beforeOpenContextMenu

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Current selected node id

Example
tree.on('beforeOpenContextMenu', function(evt) {
    console.log('nodeId: ' + evt.nodeId);
});

beforeSelect

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Selected node id

prevNodeId string

Previous selected node id

target HTMLElement | undefined

Target element

Example
tree
 .enableFeature('Selectable')
 .on('beforeSelect', function(evt) {
     console.log('selected node: ' + evt.nodeId);
     console.log('previous selected node: ' + evt.prevNodeId);
     console.log('target element: ' + evt.target);
     return false; // It cancels "select"
     // return true; // It fires "select"
 });

check

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Checked node id

Example
tree.on('check', function(evt) {
    console.log('checked: ' + evt.nodeId);
});

clickToggleBtn

Parameters:
Name Type Description
evt object

Event data

Properties
Name Type Description
nodeId string

Node id

target HTMLElement

Element of toggle button

Example
tree.on('clickToggleBtn', function(evt) {
    console.log(evt.target);
});

deselect

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Deselected node id

Example
tree
 .enableFeature('Selectable')
 .on('deselect', function(evt) {
     console.log('deselected node: ' + evt.nodeId);
 });

errorAjaxResponse

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
command string

Command type

Example
tree.on('errorAjaxResponse', function(evt) {
    console.log(evt.command + ' response is error!');
});

failAjaxResponse

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
command string

Command type

Example
tree.on('failAjaxResponse', function(evt) {
    console.log(evt.command + ' response is fail!');
});

move

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Current node id to move

originalParentId string

Original parent node id of moved node

newParentId string

New parent node id of moved node

index number

Moved index number

Example
tree.on('move', function(evt) {
    var nodeId = evt.nodeId;
    var originalParentId = evt.originalParentId;
    var newParentId = evt.newParentId;
    var index = evt.index;

    console.log(nodeId, originalParentId, newParentId, index);
});

select

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Selected node id

prevNodeId string

Previous selected node id

target HTMLElement | undefined

Target element

Example
tree
 .enableFeature('Selectable')
 .on('select', function(evt) {
     console.log('selected node: ' + evt.nodeId);
     console.log('previous selected node: ' + evt.prevNodeId);
     console.log('target element: ' + evt.target);
 });

selectContextMenu

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
cmd string

Command type

nodeId string

Node id

Example
tree.on('selectContextMenu', function(evt) {
    var cmd = treeEvent.cmd; // key of context menu's data
    var nodeId = treeEvent.nodeId;

    console.log(evt.cmd, evt.nodeId);
});

successAjaxResponse

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Attributes Description
command string

Command type

data object <optional>

Return value of executed command callback

Example
tree.on('successAjaxResponse', function(evt) {
    console.log(evt.command + ' response is success!');
    if (data) {
          console.log('data:' + evt.data);
    }
});

uncheck

Parameters:
Name Type Description
evt Object

Event data

Properties
Name Type Description
nodeId string

Unchecked node id

Example
tree.on('uncheck', function(evt) {
    console.log('unchecked: ' + evt.nodeId);
});