如何从 jsTree 隐藏根节点？答案

【问题标题】：How to hide root node from jsTree?如何从 jsTree 隐藏根节点？
【发布时间】：2012-05-12 21:06:15
【问题描述】：

[#1] 我想从 jstree 隐藏根节点？

我在 "Root" 节点上附加了几个子根节点，所以我想从 jsTree 中隐藏根节点？

应用以下 CSS 隐藏根节点后，IE8 中出现 Look n feel 问题：

    $("ul:contains('Root')").css('position','relative');
    $("ul:contains('Root')").css('top','-20px');
    $("ul:contains('Root')").css('left','-20px');

[#2] 在以下 core 插件中，

我为根节点提供了硬编码值（Root_ID）以打开根节点最初，它工作正常

"core" : { initially_open" : [ "Root_ID" ] }

根节点 ID 可能会有所不同 RootID、RID、Root_id、R_ID .....因为我们提供不同的 xml 响应。

伪代码类似于：

"core" : { initially_open" : [ **1st_node_of_Tree_like_(ul > li:first)_OR_$(".jstree-last").first()** ] }

我怎样才能实现这两件事？

在此问题上的任何帮助或指导将不胜感激。

【问题讨论】：

标签： jquery jquery-ui jquery-selectors jstree

【解决方案1】：

这有点违反直觉，但创建没有显式根节点的树的最佳方法是在数据中不提供任何根节点，并使根节点的所有子节点都有父节点“#”。 jstree 将呈现具有多个根的顶级子级的树。避免任何试图隐藏根的混乱。

【讨论】：

【解决方案2】：

我找到了非常简单的答案:)

$("#treeViewDiv").bind("loaded.jstree", 
 function (event, data) {
       // To hide root nodes text
       $("a:contains('Root')").css("visibility","hidden")  
       // Need to find other way to hide rootNodeName Any1 knows ?

       // To hide - icon
       $(".jstree-last .jstree-icon").first().hide()
  });

【讨论】：

它不适用于我的 "loaded.jstree" (jstree-rails-4-3.2.1)，"ready.jstree" 正在工作。

【解决方案3】：

尝试：

$("a:contains('Root')").css("visibility","hidden")

或

$("a:contains('Root')").css("display","none")

也许jsTree中也有一个选项，但我不熟悉那个库。

更新：

假设您的 jsTree 在某种 div 中，请尝试移动它直到隐藏根元素：

$("ul:contains('Root')").css('position','relative');
$("ul:contains('Root')").css('top','-20px');
$("ul:contains('Root')").css('left','-20px');

您可能需要编辑 css 选择器 ("ul:contains('Root')") 才能获得正确的 ul。此外，您可能想要编辑移动的数量top 和left

【讨论】：

感谢您的回复 :) 只有“根”名称被隐藏。 “-”图标未隐藏。我想隐藏两者，即+ Root。被 jsTree 用来显示 - 图标。如何隐藏 - 根节点相关的图标？
感谢两件事情都很好:)。 [#1] 提供的 css 对所有浏览器都有效？ [#2]有什么办法可以避免示例中提到的硬编码值（“Root”），同时隐藏根节点[icon和rootNodeName]。它可能会发生根名称可能会不时更改。这种情况下怎么办？
答案很有用:) 只有当我们能够删除上面评论中提到的硬编码值时，我才会接受这个答案:)
应用提供的css隐藏根节点后。外观问题仅出现在 IE8 中。查看更新的问题 + 添加的第二张图片
只要确保周围的 div 有 overflow:hidden set in css

【解决方案4】：

对我来说，另一个有效的解决方案（至少在 Chrome 和 Firefox 中）是：

#root>ins, #root>a{
    display: none;
}

ul>#root{
    position: relative;
    /*top: -20px;*/
    left: -20px;
}

【讨论】：

【解决方案5】：

$("#yourTreeDiv").on("loaded.jstree", function(e, data) {
    $("#yourTreeDiv > ul > li > i.jstree-icon").remove();
    $("#yourTreeDiv > ul > li > a.jstree-anchor").remove();
});

【讨论】：

【解决方案6】：

在 JS 中：

.on('after_open.jstree', function(e, data){
        var a = $('#file_tree').find('i');
        $(a[0]).hide();
        $(a[1]).hide();
    })

在css中：

.jstree {
  display: inline-block;
  padding-right: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

【讨论】：