Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jsTree Search: show subnodes

Tags:

jstree

How can I make jsTree hide non-matching elements, but still display the subnodes of matched elements?

As far as I know there are only two possibilities, that are both not suited for this case. You can either make jsTree hide no element at all by setting

show_only_matches: false

Or you can make it hide all non-matched elements by setting

 show_only_matches: true

But this option also hides the subnodes of matched nodes.

like image 909
m4r73n Avatar asked Nov 04 '22 20:11

m4r73n


2 Answers

Finally, I found the solution, though it doesn't look really nice, but it works. Just pass a the found elements the the enableSubtree()-function, and it will show the nodes and take care of the correct appearance (i.e. that the dotted lines are shown and hidden correctly).

enableSubtree = function(elem) {
  elem.siblings("ul:first").find("li").show();
  return correctNode(elem.siblings("ul:first"));
};

correctNode = function(elem) {
  var child, children, last, _j, _len1, _results;
  last = elem.children("li").eq(-1);
  last.addClass("jstree-last");
  children = elem.children("li");
  console.log(children);
  _results = [];
  for (_j = 0, _len1 = children.length; _j < _len1; _j++) {
    child = children[_j];
    _results.push(correctNode($(child).children("ul:first")));
  }
  return _results;
};

A call of this function could look like this:

enableSubtree($(".jstree-search"))

since all found nodes receive the CSS class .jstree-search.

like image 172
m4r73n Avatar answered Nov 14 '22 08:11

m4r73n


"search" : {
   "show_only_matches"          : true,
   "show_only_matches_children" : true
}
like image 25
Daniel Avatar answered Nov 14 '22 07:11

Daniel