ExtFixed - mar10/fancytree GitHub Wiki
About Fancytree fixed headers extension (for table extension).
- Status: experimental
- example
Allow to define top rows and left columns that remain visible while scrolling large tables.
Note: This plugin requires the ext-table extension.
-
fixCols, type: {integer|bool}, default: true
-
scrolled
Fired after tree status is restored.
-
{integer} tree.filterBranches(filter, opts)
Dimm or hide unmatched branches. Matching nodes are displayed together with all descendants.
filter: {function | string}
Note: another way to achieve this behavior is to usetree.filterNodes()and return"branch"in response of the matcher-callback
opts {object}, default:{autoExpand: false}.
autoExpand: Temporarily expand matching node parents, while filter is active.
In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.fixed.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.fixed.js"></script>
<script src="js/jquery.fancytree.gridnav.js"></script>
<script src="js/jquery.fancytree.table.js"></script>$("#tree").fancytree({
extensions: ["table", "fixed"],
fixed: {
autoApply: true, // Re-apply last filter if lazy data is loaded
counter: true, // Show a badge with number of matching child nodes near parent icons
hideExpandedCounter: true, // Hide counter badge, when parent is expanded
mode: "hide" // "dimm": Grayout unmatched nodes, "hide": remove unmatched nodes
},
...
});
// Case insensitive search for titles containing 'foo':
$.ui.fancytree.getTree("#tree").filterNodes("foo");
// Pass additional options in order to restrict search to end nodes or
automatically expand matching nodes:
$.ui.fancytree.getTree("#tree").filterNodes("foo", {autoExpand: true, leavesOnly: true});For more complex searches, we can pass a compare function instead of a string. The matcher callback should return a truthy value in order to display a node.
var rex = new RegExp("foo", "i");
$.ui.fancytree.getTree("#tree").filterNodes(function(node) {
return rex.test(node.title);
});
$.ui.fancytree.getTree("#tree").filterNodes(function(node) {
return node.data.customFlag === true;
});We can match whole branches too, i.e. matching nodes include all descendants:
$.ui.fancytree.getTree("#tree").filterBranches(function(node) {
return node.key === "abc";
});The matcher callback can return the special values "skip" and "branch".
This allows to mix branch-mode and simple-mode:
var rex = new RegExp("foo", "i");
$.ui.fancytree.getTree("#tree").filterNodes(function(node) {
var match = rex.test(node.title);
if( match && node.isFolder() ) {
return "branch"; // match the whole 'Foo' branch, if it's a folder
} else if( node.data.ignoreMe ) {
return "skip"; // don't match anythin inside this branch
} else {
return match; // otherwise match the nodes only
}
});Automatic highlighting only works for string arguments.
If a custom matcher callback is used, Fancytree cannot figure out what part
caused a match, but we can set 'node.titleWithHighlight' explicitly to a string
that contains <mark> tags:
tree.filterNodes(function(node) {
if( rex.test(node.title) ) {
node.titleWithHighlight = "<mark>" + node.title + "</mark>";
return true;
}
}
});