glowTree jQuery Plugin

---

jQuery.fn.glowTree

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

Usage

$('SELECTOR').glowTree(options)

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

Options

• 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:

1. tree
2. node

• 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: ''

Events

• glowTreeNodeSelected - triggered when a tree node is selected
• glowTreeContextMenu - triggered when a tree node is right-clicked
• glowTreeNodeRemoved - triggered when a tree node is removed from the tree
• glowTreeNodeMoved - triggered when a tree node is moved in a tree
• glowTreeNodeAdded - triggered when a tree node is added

Methods

getParentAndIndex

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);

highlight

Sets whether a tree is highlighted

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

addDraggedNode

Adds a dragged node into a linked tree

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

selected

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);

resize

Resizes the tree to a given width and height in pixels

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

disabled

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);

refresh

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

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

add

Adds a new tree node to a tree

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

remove

Removes a given tree node instance from a tree

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

insert

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);

getByValue

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

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

getIndex

Return the position index for a given node

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

getByIndex

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

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

count

Returns the number of nodes in a given tree

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

createTreeNode

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

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

---