logo

/Tree|v4.0.3

Class

new Tree(container, options)tree.jsline 176

Create tree model and inject data to model

PARAMETERS
NameTypeDescription

container

stringHTMLElement

Container element or selector

options

Object

The options

PROPERTIES
NameTypeDescription

data

[ Object ]

A data to be used on tree

nodeIdPrefix

[ string ]

A default prefix of a node

nodeDefaultState

[ Object ]

A default state of a node

stateLabels

[ Object ]

Toggle button state label

PROPERTIES
NameTypeDescription

opened

[ string ]

State-OPENED label

closed

[ string ]

State-CLOSED label

template

[ Object ]

A markup set to make element

PROPERTIES
NameTypeDescription

internalNode

[ string ]

HTML template

leafNode

[ string ]

HTML template

renderTemplate

[ Function ]

Function for rendering template. Default is template in the tui-code-snippet.

usageStatistics

boolean = true

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

EXAMPLES

Get 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);
    }
});

Instance Methods

add(data, parentId, options)tree.jsline 1218

Add node(s).

PARAMETERS
NameTypeDescription

data

Arrayobject

Raw-data

parentId

[ * ]

Parent id

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

If true, it doesn't redraw children

useAjax

[ boolean ]

State of using Ajax

RETURNS:
{

Array

} - Added node ids
EXAMPLES
// 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)contextMenu.jsline 102

Change current context-menu view

PARAMETERS
NameTypeDescription

newMenuData

Array.<Object>

New context menu data

EXAMPLES
tree.changeContextMenu([
     {title: 'menu1'},
     {title: 'menu2', disable: true},
     {title: 'menu3', menu: [
         {title: 'submenu1', disable: true},
         {title: 'submenu2'}
     ]}
]);

check(nodeId)checkbox.jsline 466

Check node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

close(nodeId, recursive)tree.jsline 1034

Close node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

recursive

boolean

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

EXAMPLES
tree.close(nodeId, true);

contains(containerNodeId, containedNodeId)tree.jsline 1584

Whether a node is a ancestor of another node.

PARAMETERS
NameTypeDescription

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)editable.jsline 134

Create child node

PARAMETERS
NameTypeDescription

parentId

string

Parent node id to create new node

EXAMPLES
tree.createChildNode('tui-tree-node-1');

deselect(nodeId)selectable.jsline 210

Deselect node by id

PARAMETERS
NameTypeDescription

nodeId

string

Node id

EXAMPLES
tree.deselect('tui-tree-node-3');

disableFeature(featureName)tree.jsline 1726

Disable facility of tree

PARAMETERS
NameTypeDescription

featureName

string

'Selectable', 'Draggable', 'Editable'

RETURNS:
{

Tree

} - this
EXAMPLES
tree
 .disableFeature('Selectable')
 .disableFeature('Draggable')
 .disableFeature('Editable')
 .disableFeature('Checkbox')
 .disableFeature('ContextMenu')
 .disableFeature('Ajax');

each(iteratee, parentId, context)tree.jsline 1192

Traverse this tree iterating over all descendants of a node.

PARAMETERS
NameTypeDescription

iteratee

Function

Iteratee function

parentId

string

Parent node id

context

[ object ]

Context of iteratee

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

eachAll(iteratee, context)tree.jsline 1177

Traverse this tree iterating over all nodes.

PARAMETERS
NameTypeDescription

iteratee

Function

Iteratee function

context

[ object ]

Context of iteratee

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

editNode(nodeId)editable.jsline 161

Edit node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

EXAMPLES
tree.editNode('tui-tree-node-1');

enableFeature(featureName, options)tree.jsline 1690

Enable facility of tree
Ajax feature options: https://github.com/nhn/tui.tree/blob/master/docs/ajax-feature.md

PARAMETERS
NameTypeDescription

featureName

string

'Selectable', 'Editable', 'Draggable', 'Checkbox', 'ContextMenu', 'Ajax'

options

[ object ]

Feature options

RETURNS:
{

Tree

} - this
EXAMPLES
tree
 .enableFeature('Selectable', {
     selectedClassName: 'tui-tree-selected'
 })
 .enableFeature('Editable', {
     editableClassName: 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',
             contentType: 'application/json',
             method: 'GET'
         },
         create: {
             url: 'api/create',
             contentType: 'application/json',
             method: 'POST'
         },
         update: {
             url: 'api/update',
             contentType: 'application/json',
             method: 'POST',
             params: {
                 paramA: 'a',
                 paramB: 'b'
             }
         },
         remove: {
             url: 'api/remove',
             contentType: 'application/json',
             method: 'POST',
             params: function(evt) {
                 return {
                     paramA: evt.a,
                     paramB: evt.b
                 };
             }
         },
         removeAllChildren: {
             url: function(evt) {
                 return 'api/remove_all/' + evt.nodeId,
             },
             contentType: 'application/json',
             method: 'POST'
         },
         move: {
             url: 'api/move',
             contentType: 'application/json',
             method: 'POST'
         }
     },
     parseData: function(command, responseData) {
         if (responseData) {
             return responseData;
         } else {
             return false;
         }
     }
 });

