ExtMulti - mar10/fancytree GitHub Wiki

About Fancytree multi selection extension.

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.6.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,  // optional
  checkboxAutoHide: true,  // optional
  // `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] ...
⚠️ **GitHub.com Fallback** ⚠️