Tree

Examples

Parent 1

HTML

<div id="example" class="hx-tree">
  <div class="hx-tree-node">
    <div class="hx-tree-node-parent"><div class="hx-tree-node-content">Parent 1</div></div>
    <div class="hx-tree-node-children" style="display:none">
      <div class="hx-tree-node">
        <div class="hx-tree-node-content">Item 1</div>
      </div>
      <div class="hx-tree-node">
        <div class="hx-tree-node-parent"><div class="hx-tree-node-content">Parent 2</div></div>
        <div class="hx-tree-node-children" style="display:none">
          <div class="hx-tree-node">
            <div class="hx-tree-node-content">Item 2</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var tree = new hx.Tree('#example')

HTML

<div id="example-dynamic"></div>

JavaScript

var tree = new hx.Tree('#example-dynamic', {
  renderer: function (elem, data) { hx.select(elem).html(data.name) },
  items: [
    {
      name: 'Parent 1',
      children: [
        {
          name: 'Item 1'
        },
        {
          name: 'Parent 2',
          children: [
            {
              name: 'Item 2'
            }
          ]
        }
      ]
    }
  ]
})

Api

Change Log

Prototypes

hx.Tree

Create one of these for each tree layout in your page. This object provides a way to fill out tree layouts from an array of objects, and also makes it possible to listen out for tree expansion and contraction events. It also makes it possible to expand / collapse parts of the tree using the api.

Constructors

hx.TreeselectorString / HTMLElementoptionsObject

Sets up / prepares a selection for displaying data in an expandable tree.

Arguments

selectorString / HTMLElement

A unique css selector or a HTMLElement that identifies your tree.

options

The options to use when constructing the tree

Properties

animateBoolean

A parameter that determines whether to animate the arrows when tree children are shown/hidden.

hideDisabledButtonsBoolean

A parameter that hides the 'disabled' buttons added to the tree.

Default: false

itemsArray[Object]

A nested array of objects that represent nodes in the tree. An array that takes the following form:

The data object should be an array of objects that represent the first level of nodes in the tree. Each of these nodes can contain children - they can have a 'children' field which refers to an array of the child nodes. A node can also contain other properties, which will contain the information you wish to fill the node out with. If the example above, the "name" and "color" fields are properties that we have chosen to give to each node, and might used when rendering each node. Note that other than the 'children' field, it is up to you what you call any other properties in each node.

lazyBoolean

Whether to lazily render the tree nodes when building from JSON.

When this is true, the children of a tree node will only be renderered when their parent is opened.

Default: false

renderernodeHTMLElementdataAny

A function that turns object nodes to dom elements. An example renderer:

var renderer = function(element, datum) {
  element.innerHTML = datum.name
  element.style.color = datum.color || 'black'
}

This will set the text of each node to the property 'name' in the json data, and will set the color of the node to the 'color' property if it is present. Note that you can do anything here - you can append new elements to the element supplied and fill out the node with arbitrary blocks of html. This is the part where you define what the contents of each node is going to look like.

Arguments

nodeHTMLElement

The element to populate.

dataAny

The data to populate the element with.

Methods

hideanimateBooleanTree

Hides all the nodes for the selected tree.

Arguments

animateBoolean

Whether or not to animate the toggle when hiding the tree. true

Returns

Tree

This Tree

hideanimateBooleannodeHTMLElementTree

Shows a specific tree node's children.

Arguments

animateBoolean

Whether or not to animate the toggle when hiding the branch of the tree.

nodeHTMLElement

Specifies a node for which to hide the content. Must be passed a <span class="pill">hx-tree-node</span> node.

Returns

Tree

This Tree

itemsArray[Object]

Gets the items the tree is built from

Returns

Array[Object]

The tree items

itemsdataArray[Object]Tree

Set the items to build the tree from.

Arguments

dataArray[Object]

A nested array of objects that represent nodes in the tree.

An array that takes the following form:

Note that other than the 'children' field, it is up to you what you call any other properties in each node.

Returns

Tree

This Tree

rendererFunction

Gets the function used to convert tree items into DOM elements.

Returns

functionnodeHTMLElementdataObject

The current renderer function

Arguments

nodeHTMLElement

The element to populate.

data

The data to populate the element with.

rendererrenderFunctionTree

Sets the function used to convert tree items into DOM elements.

Arguments

rendernodeHTMLElementdataObject

A function that turns object nodes to dom elements.

An example renderer:

var renderer = function(element, datum) {
  element.innerHTML = datum.name
  element.style.color = datum.color || 'black'
}

This will set the text of each node to the property 'name' in the json data, and will set the color of the node to the 'color' property if it is present.

Note that you can do anything here - you can append new elements to the element supplied and fill out the node with arbitrary blocks of html. This is the part where you define what the contents of each node is going to look like.

Arguments

nodeHTMLElement

The element to populate.

data

The data to populate the element with.

Returns

Tree

This Tree

showanimateBooleanTree

Shows all the nodes for the selected tree.

Arguments

animateBoolean

Whether or not to animate the toggle when expanding the tree. true

Returns

Tree

This Tree

showanimateBooleannodeHTMLElementTree

Shows a specific tree node's children.

Arguments

animateBoolean

Whether or not to animate the toggle when showing the branch of the tree.

nodeHTMLElement

Specifies a specific node to show. Must be passed a <span class="pill">hx-tree-node</span> node. If the node is hidden and part of a nested set of children, this function will traverse up the tree and make all required elements visible.

Returns

Tree

This Tree

Functions

hx.initializeTreesselectorString

Initializes all the trees that match a css selector in a page and returns the Tree objects as an array.

Arguments

selectorString

A css selector that selects the tab groups you wish to initialise.

hx.treeoptionsObjectSelection

Creates a new Tree set up on a detached element, wrapped in a selection

Arguments

options

See the options object for constructing Tree

Returns

Selection

A selection containing an element with an Tree initialised on it

Classes

hx-tree

The class to give to tree elements. When building trees using the items method, these classes will be added to content automatically.

Classes

hx-tree-node

The class to give to tree nodes. These should be directly inside hx-tree or hx-tree-node-children elements.

Classes

hx-tree-node-children

The class to give to the children element for a tree. This should always be placed directly inside a hx-tree-node and after a hx-tree-node-parent element.

hx-tree-node-content

The class to give to any content within a tree node, should be placed directly inside a hx-tree-node that doesn't include hx-tree-node-parent or hx-tree-node-children .

hx-tree-node-parent

The class to give to the parent element for a tree. This should always be placed directly inside a hx-tree-node and before a hx-tree-node-children element.

Classes

hx-tree-node-content

The content for the parent element. Should always be placed directly inside a hx-tree-node-parent element.