Functions: Tree

Index

• addChildNodes
• appendChildNode
• checkNode
• clear
• closeNode
• filter
• flattenChildNodes
• flattenNode
• getChildNodes
• getNodeById
• getNodeFromPoint
• getOpenNodes
• getRootNode
• getSelectedIndex
• getSelectedNode
• insertNodeAfter
• insertNodeBefore
• loadData
• moveNodeTo
• openNode
• removeChildNodes
• removeNode
• scrollToNode
• scrollTop
• selectNode
• swapNodes
• toggleNode
• toString
• unfilter
• update
• updateNode

---

addChildNodes(newNodes, [index], [parentNode])

Adds an array of new child nodes to a parent node at the specified index.

Arguments

1. newNodes (Array): An array of new child nodes.
2. [index] (number): The 0-based index of where to insert the child node.
3. [parentNode] (Node): The Node object that defines the parent node.

Returns

(boolean): Returns true on success, false otherwise.

Example

appendChildNode(newNode, parentNode)

Adds a new child node to the end of the list of children of a specified parent node.

• If the parent is null or undefined, inserts the child at the specified index in the top-level.
• If the parent has children, the method adds the child as the last child.
• If the parent does not have children, the method adds the child to the parent.

Arguments

1. newNode (Object): The new child node.
2. parentNode (Node): The Node object that defines the parent node.

Returns

(boolean): Returns true on success, false otherwise.

Example

checkNode(node, [checked])

Checks or unchecks the node.

Arguments

1. node (Node): The Node object.
2. [checked] (boolean): Whether to check or uncheck the node. If not specified, it will toggle between checked and unchecked state.

Returns

(boolean): Returns true on success, false otherwise.

Node State

state.checked	state.indeterminate	description
false	false	The node and all of its children are unchecked.
true	false	The node and all of its children are checked.
true	true	The node will appear as indeterminate when the node is checked and some (but not all) of its children are checked.

Example

tree.checkNode(node);// toggle checked and unchecked state
tree.checkNode(node, true); // checked=true, indeterminate=false
tree.checkNode(node, false); // checked=false, indeterminate=false

clear()

Clears the tree.

Example

closeNode(node, [options])

Closes a node to hide its children.

Arguments

1. node (Node): The Node object.
2. [options={}] (Object): The options object.
3. [options.silent=false] (boolean): Sets true to prevent "closeNode" event from being triggered.

Returns

(boolean): Returns true on success, false otherwise.

Example

filter(predicate, [options])

Filters nodes. Use a string or a function to test each node of the tree. Otherwise, it will render nothing after filtering (e.g. tree.filter(), tree.filter(null), tree.flter(0), tree.filter({}), etc.).

Arguments

1. predicate (string|function): A keyword string, or a function to test each node of the tree. If the predicate is an empty string, all nodes will be filtered. If the predicate is a function, returns true to keep the node, false otherwise.
2. [options={}] (Object): The options object.
3. [options.caseSensitive=false] (boolean): Case sensitive string comparison. Defaults to false. This option is only available for string comparison.
4. [options.exactMatch=false] (boolean): Exact string matching. Defaults to false. This option is only available for string comparison.
5. [options.filterPath='name'] (string): Gets the value at path of Node object. Defaults to 'name'. This option is only available for string comparison.
6. [options.includeAncestors=true] (boolean): Whether to include ancestor nodes. Defaults to true.
7. [options.includeDescendants=true] (boolean): Whether to include descendant nodes. Defaults to true.

Example #1: Filter by string

const keyword = 'text-to-filter';
const filterOptions = {
    caseSensitive: false,
    exactMatch: false,
    filterPath: 'props.name', // Defaults to 'name'
    includeAncestors: true,
    includeDescendants: true
};
tree.filter(keyword, filterOptions);

Example #2: Filter by function

const keyword = 'text-to-filter';
const filterOptions = {
    includeAncestors: true,
    includeDescendants: true
};
tree.filter(function(node) {
    const name = node.name || '';
    return name.toLowerCase().indexOf(keyword) >= 0;
});

flattenChildNodes(parentNode)

Flattens all child nodes of a parent node.

Arguments

1. parentNode (Node): The Node object that defines the parent node.

Returns

(Array): Returns an array of Node objects containing all the child nodes of the parent node.

Example

flattenNode(node)

Flattens a node.

Arguments

1. node (Node): The Node object.

Returns

(Array): Returns a flattened list of Node objects.

Example

getChildNodes(parentNode)

Gets a list of child nodes.

Arguments

1. parentNode (Node): The Node object that defines the parent node. If null or undefined, returns a list of top level nodes.

Returns

(Array): Returns an array of Node objects containing all the child nodes of the parent node.

Example

getNodeById(id)

Gets a node by its unique id. This assumes that you have given the nodes in the data a unique id.

Arguments

1. id (number|string): An unique node id. A null value will be returned if the id doesn't match.

Returns

(Node): Returns a Node object that matches the id, null otherwise.

Example

getNodeFromPoint(x, y)

Returns the node at the specified point. If the specified point is outside the visible bounds or either coordinate is negative, the result is null.

Arguments

1. x (number): A horizontal position within the current viewport.
2. y (number): A vertical position within the current viewport.

Returns

(Node): Returns a Node object under the given point.

Example

getOpenNodes()

Gets an array of open nodes.

Returns

(Array): Returns an array of Node objects containing open nodes.

Example

getRootNode()

Returns

(Node): Returns the root node, or null if empty.

Example

getSelectedIndex()

Returns

(number): Returns the index of the selected node, or -1 if not selected.

Example

getSelectedNode()

Returns

(Node): Returns the selected node, or null if not selected.

Example

insertNodeAfter(newNode, referenceNode)

Inserts the specified node after the reference node.

Arguments

1. newNode (Object): The new sibling node.
2. referenceNode (Node): The Node object that defines the reference node.

Returns

(boolean): Returns true on success, false otherwise.

Example

insertNodeBefore(newNode, referenceNode)

Inserts the specified node before the reference node.

Arguments

1. newNode (Object): The new sibling node.
2. referenceNode (Node): The Node object that defines the reference node.

Returns

(boolean): Returns true on success, false otherwise.

Example

loadData(data)

Loads data in the tree.

Arguments

1. data (Object|Array): The data is an object or array of objects that defines the node.

Example

moveNodeTo(node, parentNode, [index])

Moves a node from its current position to the new position.

Arguments

1. node (Node): The Node object.
2. parentNode (Node): The Node object that defines the parent node.
3. [index] (number): The 0-based index of where to insert the child node.

Returns

(boolean): Returns true on success, false otherwise.

Example

openNode(node, [options])

Opens a node to display its children.

Arguments

1. node (Node): The Node object.
2. [options={}] (Object): The options object.
3. [options.silent=false] (boolean): Sets true to prevent "openNode" event from being triggered.

Returns

(boolean): Returns true on success, false otherwise.

Example

removeChildNodes(parentNode)

Removes all child nodes from a parent node.

Arguments

1. parentNode (Node): The Node object that defines the parent node.

Returns

(boolean): Returns true on success, false otherwise.

Example

removeNode(node)

Removes a node and all of its child nodes.

Arguments

1. node (Node): The Node object.

Returns

(boolean): Returns true on success, false otherwise.

Example

scrollToNode(node)

Sets the current scroll position to this node.

Arguments

1. node (Node): The Node object.

Returns

(boolean): Returns true on success, false otherwise.

Example

scrollTop([value])

Arguments

1. [value] (number): If the value is specified, indicates the new position to set the scroll bar to.

Returns

(number): Returns the vertical scroll position.

Example

selectNode(node, [options])

Selects a node.

Arguments

1. node (Node): The Node object. If null or undefined, deselects the current node.
2. [options={}] (Object): The options object.
3. [options.autoScroll=true] (boolean): Sets true to automatically scroll to the selected node. Defaults to true.
4. [options.silent=false] (boolean): Sets true to prevent "selectNode" event from being triggered. Defaults to false.

Returns

(boolean): Returns true on success, false otherwise.

Example

swapNodes(node1, node2)

Swaps two nodes.

Arguments

1. node1 (Node): The Node object.
2. node2 (Node): The Node object.

Returns

(boolean): Returns true on success, false otherwise.

Example

toggleNode(node, [options])

Toggles a node to display or hide its children.

Arguments

1. node (Node): The Node object.
2. [options={}] (Object): The options object.
3. [options.silent=false] (boolean): Sets true to prevent "closeNode", "openNode", and "selectNode" events from being triggered.

Example

toString(node)

Serializes the current state of a node to a JSON string.

Arguments

1. node (Node): The Node object. If null, returns the whole tree.

Returns

(string): Returns a JSON string represented the tree.

Example

unfilter()

Unfilter nodes.

Example

tree.unfilter();

update()

Updates the tree.

Example

updateNode(node, data, [options])

Updates the data of a node.

Arguments

1. node (Node): The Node object.
2. data (Object): The data object.
3. [options={}] (Object): The options object.
4. [options.shallowRendering=false] (boolean): Sets true to render only the node without expanded child nodes.

Example