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

• mode, type: {string}, default: "sameParent"
  NOT YET IMPLEMENTED!
  Controls behavior of range selection:
  "": No restrictions.
  "sameType": only allow nodes of the same node.type to be selected.
  "sameParent": only allow children of the same parent to be selected.
  "sameLevel": only allow nodes of the same indentation level to be selected.

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.4.0.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"  // Restrict range selection behavior
  },
  ...
});

Recipes

[Howto] ...