Skip to content

Options

Jump to bottom
Cheton Wu edited this page Apr 18, 2016 · 36 revisions

Below are the configuration options with their default values:

{
    autoOpen: false,
    data: [],
    droppable: false,
    el: null,
    layout: 'div',
    loadNodes: null,
    noDataClass: 'infinite-tree-no-data',
    noDataText: 'No data',
    nodeIdAttr: 'data-id',
    rowRenderer: defaultRowRenderer,
    selectable: true,
    shouldSelectNode: null
}

autoOpen

Type: boolean Default: false

Sets to true to open all nodes.

Since

0.1.0

Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    autoOpen: true
});

data

Type: Object or Array Default: []

Since

0.1.0

Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: [
        { // node
            id: '<unique-node-id>', // Required
            children: [] // Optional
        }
    ]
});

droppable

Type: boolean or Object Default: false

Makes tree nodes droppable.

Since

1.1.0

Options
hoverClass

Type: string Default: ""

If specified, the class will be added to the droppable while an acceptable draggable is being hovered over the droppable.

accept

Type: Function Default: true

Controls which draggable elements are accepted by the droppable.

// @param {object} opts The options object.
// @param {string} opts.type The event type: 'dragenter' or 'drop'.
// @param {object} opts.draggableTarget The draggable target.
// @param {object} [opts.droppableTarget] The droppable target.
// @param {object} [opts.node] The Node object.
// @return {boolean} The function must return true if the draggable should be accepted.
accept: function(opts) {
    return true;
}
drop

Type: Function

Triggered when an accepted draggable is dropped on the droppable.

// @param {object} opts The options object.
// @param {object} opts.draggableTarget The draggable target.
// @param {object} opts.droppableTarget The droppable target.
// @param {object} opts.node The Node object.
drop: function(opts) {
}
Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    droppable: {
        hoverClass: 'infinite-tree-drop-hover',
        accept: function(opts) {
            var node = opts.node;
            return node.props.droppable;
        },
        drop: function(e, opts) {
            var data = e.dataTransfer.getData('data');
            var node = opts.node;
            console.log('drop:', node, data);
        }
    }
});

el

Type: DOMElement Default: null

The DOM element for rendering a tree.

Since

0.1.0

Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree')
});

layout

Type: string Default: "div"

Uses div or table for layout in HTML.

Since

0.9.0

Example

Using div for layout in HTML:

var tree = new InfiniteTree({
    layout: 'div', // div layout
    rowRenderer: function(node, treeOptions) {
        return [
            '<div data-id="' + node.id + '" class="infinite-tree-item">'
            '<span class="infinite-tree-title">' + node.name + '</span>',
            '</div>'
        ].join('');
    }
});

Using table for layout in HTML:

var tree = new InfiniteTree({
    layout: 'table', // table layout
    rowRenderer: function(node, treeOptions) {
        return [
            '<tr data-id="' + node.id + '" class="infinite-tree-item">',
            '<td>' + node.props.name + '</td>',
            '<td>' + node.props.size + '</td>',
            '</tr>'
        ].join('');
    }
});

loadNodes

Type: Function Default: null

Loads nodes on demand.

Since

0.7.0

Arguments
  1. parentNode (Node): The Node object that defines the parent node.
  2. done (Function): An "error-first" callback. The first err argument of the callback is an error object. The second nodes argument of the callback is an array of node objects. If no error occurred, err should be set to null.
Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: [
        { // node
            id: '<unique-node-id>', // Required
            name: 'Node 0',
            loadOnDemand: true // Set loadOnDemand to true if you want to load child nodes on demand
        }
    ],
    loadNodes: function(parentNode, done) {
        var nodes = [
            {
                id: 'node1',
                name: 'Node 1'
            },
            {
                id: 'node2',
                name: 'Node 2'
            }
        ];
        setTimeout(function() {
            done(null, nodes);
        }, 1000);
    }
});

noDataClass

Type: string Default: "infinite-tree-no-data"

Since

0.9.0

Example
var tree = new InfiniteTree({
    noDataClass: 'empty-content'
});

noDataText

Type: string Default: "No data"

Since

0.9.0

Example
var tree = new InfiniteTree({
    noDataText: 'No Data Available'
});

nodeIdAttr

Type: string Default: "data-id"

The node id attribute.

Since

1.0.0

Examples
var tree = new InfiniteTree({
    nodeIdAttr: 'data-id',
    rowRenderer: function(node, treeOptions) {
        return '<div ' + treeOptions.nodeIdAttr + '="' + node.id + '">' + node.name + '</div>';
    }
});

rowRenderer

Type: Function Default: defaultRowRenderer

A custom row renderer that returns a HTML string.

Since

0.1.2

Arguments
  1. node (Node): The Node object.
  2. treeOptions (Object): The tree options.
Example

An example of minimum setup is shown as below, the node id attribute (e.g. data-id) is required.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    rowRenderer: function(node, treeOptions) {
        var state = node.state;
        // Check node state
        var html = [
            '<div data-id=' + JSON.stringify(node.id) + ' class="infinite-tree-item infinite-tree-selected" droppable="' + treeOptions.droppable + '">',
            '   <div class="infinite-tree-node">',
            '       <a class="infinite-tree-toggler infinite-tree-toggler-closed">►</a>',
            '       <span class="infinite-tree-title">' + node.name + '</span>',
            '   </div>',
            '</div>',
            ''
        ].join('\r\n');
        return html;
    }
});

Find a more advanced example at examples/renderer.js.

selectable

Type: boolean Default: true

Makes tree nodes selectable.

Since

0.6.0

Example

Turn off selection of nodes.

var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    selectable: false
});

shouldSelectNode

Type: Function Default: null

Provides a function to determine if a node can be selected or deselected. The function must return true or false. For this to work, the option selectable must be true.

Since

0.6.3

Arguments
  1. node (Node): The Node object.
Returns

(boolean): Returns true to select or deselect a node, else false.

Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    selectable: true,
    shouldSelectNode: function(node) {
        if (!node || (node === tree.getSelectedNode())) {
            return false; // Prevent from deselecting the current node
        }
        return true;
    }
});
Clone this wiki locally