Skip to content

Options

Jump to bottom
Cheton Wu edited this page Mar 24, 2018 · 36 revisions

Below are the configuration options with their default values:

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

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} event The event object.
// @param {object} options The options object.
// @param {string} options.type The event type: 'dragenter' or 'drop'.
// @param {object} options.draggableTarget The draggable target.
// @param {object} options.droppableTarget The droppable target.
// @param {object} options.node The Node object.
// @return {boolean} The function must return true if the draggable should be accepted.
accept: function(event, options) {
    return true;
}
drop

Type: Function

Triggered when an accepted draggable is dropped on the droppable.

// @param {object} event The event object.
// @param {object} options The options object.
// @param {object} options.draggableTarget The draggable target.
// @param {object} options.droppableTarget The droppable target.
// @param {object} options.node The Node object.
drop: function(event, options) {
}
Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    droppable: {
        hoverClass: 'infinite-tree-drop-hover',
        accept: function(event, options) {
            var node = options.node;
            return node && node.props.droppable;
        },
        drop: function(event, options) {
            var data = event.dataTransfer.getData('data');
            var node = options.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('');
    }
});

shouldLoadNodes

Type: Function Default: null

A custom function to determine whether to load nodes on demand.

Since

1.16.0

Arguments
  1. parentNode (Node): The Node object that defines the parent node.
Example
var tree = new InfiniteTree({
    el: document.querySelector('#tree'),
    data: [
        { // node
            id: '<unique-node-id>', // Required
            name: 'Node 0',
            loadNodes: true
        }
    ],
    shouldLoadNodes: function(parentNode) {
        return !parentNode.hasChildren() && parentNode.loadNodes;
    },
    loadNodes: function(parentNode, next) {
        var nodes = [
            {
                id: 'node1',
                name: 'Node 1'
            },
            {
                id: 'node2',
                name: 'Node 2'
            }
        ];
        setTimeout(function() {
            next(null, nodes, function() {
                // Completed
            });
        }, 1000);
    }
});

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. next (Function): An "error-first" callback. The first parameter is an error object, the second parameter is an array of node objects, and the third optional parameter is a complete callback. If no error occurred, the first parameter 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, next) {
        var nodes = [
            {
                id: 'node1',
                name: 'Node 1'
            },
            {
                id: 'node2',
                name: 'Node 2'
            }
        ];
        setTimeout(function() {
            next(null, nodes, function() {
                // Completed
            });
        }, 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;
    }
});

togglerClass

Type: string Default: "infinite-tree-toggler"

Since

1.0.0

Example
var tree = new InfiniteTree({
    togglerClass: 'infinite-tree-toggler'
});
Clone this wiki locally