finishEditing()editable.jsline 173

Exit edit though remove input tag

EXAMPLES
tree.finishEditing();

getBottomCheckedList(parentId)checkbox.jsline 627

Get bottom checked list

PARAMETERS
NameTypeDescription

parentId

[ string ]

Node id (default: rootNode id)

RETURNS:
{

Array.<string>

} - Checked node ids
EXAMPLES
var allBottomCheckedList = tree.getBottomCheckedList(); // ['node2', 'node3', 'node5', 'node8']
var descendantsBottomCheckedList = tree.getBottomCheekedList('node6'); // ['node8']

getCheckedList(parentId)checkbox.jsline 563

Get checked list

PARAMETERS
NameTypeDescription

parentId

[ string ]

Node id (default: rootNode id)

RETURNS:
{

Array.<string>

} - Checked node ids
EXAMPLES
// ├─ 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)tree.jsline 815

Return child ids

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

Array.<string>undefined

} - Child ids

getDepth(nodeId)tree.jsline 790

Return the depth of node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

numberundefined

} - Depth

getIndentWidth(nodeId)tree.jsline 657

calculate tree node's padding left

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

number

} - padding left of tree node division

getLastDepth()tree.jsline 798

Return the last depth of tree

RETURNS:
{

number

} - Last depth

getNodeData(nodeId)tree.jsline 868

Get node data

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

objectundefined

} - Node data

getNodeIdFromElement(element)tree.jsline 843

Get node id from element

PARAMETERS
NameTypeDescription

element

HTMLElement

Element

RETURNS:
{

string

} - Node id
EXAMPLES
tree.getNodeIdFromElement(elementInNode); // 'tui-tree-node-3'

getNodeIdPrefix()tree.jsline 859

Get prefix of node id

RETURNS:
{

string

} - Prefix of node id
EXAMPLES
tree.getNodeIdPrefix(); // 'tui-tree-node-'

getNodeIndex(nodeId)tree.jsline 1742

Get index number of selected node

PARAMETERS
NameTypeDescription

nodeId

string

Id of selected node

RETURNS:
{

number

} - Index number of attached node

getParentId(nodeId)tree.jsline 824

Return parent id of node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

stringundefined

} - Parent id

getRootNodeId()tree.jsline 806

Return root node id

RETURNS:
{

string

} - Root node id

getSelectedNodeId()selectable.jsline 198

Get selected node id

RETURNS:
{

string

} - selected node id

getState(nodeId)tree.jsline 968

Get node state.

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

stringnull

} - Node state(('opened', 'closed', null)
EXAMPLES
tree.getState(nodeId); // 'opened', 'closed',
                       // undefined if the node is nonexistent

getTopCheckedList(parentId)checkbox.jsline 595

Get top checked list

PARAMETERS
NameTypeDescription

parentId

[ string ]

Node id (default: rootNode id)

RETURNS:
{

Array.<string>

} - Checked node ids
EXAMPLES
// ├─ 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)checkbox.jsline 512

Whether the node is checked

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

boolean

} - True if node is indeterminate
EXAMPLES
var nodeId = 'tui-tree-node-3';
tree.check(nodeId);
console.log(tree.isChecked(nodeId)); // true

isIndeterminate(nodeId)checkbox.jsline 526

Whether the node is indeterminate

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

boolean

} - True if node is indeterminate
EXAMPLES
var nodeId = 'tui-tree-node-3';
tree.check(nodeId);
console.log(tree.isIndeterminate(nodeId)); // false

isLeaf(nodeId)tree.jsline 1572

Whether the node is leaf

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

boolean

} - True if the node is leaf.

isUnchecked(nodeId)checkbox.jsline 540

Whether the node is unchecked or not

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

boolean

} - True if node is unchecked.
EXAMPLES
var nodeId = 'tui-tree-node-3';
tree.uncheck(nodeId);
console.log(tree.isUnchecked(nodeId)); // true

move(nodeId, newParentId, index, options)tree.jsline 1423

Move a node to new parent

PARAMETERS
NameTypeDescription

nodeId

string

Node id

newParentId

string

New parent id

index

number

Index number of selected node

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

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

useAjax

[ boolean ]

State of using Ajax

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

open(nodeId, recursive)tree.jsline 984

Open node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

recursive

boolean

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

EXAMPLES
tree.open(nodeId ,true);

refresh(nodeId)tree.jsline 1163

Refresh tree or node's children

PARAMETERS
NameTypeDescription

