logo

/Tree|v3.5.2

Class

new Tree(container, options)tree.jsline 159

Create tree model and inject data to model

PARAMETERS
NameTypeDescription

container

stringHTMLElementjQueryObject

Tree container element or id string value

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

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 1147

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 98

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 448

Check node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

close(nodeId, recursive)tree.jsline 968

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 1487

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 127

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 189

Deselect node by id

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

disableFeature(featureName)tree.jsline 1616

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 1121

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 1106

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 155

Edit node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

enableFeature(featureName, options)tree.jsline 1592

Enable facility of tree

PARAMETERS
NameTypeDescription

featureName

string

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

options

[ object ]

Feature options

RETURNS:
{

Tree

} - this
EXAMPLES
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()editable.jsline 167

Exit edit though remove input tag

EXAMPLES
tree.finishEditing();

getBottomCheckedList(parentId)checkbox.jsline 618

Get bottom 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 allBottomCheckedList = tree.getBottomCheckedList(); // ['node2', 'node3', 'node5', 'node8']
var descendantsBottomCheckedList = tree.getBottomCheekedList('node6'); // ['node8']

getCheckedList(parentId)checkbox.jsline 546

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 755

Return child ids

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

Array.<string>undefined

} - Child ids

getDepth(nodeId)tree.jsline 730

Return the depth of node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

numberundefined

} - Depth

getIndentWidth(nodeId)tree.jsline 619

calculate tree node's padding left

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

number

} - padding left of tree node division

getLastDepth()tree.jsline 738

Return the last depth of tree

RETURNS:
{

number

} - Last depth

getNodeData(nodeId)tree.jsline 808

Get node data

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

objectundefined

} - Node data

getNodeIdFromElement(element)tree.jsline 783

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 799

Get prefix of node id

RETURNS:
{

string

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

getNodeIndex(nodeId)tree.jsline 1632

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 764

Return parent id of node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

stringundefined

} - Parent id

getRootNodeId()tree.jsline 746

Return root node id

RETURNS:
{

string

} - Root node id

getSelectedNodeId()selectable.jsline 177

Get selected node id

RETURNS:
{

string

} - selected node id

getState(nodeId)tree.jsline 902

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 579

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 494

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 508

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 1475

Whether the node is leaf

PARAMETERS
NameTypeDescription

nodeId

string

Node id

RETURNS:
{

boolean

} - True if the node is leaf.

isUnchecked(nodeId)checkbox.jsline 522

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 1336

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 918

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 1092

Refresh tree or node's children

PARAMETERS
NameTypeDescription

nodeId

[ string ]

TreeNode id to refresh

remove(nodeId, options)tree.jsline 1295

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 1249

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 864

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 1204

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 771

Reset click timer

select(nodeId, target)selectable.jsline 101

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

PARAMETERS
NameTypeDescription

nodeId

string

Node id

target

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

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

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 1080

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 1013

Toggle node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

toggleCheck(nodeId)checkbox.jsline 476

Toggle node checking

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

uncheck(nodeId)checkbox.jsline 462

Uncheck node

PARAMETERS
NameTypeDescription

nodeId

string

Node id

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

Events

afterDrawtree.jsline 672

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 127

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 239

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 648

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 266

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 1385

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 193

PROPERTIES
NameTypeDescription

nodeId

string

Current selected node id

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

beforeSelectselectable.jsline 132

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 286

PROPERTIES
NameTypeDescription

nodeId

string

Checked node id

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

clickToggleBtntree.jsline 413

PROPERTIES
NameTypeDescription

nodeId

string

Node id

target

HTMLElement

Element of toggle button

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

deselectselectable.jsline 212

PROPERTIES
NameTypeDescription

nodeId

string

Deselected node id

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

errorAjaxResponseajax.jsline 215

PROPERTIES
NameTypeDescription

command

string

Command type

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

failAjaxResponseajax.jsline 194

PROPERTIES
NameTypeDescription

command

string

Command type

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

movetree.jsline 307

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 155

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 218

PROPERTIES
NameTypeDescription

cmd

string

Command type

nodeId

string

Node id

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

successAjaxResponseajax.jsline 180

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 297

PROPERTIES
NameTypeDescription

nodeId

string

Unchecked node id

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