glowTree jQuery Plugin

Ben Tiedt — Fri, 08 Mar 2024 17:51:50 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:51:50

Renders a tree of nodes which can be navigated, manipulated, and re-arranged

$('SELECTOR').glowTree(options)

where 'SELECTOR' is a select element to be replaced with a tree control

enableDragDrop: when enabled, allows rearranging of nodes within a tree via drag and drop
- default: false
getSubNodes: callback function which defines how to retrieve sub-nodes for a given tree and node. Callback is passed parameters:

canHaveChildren: whether a tree can have child nodes
- default: true
nodeHtml: Array of strings, one per node
- default: []
draggableTrees: when provided the id of another glowTree, nodes can be dragged from this tree to the tree identified by the id
- default: null
expandedImageUrl: URL of image used alongside expanded tree nodes
- default: ''
collapsedImageUrl: URL of image used alongside collapsed tree nodes
- default: ''
blankImageUrl: URL of blank image for leaf nodes
- default: ''

Returns the parent node and index based on a given coordinate pair. Generally used internally when dragging nodes between trees.

var nodeAndIndex = $('SELECTOR').glowTree('getParentAndIndex', x, y);

Sets whether a tree is highlighted

$('SELECTOR').glowTree('highlight', true);
$('SELECTOR').glowTree('highlight', false);

Adds a dragged node into a linked tree

$('SELECTOR').glowTree('addDraggedNode', node, nodeAndIndex.parentNode, nodeAndIndex.index, event);

When not passed a node, returns the currently-selected node. When passed a node, selects the node in the tree

var selectedNode = $('SELECTOR').glowTree('selected');
$('SELECTOR').glowTree('selected', node);

Resizes the tree to a given width and height in pixels

$('SELECTOR').glowTree('resize', x, y)

When not passed a value, returns whether the tree is disabled for interaction. When passed a boolean value, enables or disables the tree.

var isDisabled = $('SELECTOR').glowTree('disabled');
$('SELECTOR').glowTree('disabled', true);
$('SELECTOR').glowTree('disabled', false);

Re-renders the tree based on the currently-applied set of tree nodes

$('SELECTOR').glowTree('refresh')

Adds a new tree node to a tree

var newNode = $('SELECTOR').glowTree('createTreeNode', {
    value: 'abc',
    html: 'ABC'
});
$('SELECTOR').glowTree('add', newNode);

Removes a given tree node instance from a tree

var node = $('SELECTOR').glowTree('getByValue', 'abc');
$('SELECTOR').glowTree('remove', node);

Adds a new tree node to a tree at a given position

var newNode = $('SELECTOR').glowTree('createTreeNode', {
    value: 'abc',
    html: 'ABC'
});
$('SELECTOR').glowTree('add', newNode, 5);

Find and return an existing node based on the node's value

var node = $('SELECTOR').glowTree('getByValue', 'abc')

Return the position index for a given node

var index = $('SELECTOR').glowTree('getIndex', node)

Find and return an existing node based on the node's position index

var node = $('SELECTOR').glowTree('getByIndex', 4)

Returns the number of nodes in a given tree

var count = $('SELECTOR').glowTree('count')

Creates a new tree node suitable for adding or inserting into a tree

var newNode = $('SELECTOR').glowTree('createTreeNode', {
    value: 'abc',
    html: 'ABC'
});