ExtFilter

About Fancytree filter extension.

• Status: beta
• example

Allow to dimm or hide nodes based on a matching expression.

Options

• autoApply, type: {boolean}, default: true
  Re-apply filter on lazy loading.

• mode, type: {'dimm' | 'hide'}, default: 'dimm'
  Defines if unmatched nodes are grayed out or hidden.

Events

(n.a.)

Methods

• {void} tree.clearFilter()
  Reset the filter.

• {integer} tree.filterBranches(filter, opts)
  Dimm or hide unmatched branches. Matching nodes are displayed together with all descendants.
  filter: {function | string}
opts {object}, default: {autoExpand: false}.
    autoExpand: Temporarily expand matching node parents, while filter is active.

• {integer} tree.filterNodes(filter, opts)
  Dimm or hide unmatched nodes.
  filter: {function | string}
opts {object}, default: {autoExpand: false, leavesOnly: false}.
    autoExpand: Temporarily expand matching node parents, while filter is active.
    leavesOnly: Defines if only end nodes should be considered for matching.

Example

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

  <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
  <link href="skin-win8/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.filter.js" type="text/javascript"></script>

$("#tree").fancytree({
  extensions: ["filter"],
  ...
});
// Case insensitive search for titles containing 'foo':
$("#tree").fancytree("getTree").filterNodes("foo");

// Pass additional options in order to restrict search to end nodes or 
automatically expand matching nodes:
$("#tree").fancytree("getTree").filterNodes("foo", {autoExpand: true, leavesOnly: true});

For more complex searches, we can pass a compare function instead of a string:

var rex = new RegExp("foo", "i");
$("#tree").fancytree("getTree").filterNodes(function(node) {
  return rex.test(node.title);
});

$("#tree").fancytree("getTree").filterNodes(function(node) {
  return node.data.customFlag === true;
});

We can match whole branches too, i.e. matching nodes include all descendants:

$("#tree").fancytree("getTree").filterBranches(function(node) {
  return node.key === "abc";
});

Recipes

[Howto] ...