ExtMulti - mar10/fancytree GitHub Wiki
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).
-
mode, type: {string}, default: "sameParent"
NOT YET IMPLEMENTED!
Controls behavior of range selection:
""
: No restrictions.
"sameType"
: only allow nodes of the samenode.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.
n.a.
n.a.
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
},
...
});