Internal _cellExpose some useful methods of the util.ts module as tree._util.
Internal activeUse setColumn()/getActiveColElem() to access.
Optional checkboxShow/hide a checkbox or radiobutton.
List of column definitions.
Readonly dataContains additional data that was sent as response to an Ajax source load request.
Readonly elementThe div container element that was passed to the constructor.
Filter options (used as defaults for calls to Wunderbaum.filterNodes )
Readonly headerThe div.wb-header element if any.
Optional iconShow/hide a node icon.
Optional iconShow/hide a tooltip for the node icon.
Readonly idUnique tree ID as passed to constructor. Defaults to "wb_SEQUENCE".
Internal lastInternal lastReadonly listThe div.wb-list-container element that contains the nodeListElement.
Readonly nodeThe div.wb-node-list element that contains all visible div.wb-row child elements.
Merged options from constructor args and tree- and extension defaults.
Readonly readyA Promise that is resolved when the tree was initialized (similar to init(e) event).
Readonly rootThe invisible root node, that holds all visible top level nodes.
Optional tooltipShow/hide a tooltip.
Shared properties, referenced by node.type.
Optional unselectableDefine a node checkbox as readonly.
Static utilExpose some useful methods of the util.ts module as Wunderbaum.util.
Static versionWunderbaum release version number "MAJOR.MINOR.PATCH".
Currently active node if any. Use
to modify.
Current node hat has keyboard focus if any. Use
to modify.
Return the icon-function -> icon-definition mapping.
Iterate all descendant nodes depth-first, pre-order using for ... of ... syntax.
More concise, but slightly slower than Wunderbaum.visit.
Example:
for(const node of tree) {
...
}
Add node to tree's bookkeeping data structures.
Remove node from tree's bookkeeping data structures.
Append (or insert) a list of toplevel nodes.
Optional options: AddChildrenOptionsApply a modification (or navigation) operation on the tree or active node.
Optional options: ApplyCommandOptionsApply a modification (or navigation) operation on a node.
Optional options: ApplyCommandOptionsDisable render requests during operations that would trigger many updates.
try {
tree.enableUpdate(false);
// ... (long running operation that would trigger many updates)
foo();
// ... NOTE: make sure that async operations have finished, e.g.
await foo();
} finally {
tree.enableUpdate(true);
}
Recursively expand all expandable nodes (triggers lazy load if needed).
Optional options: ExpandAllOptionsDim or hide whole branches.
Use filterNodes instead and set options.matchBranch: true.
Dim or hide unmatched nodes.
a string to match against node titles, or a callback function.
filter options. Defaults to the tree.options.filter settings.
the number of nodes that match the filter.
tree.filterNodes("foo", {mode: 'dim', fuzzy: true});
// or pass a callback
tree.filterNodes((node) => { return node.data.foo === true }, {mode: 'hide'});
Find all nodes that match condition.
title string to search for, or a
callback function that returns true if a node is matched.
Find all nodes with a given refKey (aka a list of clones).
a node.refKey value to search for.
an array of matching nodes with at least two element or []
if nothing found.
Find first node that matches condition.
title string to search for, or a
callback function that returns true if a node is matched.
Find first node that matches condition.
Find the next visible node that starts with match, starting at startNode
and wrap-around at the end.
Used by quicksearch and keyboard navigation.
Optional startNode: null | WunderbaumNodeFind a node relative to another node.
'down', 'first', 'last', 'left', 'parent', 'right', or 'up'.
(Alternatively the keyCode that would normally trigger this move,
e.g. $.ui.keyCode.LEFT = 'left'.
Not yet implemented
Return multiline string representation of the node hierarchy. Mostly useful for debugging.
Example:
console.info(tree.format((n)=>n.title));
logs
Playground
├─ Books
| ├─ Art of War
| ╰─ Don Quixote
├─ Music
...
Optional name_cb: NodeStringCallbackOptional connectors: string[]Iterator version of Wunderbaum.format.
Optional name_cb: NodeStringCallbackOptional connectors: string[]Return the currently active node or null (alias for tree.activeNode).
Alias for Wunderbaum.activeNode.
Return the first top level node if any (not the invisible root node).
Return the node that currently has keyboard focus or null. Alias for Wunderbaum.focusNode.
Return the lowest visible node in the viewport.
Return tree.option.NAME (also resolving if this is a callback).
See also WunderbaumNode.getOption()
to evaluate node.NAME setting and tree.types[node.type].NAME.
option name (use dot notation to access extension option, e.g.
filter.mode)
Optional defaultValue: anyReturn an array of selected nodes.
only return the topmost selected node (useful with selectMode 'hier')
Return the topmost visible node in the viewport.
Return true if any node title or grid cell is currently beeing edited.
See also Wunderbaum.isEditingTitle.
Return true if any node is currently in edit-title mode.
See also WunderbaumNode.isEditingTitle and Wunderbaum.isEditing.
Reload the tree with a new source.
Previous data is cleared. Note that also column- and type defintions may
be passed with the source object.
Make sure that this node is vertically scrolled into the viewport.
Nodes that are above the visible area become the top row, nodes that are below the viewport become the bottom row.
Recursively select all nodes.
Set or remove keyboard focus to the tree container.
Optional options: SetActiveOptionsSet column #colIdx to 'active'.
This higlights the column header and -cells by adding the wb-active
class to all grid cells of the active column.
Available in cell-nav mode only.
If options.edit is true, the embedded input element is focused, or if colIdx is 0, the node title is put into edit mode.
Optional options: SetColumnOptionsSet the tree's navigation mode option.
Display tree status (ok, loading, error, noData) using styles and a dummy root node.
Optional options: SetStatusOptionsConvenience method to implement column sorting.
Sort nodes list by title or custom criteria.
custom compare function(a, b) that returns -1, 0, or 1 (defaults to sorting by title).
pass true to sort all descendant nodes recursively
Convert tree to an array of plain objects.
Optional callback: NodeToDictCallbackis called for every node, in order to allow
modifications.
Return false to ignore this node or "skip" to include this node
without its children.
Schedule an update request to reflect a tree change.
The render operation is async and debounced unless the immediate option
is set.
Use WunderbaumNode.update if only a single node has changed, or WunderbaumNode._render) to pass special options.
Optional options: UpdateOptionsUpdate a row to reflect a single node's modification.
Optional options: UpdateOptionsRender pending changes that were scheduled using WunderbaumNode.update if any.
This is hardly ever neccessary, since we normally either
update(ChangeType.TYPE) (async, throttled), orupdate(ChangeType.TYPE, {immediate: true}) (synchronous)updatePendingModifications() will only force immediate execution of
pending async changes if any.
Call callback(node) for all nodes in hierarchical order (depth-first, pre-order).
the callback function. Return false to stop iteration, return "skip" to skip this node and children only.
false, if the iterator was stopped.
IterableIterator
Call callback(node) for all nodes in vertical order, top down (or bottom up).
Note that this considers expansion state, i.e. filtered nodes and children
of collapsed nodes are skipped, unless includeHidden is set.
Stop iteration if callback() returns false.
Return false if iteration was stopped.
Optional options: VisitRowsOptionsfalse if iteration was canceled
Static getReturn a {node: WunderbaumNode, region: TYPE} object for a mouse event.
Mouse event, e.g. click, ...
Return a {node: WunderbaumNode, region: TYPE} object TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
Static getReturn a WunderbaumNode instance from element or event.
Static getReturn a Wunderbaum instance, from element, id, index, or event.
getTree(); // Get first Wunderbaum instance on page
getTree(1); // Get second Wunderbaum instance on page
getTree(event); // Get tree for this mouse- or keyboard event
getTree("foo"); // Get tree for this `tree.options.id`
getTree("#tree"); // Get tree for first matching element selector
Optional el: string | number | Element | Event | WunderbaumNode
A persistent plain object or array.
See also WunderbaumOptions.