Question

如何让jsTree隐藏不匹配的元素，但仍显示匹配元素的子节点？

据我所知，只有两种可能性，它们都不适合这种情况。您可以通过设置

使jsTree完全隐藏任何元素

show_only_matches: false

或者您可以通过设置

使其隐藏所有不匹配的元素

 show_only_matches: true

但是这个选项也隐藏了匹配节点的子节点。

Answer 1

最后，我找到了解决方案，虽然它看起来并不好看，但它确实有效。只需将找到的元素传递给 enableSubtree（） -function，它就会显示节点并注意正确的外观（即虚线显示并正确隐藏）。

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;
};

此函数的调用可能如下所示：

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

因为所有找到的节点都会收到CSS类 .jstree-search 。

Answer 2

"search" : {
   "show_only_matches"          : true,
   "show_only_matches_children" : true
}

Answer 3

你是否尝试用类似的东西重载“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 */
   }
 });

Answer 4

这是我为过滤做的一个简单代码。

    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);

它可能不是最佳解决方案，但它完美运行：）

jsTree搜索：显示子节点

4 个答案: