Node

Every node in the tree is a Node object. You get them from the tree — getNodeById, getSelectedNode, an event's detail.node — and they are what you pass back into the tree's methods.

const node = tree.getNodeById(1);

node.name; // "node1"
node.isFolder(); // true
node.getLevel(); // 1

The root node is not rendered; it is a container for the top-level nodes:

tree.getTree().children; // the top-level nodes

Properties

Any other key in the node data is copied onto the node, so { name: "node1", color: "green" } gives you node.color.

Property	Type	Default value	Description
children	Node[]	undefined	The child nodes.
element?	HTMLElement	undefined	The li element, once the node is rendered. Nodes inside a closed folder are rendered when the folder is opened.
id?	NodeId	undefined	The id from the node data.
is_loading?	boolean	undefined	Whether the node's children are being fetched.
is_open?	boolean	undefined	Whether the folder is open.
isEmptyFolder	boolean	undefined	Whether the node data had an empty children array.
load_on_demand	boolean	false	Whether the children still have to be fetched.
name	string	""	The label. Also settable from the label key in node data.
parent	Node | null	undefined	The parent; null for the root node.
tree?	Node	undefined	The root node.

Inspecting a node

getChildIndex()

getChildIndex(node): number;

Returns the position of a child in children, or -1.

Parameters

Parameter	Type
node	Node

Returns

number

---

getLevel()

getLevel(): number;

Returns the depth of the node, counting the top level as 1.

Returns

number

---

hasChildren()

hasChildren(): boolean;

Whether the node has children.

Returns

boolean

---

isFolder()

isFolder(): boolean;

true when the node has children, or is marked load_on_demand.

Returns

boolean

---

isParentOf()

isParentOf(node): boolean;

Whether this node is an ancestor of the other node.

Parameters

Parameter	Type
node	Node

Returns

boolean

Moving around the tree

getLastChild()

getLastChild(): Node | null;

Returns the last child, or null. When that child is an open folder, its own last child, and so on.

Returns

Node | null

---

getNextNode()

getNextNode(includeChildren?): Node | null;

Returns the next node in the tree, regardless of whether it is visible. getNextNode(false) skips the node's own children.

Parameters

Parameter	Type	Default value
includeChildren?	boolean	true

Returns

Node | null

---

getNextSibling()

getNextSibling(): Node | null;

Returns the next sibling, or null.

Returns

Node | null

---

getNextVisibleNode()

getNextVisibleNode(): Node | null;

Like getNextNode, but skipping nodes inside closed folders — this is what the arrow keys use.

Returns

Node | null

---

getParent()

getParent(): Node | null;

Returns the parent: null for a top-level node — the root node is not returned.

Returns

Node | null

---

getPreviousNode()

getPreviousNode(): Node | null;

Returns the previous node in the tree, regardless of whether it is visible.

Returns

Node | null

---

getPreviousSibling()

getPreviousSibling(): Node | null;

Returns the previous sibling, or null.

Returns

Node | null

---

getPreviousVisibleNode()

getPreviousVisibleNode(): Node | null;

Like getPreviousNode, but skipping nodes inside closed folders — this is what the arrow keys use.

Returns

Node | null

Searching

These work on any node, and search that node's subtree. Called on the root node, they search the whole tree — which is what the tree's own methods of the same name do.

filter()

filter(f): Node[];

Returns all nodes in the subtree for which the callback returns true.

Parameters

Parameter	Type
f	(node) => boolean

Returns

Node[]

Example

const folders = tree.getTree().filter((node) => node.isFolder());

---

getNodeByCallback()

getNodeByCallback(callback): Node | null;

Returns the first node for which the callback returns true.

Parameters

Parameter	Type
callback	(node) => boolean

Returns

Node | null

---

getNodeById()

getNodeById(nodeId): Node | null;

Returns the node with this id. Only available on the root node, which keeps the id index.

Parameters

Parameter	Type
nodeId	NodeId

Returns

Node | null

---

getNodeByName()