nodeId

[ string ]

TreeNode id to refresh

remove(nodeId, options)tree.jsline 1379

Remove a node with children.

PARAMETERS
NameTypeDescription

nodeId

string

Node id to remove

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

If true, it doesn't redraw children

useAjax

[ boolean ]

State of using Ajax

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

removeAllChildren(nodeId, options)tree.jsline 1326

Remove all children

PARAMETERS
NameTypeDescription

nodeId

string

Parent node id

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

If true, it doesn't redraw the node

useAjax

[ boolean ]

State of using Ajax

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

removeNodeData(nodeId, names, options)tree.jsline 927

Remove node data

PARAMETERS
NameTypeDescription

nodeId

string

Node id

names

stringArray

Names of properties

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

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

useAjax

[ boolean ]

State of using Ajax

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

resetAllData(data, options)tree.jsline 1278

Reset all data

PARAMETERS
NameTypeDescription

data

Arrayobject

Raw data for all nodes

options

[ object ]

Options

PROPERTIES
NameTypeDescription

nodeId

[ string ]

Parent node id to reset all child data

useAjax

[ boolean ]

State of using Ajax

RETURNS:
{

Array

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

resetClickTimer()tree.jsline 831

Reset click timer

select(nodeId)selectable.jsline 181

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

PARAMETERS
NameTypeDescription

nodeId

string

Node id

EXAMPLES
tree.select('tui-tree-node-3');

setNodeData(nodeId, data, options)tree.jsline 883

Set data properties of a node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

data

object

Properties

options

[ object ]

Options

PROPERTIES
NameTypeDescription

isSilent

[ boolean ]

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

useAjax

[ boolean ]

State of using Ajax

sort(comparator, isSilent, parentId)tree.jsline 1151

Sort all nodes

PARAMETERS
NameTypeDescription

comparator

Function

Comparator for sorting

isSilent

[ boolean ]

If true, it doesn't redraw tree

parentId

[ string ]

Id of a node to sort partially

EXAMPLES
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)tree.jsline 1079

Toggle node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

toggleCheck(nodeId)checkbox.jsline 494

Toggle node checking

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

uncheck(nodeId)checkbox.jsline 480

Uncheck node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

Events

afterDrawtree.jsline 710

PROPERTIES
NameTypeDescription

nodeId

string

Node id

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

beforeAjaxRequestajax.jsline 133

PROPERTIES
NameTypeDescription

command

string

Command type

data

[ object ]

Request data

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

beforeCreateChildNodeeditable.jsline 245

PROPERTIES
NameTypeDescription

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

EXAMPLES
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
 });

beforeDrawtree.jsline 686

PROPERTIES
NameTypeDescription

nodeId

string

Node id

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

beforeEditNodeeditable.jsline 272

PROPERTIES
NameTypeDescription

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

EXAMPLES
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
 });

beforeMovetree.jsline 1480

PROPERTIES
NameTypeDescription

nodeId

string

Current dragging node id

newParentId

string

New parent id

EXAMPLES
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
});

beforeOpenContextMenucontextMenu.jsline 196

PROPERTIES
NameTypeDescription

nodeId

string

Current selected node id

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

beforeSelectselectable.jsline 137

PROPERTIES
NameTypeDescription

nodeId

string

Selected node id

prevNodeId

string

Previous selected node id

target

HTMLElementundefined

Target element

EXAMPLES
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"
 });

checkcheckbox.jsline 299

PROPERTIES
NameTypeDescription

nodeId

string

Checked node id

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

clickToggleBtntree.jsline 449

PROPERTIES
NameTypeDescription

nodeId

string

Node id

target

HTMLElement

Element of toggle button

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

deselectselectable.jsline 233

PROPERTIES
NameTypeDescription

nodeId

string

Deselected node id

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

errorAjaxResponseajax.jsline 227

PROPERTIES
NameTypeDescription

command

string

Command type

status

number

Error status code

statusText

string

Error status text

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

failAjaxResponseajax.jsline 202

PROPERTIES
NameTypeDescription

command

string

Command type

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

movetree.jsline 332

PROPERTIES
NameTypeDescription

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

EXAMPLES
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);
});

selectselectable.jsline 164

PROPERTIES
NameTypeDescription

nodeId

string

Selected node id

prevNodeId

string

Previous selected node id

target

HTMLElementundefined

Target element

EXAMPLES
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);
 });

selectContextMenucontextMenu.jsline 221

PROPERTIES
NameTypeDescription

command

string

Command type

nodeId

string

Node id

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

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

successAjaxResponseajax.jsline 188

PROPERTIES
NameTypeDescription

command

string

Command type

data

[ object ]

Return value of executed command callback

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

uncheckcheckbox.jsline 310

PROPERTIES
NameTypeDescription

nodeId

string

Unchecked node id

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