Tree tree.js

Usage

The tree provides a categorical selection interface that allows for interaction and selection of nested elements.

Via JavaScript

Call the tree control via JavaScript:

dataSource = function(parentData, callback){
  //...
};

$('#myTree').tree({ dataSource: dataSource });

Methods

.tree('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup

.tree('selectedItems')

Returns an array containing selected items and associated data

.tree('selectItem', $('#itemId'))

Select the passed in non-folder item in the tree.

.tree('selectFolder', $('#itemId'))

Select the passed in folder item in the tree.

.tree('openFolder', $('#folderId'))

Open the targeted folder

.tree('closeFolder', $('#folderId'))

Close the targeted folder

.tree('toggleFolder', $('#folderId'))

Toggle the targeted folder (opened or closed)

.tree('closeAll')

Close all folders (collapse the entire tree).

.tree('discloseAll')

Disclose all folders (expand the entire tree).

.tree('discloseVisible')

Disclose only currently visible folders (expand already displayed folders).

.tree('populate', $el)

deprecated Populate the passed in element as if it were a new copy of the instantiated tree. If you call this on an already instantiated tree, it will append all of the items to the tree again. You probably don't want to call this. It will most likely become a private function in the future.

.tree('render')

Calls datasource callback for entire tree. Caution: Does not remove current top-level tree nodes.

.tree('refreshFolder', $('#folderId'))

Removes children and calls datasource callback for specified folder. Does not update data and attributes of the specified folder.

.tree('collapse')

deprecated Same as .tree('closeAll')

Options

You can pass options via data attributes or JavaScript. For data attributes, append the option name to data-. For example, you could use data-selected="".

    $tree.one('exceededDisclosuresLimit.fu.tree', function () {
        $tree.data('ignore-disclosures-limit', true);
        $tree.tree('discloseAll');
    });

Required Data Source

The tree control requires an array of objects in order to create a tree. To determine what tree nodes to create, the tree control uses a callback function named datasource that returns an object with an array named data within it. Items in data will be created when a branch is opened. All tree nodes must be loaded into the control one folder (branch) at a time. However, one can store the entire tree from a single network request, and use the datasource function to parse this combined object and not make additional network requests. The following are reserved keys within each item object.

Events

All tree events are triggered from the .tree classed element.

$('#myTree').on('selected.fu.tree', function (event, data) {
  // do something with data: { selected: [array], target: [object] }
})

Examples

Tree provides a categorical element selection. Use it to create a file system interface. Wrap the wrapper tree containers with .fuelux .tree

<ul class="tree tree-folder-select" id="myTree" role="tree">
  <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
    <div class="tree-branch-header">
      <button class="glyphicon icon-caret glyphicon-play" type="button"><span class="sr-only">Open</span></button>
      <button class="tree-branch-name" type="button">
        <span class="glyphicon icon-folder glyphicon-folder-close"></span>
        <span class="tree-label"></span>
      </button>
    </div>
    <ul class="tree-branch-children" role="group"></ul>
    <div class="tree-loader" role="alert">Loading...</div>
  </li>
  <li class="tree-item hide" data-template="treeitem" role="treeitem">
    <button class="tree-item-name" type="button">
      <span class="glyphicon icon-item fueluxicon-bullet"></span>
      <span class="tree-label"></span>
    </button>
  </li>
</ul>

  <ul class="tree" id="myTree" role="tree">
    <li class="tree-branch hide" data-template="treebranch" role="treeitem" aria-expanded="false">
      <div class="tree-branch-header">
        <button class="tree-branch-name" type="button">
          <span class="glyphicon icon-caret glyphicon-play"></span>
          <span class="glyphicon icon-folder glyphicon-folder-close"></span>
          <span class="tree-label"></span>
        </button>
      </div>
      <ul class="tree-branch-children" role="group"></ul>
      <div class="tree-loader" role="alert">Loading...</div>
    </li>
    <li class="tree-item hide" data-template="treeitem" role="treeitem">
      <button class="tree-item-name" type="button">
        <span class="glyphicon icon-item fueluxicon-bullet"></span>
        <span class="tree-label"></span>
      </button>
    </li>
  </ul>