getNodeByName(name): Node | null;

Returns the first node with this name.

Parameters

Parameter	Type
name	string

Returns

Node | null

---

getNodeByNameMustExist()

getNodeByNameMustExist(name): Node;

Like getNodeByName, but throws when there is no such node.

Parameters

Parameter	Type
name	string

Returns

Node

---

getNodesByProperty()

getNodesByProperty(key, value): Node[];

Returns all nodes with this property value.

Parameters

Parameter	Type
key	string
value	unknown

Returns

Node[]

---

iterate()

iterate(callback): void;

Walks the subtree, calling the callback with (node, level). Return false from the callback to stop descending into that node:

tree.getTree().iterate((node, level) => {
  console.log(" ".repeat(level) + node.name);
  return level <= 2; // don't go deeper than level 2
});

Parameters

Parameter	Type
callback	IterateCallback

Returns

void

Changing the tree

WARNING

These methods change the data without re-rendering. The tree's methods — appendNode, removeNode, moveNode and friends — do the same and refresh the display, so prefer those. If you do use these, call tree.refresh() afterwards.

addAfter()

addAfter(nodeInfo): Node | null;

Adds a sibling after this node.

Parameters

Parameter	Type
nodeInfo	NodeData

Returns

Node | null

The new node, or null when the node has no parent.

---

addBefore()

addBefore(nodeInfo): Node | null;

Adds a sibling before this node.

Parameters

Parameter	Type
nodeInfo	NodeData

Returns

Node | null

The new node, or null when the node has no parent.

---

addChild()

addChild(node): void;

Adds an existing Node object as the last child.

Parameters

Parameter	Type
node	Node

Returns

void

---

addChildAtPosition()

addChildAtPosition(node, index): void;

Adds an existing Node object as a child, at this position in children. The index starts at 0.

Parameters

Parameter	Type
node	Node
index	number

Returns

void

---

addParent()

addParent(nodeInfo): Node | null;

Inserts a new parent between this node and its current parent.

Parameters

Parameter	Type
nodeInfo	NodeData

Returns

Node | null

The new node, or null when the node has no parent.

---

append()

append(nodeInfo): Node;

Adds a child at the end.

Parameters

Parameter	Type
nodeInfo	NodeData

Returns

Node

The new node.

---

loadFromData()

loadFromData(data): this;

Replaces the children with new node data.

Parameters

Parameter	Type
data	NodeData[]

Returns

this

---

moveNode()

moveNode(
   movedNode, 
   targetNode, 
   position
): boolean;

Moves a node relative to another node. Called on the root node.

Parameters

Parameter	Type	Description
movedNode	Node	-
targetNode	Node	-
position	Position	"before", "after" or "inside".

Returns

boolean

false when the move is impossible, for instance moving a node into its own subtree.

---

prepend()

prepend(nodeInfo): Node;

Adds a child at the start.

Parameters

Parameter	Type
nodeInfo	NodeData

Returns

Node

The new node.

---

remove()

remove(): void;

Removes this node from its parent.

Returns

void

---

removeChild()

removeChild(node): void;

Removes a child and its children.

Parameters

Parameter	Type
node	Node

Returns

void

---

removeChildren()

removeChildren(): void;

Removes all children.

Returns

void

---

setData()

setData(o): void;

Updates the node's properties from node data. children and parent are ignored. A string sets the name. Existing node values are not removed.

Parameters

Parameter	Type
o	NodeData | null

Returns

void

Reading data back

getData()

getData(includeParent?): NodeRecord[];

Returns the subtree as plain data, ready for JSON.stringify. Internal properties (parent, children, element, tree, idMapping, nodeClass, load_on_demand, isEmptyFolder) are left out; your own properties are kept.

tree.getTree().getData();
// [{ name: "node1", id: 1, children: [{ name: "child1", id: 2 }] }]

Parameters

Parameter	Type	Default value	Description
includeParent?	boolean	false	Make the result the node itself rather than its children. Default false.

Returns

NodeRecord[]