new Tree(container, options)tree.jsline 159
Create tree model and inject data to model
PARAMETERS
Name Type Description container
stringHTMLElementjQueryObject
Tree container element or id string value
options
Object
The options
PROPERTIES
Name Type Description 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
Name Type Description opened
[ string ]
State-OPENED label
closed
[ string ]
State-CLOSED label
template
[ Object ]
A markup set to make element
PROPERTIES
Name Type Description 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 1155
Add node(s).
PARAMETERS
Name Type Description data
Arrayobject
Raw-data
parentId
[ * ]
Parent id
options
[ object ]
Options
PROPERTIES
Name Type Description isSilent
[ boolean ]
If true, it doesn't redraw children
useAjax
[ boolean ]
State of using Ajax
RETURNS:
{Array
} - Added node idsEXAMPLES
// 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 99
Change current context-menu view
PARAMETERS
Name Type Description 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
Name Type Description nodeId
string
Node id
EXAMPLES
var nodeId = 'tui-tree-node-3'; tree.check(nodeId);
contains(containerNodeId, containedNodeId)tree.jsline 1495
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)editable.jsline 127
Create child node
PARAMETERS
Name Type Description 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
Name Type Description nodeId
string
Node id
EXAMPLES
tree.deselect('tui-tree-node-3');
disableFeature(featureName)tree.jsline 1636
Disable facility of tree
PARAMETERS
Name Type Description featureName
string
'Selectable', 'Draggable', 'Editable'
RETURNS:
{Tree
} - thisEXAMPLES
tree .disableFeature('Selectable') .disableFeature('Draggable') .disableFeature('Editable') .disableFeature('Checkbox') .disableFeature('ContextMenu') .disableFeature('Ajax');
each(iteratee, parentId, context)tree.jsline 1129
Traverse this tree iterating over all descendants of a node.
PARAMETERS
Name Type Description 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);
editNode(nodeId)editable.jsline 155
Edit node
PARAMETERS
Name Type Description nodeId
string
Node id
EXAMPLES
tree.editNode('tui-tree-node-1');
enableFeature(featureName, options)tree.jsline 1600
Enable facility of tree
PARAMETERS
Name Type Description featureName
string
'Selectable', 'Draggable', 'Editable', 'ContextMenu'
options
[ object ]
Feature options
RETURNS:
{Tree
} - thisEXAMPLES
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
Name Type Description parentId
[ string ]
Node id (default: rootNode id)
RETURNS:
{Array.<string>
} - Checked node idsEXAMPLES
// // 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
Name Type Description parentId
[ string ]
Node id (default: rootNode id)
RETURNS:
{Array.<string>
} - Checked node idsEXAMPLES
// // 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']
getSelectedNodeId()selectable.jsline 177
Get selected node id
RETURNS:
{string
} - selected node id
getTopCheckedList(parentId)checkbox.jsline 579
Get top checked list
PARAMETERS
Name Type Description parentId
[ string ]
Node id (default: rootNode id)
RETURNS:
{Array.<string>
} - Checked node idsEXAMPLES
// // 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
Name Type Description nodeId
string
Node id
RETURNS:
{boolean
} - True if node is indeterminateEXAMPLES
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
Name Type Description nodeId
string
Node id
RETURNS:
{boolean
} - True if node is indeterminateEXAMPLES
var nodeId = 'tui-tree-node-3'; tree.check(nodeId); console.log(tree.isIndeterminate(nodeId)); // false
isUnchecked(nodeId)checkbox.jsline 522
Whether the node is unchecked or not
PARAMETERS
Name Type Description 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 1344
Move a node to new parent
PARAMETERS
Name Type Description nodeId
string
Node id
newParentId
string
New parent id
index
number
Index number of selected node
options
[ object ]
Options
PROPERTIES
Name Type Description 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
remove(nodeId, options)tree.jsline 1303
Remove a node with children.
PARAMETERS
Name Type Description nodeId
string
Node id to remove
options
[ object ]
Options
PROPERTIES
Name Type Description 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 1257
Remove all children
PARAMETERS
Name Type Description nodeId
string
Parent node id
options
[ object ]
Options
PROPERTIES
Name Type Description 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 872
Remove node data
PARAMETERS
Name Type Description nodeId
string
Node id
names
stringArray
Names of properties
options
[ object ]
Options
PROPERTIES
Name Type Description 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 1212
Reset all data
PARAMETERS
Name Type Description data
Arrayobject
Raw data for all nodes
options
[ object ]
Options
PROPERTIES
Name Type Description nodeId
[ string ]
Parent node id to reset all child data
useAjax
[ boolean ]
State of using Ajax
RETURNS:
{Array
} - Added node idsEXAMPLES
tree.resetAllData([ {text: 'hello', children: [ {text: 'foo'}, {text: 'bar'} ]}, {text: 'world'} ]); tree.resetAllData([ {text: 'hello world'} ], { nodeId: 'tui-tree-node-5', useAjax: true });
search(predicate, context)tree.jsline 1426
Search node ids by passing the predicate check or matching data
PARAMETERS
Name Type Description predicate
FunctionObject
Predicate or data
context
[ Object ]
Context of predicate
RETURNS:
{Array.<string>
} - Node idsEXAMPLES
// 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, target)selectable.jsline 101
Select node if the feature-"Selectable" is enabled.
PARAMETERS
Name Type Description nodeId
string
Node id
target
EXAMPLES
tree.select('tui-tree-node-3');
setNodeData(nodeId, data, options)tree.jsline 831
Set data properties of a node
PARAMETERS
Name Type Description nodeId
string
Node id
data
object
Properties
options
[ object ]
Options
PROPERTIES
Name Type Description isSilent
[ boolean ]
If true, it doesn't trigger the 'update' event
useAjax
[ boolean ]
State of using Ajax
sort(comparator, isSilent, parentId)tree.jsline 1088
Sort all nodes
PARAMETERS
Name Type Description 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)
toggleCheck(nodeId)checkbox.jsline 476
Toggle node checking
PARAMETERS
Name Type Description nodeId
string
Node id
EXAMPLES
var nodeId = 'tui-tree-node-3'; tree.toggleCheck(nodeId);
uncheck(nodeId)checkbox.jsline 462
Uncheck node
PARAMETERS
Name Type Description nodeId
string
Node id
EXAMPLES
var nodeId = 'tui-tree-node-3'; tree.uncheck(nodeId);
Events
beforeCreateChildNodeeditable.jsline 239
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
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 });
beforeEditNodeeditable.jsline 266
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
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 1393
PROPERTIES
Name Type Description 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 197
PROPERTIES
Name Type Description nodeId
string
Current selected node id
EXAMPLES
tree.on('beforeOpenContextMenu', function(evt) { console.log('nodeId: ' + evt.nodeId); });
beforeSelectselectable.jsline 132
PROPERTIES
Name Type Description 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
Name Type Description nodeId
string
Checked node id
EXAMPLES
tree.on('check', function(evt) { console.log('checked: ' + evt.nodeId); });
deselectselectable.jsline 212
PROPERTIES
Name Type Description nodeId
string
Deselected node id
EXAMPLES
tree .enableFeature('Selectable') .on('deselect', function(evt) { console.log('deselected node: ' + evt.nodeId); });
movetree.jsline 315
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
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
Name Type Description 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 222
PROPERTIES
Name Type Description 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
Name Type Description 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
Name Type Description nodeId
string
Unchecked node id
EXAMPLES
tree.on('uncheck', function(evt) { console.log('unchecked: ' + evt.nodeId); });