ExtMulti

About Fancytree multi selection extension.

• Status: experimental
• example

Allow selection of multiple nodes using keyboard/mouse and shift/control modifiers, similar to Windows File Explorer or Mac Finder:

• Click: Select and activate clicked node and deselect all other nodes.
• Ctrl+Click: Toggle selection, without deselecting other nodes.
  The active node cannot be de-selected.
• Shift+Click: Select range between active and clicked node.
• Up / Down: Select and activate previous/next node and deselect all other nodes.
• Shift+Up / Shift+Down: Select and activate previous/next node without deselecting other nodes.

Note: For best results, the selectMode: 2 (multi select) option should be set for the tree (which is the default).

Options

n.a.

Events

n.a.

Methods

n.a.

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.multi.js:

  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

  <link href="skin-win8/ui.fancytree.css" rel="stylesheet">
  <script src="js/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
  <script src="js/jquery.fancytree.js"></script>
  <script src="js/jquery.fancytree.multi.js"></script>

$("#tree").fancytree({
  extensions: ["multi"],
  // Displaying checkboxes is optional:
  checkbox: true,
  // `unselectable` status is honored, so we may use it to restrict shift+click behavior:
  unselectable: function(event, data) {
    return data.node.isFolder();
  },
  multi: {
    mode: "sameParent", // Re-apply last filter if lazy data is loaded
  },
  ...
});

Recipes

[Howto] ...