jquery - 如何从 jsTree 隐藏根节点？

Question

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

我将几个子根节点附加到“根”节点，所以我想从 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] 在以下核心插件中，

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

"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()** ] }

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

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

Answer 1

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

Answer 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()
  });

Answer 3

尝试：

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

或者

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

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

更新：

假设您的 jsTree 在某种 div 中，请尝试移动它直到 Root Element 被隐藏：

$("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

Answer 4

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

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

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

Answer 5

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

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