Geek asks and answers

How to hide node root from jsTree?

[# 1] I want to hide the root node from jstree?

I added a few sub-roots of the node to the Root node, so I want to hide the root node from jsTree?

enter image description here

After applying the following CSS To hide the root node, a problem with viewing n appeared in 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] In the next core plugin ,

I introduced a string encoded value ( Root_ID ) for a Root node to open a Root node Initially, it works great

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

Root node identifiers can vary RootID, RID, Root_id, R_ID ..... since we provide different xml answers.

Psudo code is something like:

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

How can I achieve these two things?

Any help or guidance in this matter would be appreciated.

+3
6

, root node - node node "#", jstree . .

+6

:

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


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

, jsTree , lib.

Update:

, 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

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

Another solution that worked (at least in Chrome and Firefox) for me:

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

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

In JS:

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

in css:

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

More articles:


All Articles