« Example 7 Example 9 »

Example 8 - multiple select

This example implements multiple select using the following functions and events:

• addToSelection: add node to selections
• isNodeSelected: is this node selected?
• removeFromSelection: unselect this node
• tree.click event: this event is fired when a user clicks on a node

html

<div id="tree1" data-url="/nodes/"></div>

javascript

$(function() {
    var $tree = $('#tree1');
    $tree.tree({
        data: ExampleData.example_data,
        autoOpen: true,
    });
    $tree.bind(
        'tree.click',
        function(e) {
            // Disable single selection
            e.preventDefault();

            var selected_node = e.node;

            if ($tree.tree('isNodeSelected', selected_node)) {
                $tree.tree('removeFromSelection', selected_node);
            }
            else {
                $tree.tree('addToSelection', selected_node);
            }
        }
    );
});