Geek asks and answers

JsTree Search: show trays

How can I get jsTree to hide inconsistent elements, but still display trays of matched elements?

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

show_only_matches: false

Or you can hide all inconsistent elements by setting

 show_only_matches: true

But this option also hides trays of matching nodes.

+5
source share
3 answers

Finally, I found a solution, although it does not look very nice, but it works. Just pass the found elements to the enableSubtree () function, and it will show the nodes and take care of the correct appearance (that is, the dashed lines will be 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 to this function might look like this:

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

CSS.jstree-search.

+1

"search.jstree" - ? ( show_only_matches = false)

 $("#mytreecontainerid").bind("search.jstree", function (e, data) {
   // close the whole tree if a search text in set
   if (data.rslt.str.length>0) $("#mytreecontainerid").jstree('close_all');

   // open the found nodes' parent
   for (var i = 0 ; i<data.rslt.nodes.length ; i++) {
     data.inst._get_parent(data.rslt.nodes[i]).open_node(this, false);
     /* here you can do any additional effect to your node */
   }
 });
0

, .

    filterTree = function (elem) {
        $('li a', elem).not(".jstree-search").parent().css('display', 'none');
        $('a.jstree-search', elem).parentsUntil(elem, 'li').css('display', 'block');
    };

jstree.

    filterTree($treeVar);

This may not be the optimal solution, but it works great :)

0
source

More articles:


All Articles