2012-05-03 56 views
3

[#1] 我想从jstree隐藏根节点?如何从jsTree隐藏根节点?

我附加了几个子根节点到“根”节点,所以我想从jsTree隐藏根节点?

enter image description here

应用下面的CSS要隐藏根节点,查找ñ感觉问题之后排在IE8:

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

CSS issue in IE8 to hide root node

[#2] 在以下核心插件,

我提供了硬编码值(个Root_ID)为根节点到最初打开根节点,它工作正常

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

根节点ID可能会发生变化RootID,RID,Root_id,R_ID .....如我们所提供的不同的XML响应。

Psudo代码是这样的:

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

如何我能实现这个两件事情?

任何有关此事的帮助或指导,将不胜感激。

回答

2

尝试:

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

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

也许也有在jsTree一种选择,但我不familar与库。

更新:

假设你jsTree是在某种股利,尝试移动它,直到根元素是隐藏的:

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

+0

感谢您的回复:)只隐藏“Root”名称。 “ - ”图标不隐藏。我想隐藏两个即+根。  被jsTree用来显示 - 图标。如何隐藏 - 与根节点相关的图标? – StackOverFlow

+0

查看我的更新 – snies

+0

感谢这两件事工作正常:)。 [#1]如果CSS对所有浏览器都有效? [#2]在隐藏Root节点[icon和rootNodeName]的同时,是否有任何方法可以避免示例中提到的硬编码值(“Root”)。可能发生的根名称可能会随时变化。在那种情况下如何? – StackOverFlow

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

它不适用于“loaded.jstree”对我来说(jstree-rails-4-3.2.1),''ready.jstree“'正在工作。 – 244an

0

是工作(至少在Chrome和Firefox)另一种解决方案,对我来说,是:

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

ul>#root{ 
    position: relative; 
    /*top: -20px;*/ 
    left: -20px; 
} 
0
$("#yourTreeDiv").on("loaded.jstree", function(e, data) { 
    $("#yourTreeDiv > ul > li > i.jstree-icon").remove(); 
    $("#yourTreeDiv > ul > li > a.jstree-anchor").remove(); 
}); 
0

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

这是一个有点违反直觉,但要创建没有明确的根节点树最好的办法是不提供数据中的任何根节点,使根的所有的孩子节点有父母“#”。 jstree将渲染一棵具有多个根级子级的树。避免任何混乱,试图隐藏根。