jsTree Hide Checkbox | 易学教程

问题

I am using the jsTree jQuery plugin to display a 5 level deep tree. I would like to not show checkboxes on the last level. Is there any way to do that in the setting or some jquery processing I can do afterwards to remove those checkboxes? I am able to disable them using they types plugin, but I really want them to not be visible.

Here is an exmple of my tree "[x]" = a checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
        [x] lvl 5a
        [x] lvl 5b
        [x] lvl 5c

Here is an exmple of what I want "[x]" = a checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
          lvl 5a
          lvl 5b
          lvl 5c

EDIT ANSWER FOUND

Found the answer. Add the .bind that will get called when the tree is loaded then some simple jquery to hide the checkbox.

$("#right-tree2").bind("loaded.jstree", function(event, data) {
   $('.lvl4').find('ins.jstree-checkbox').hide();
})
.jstree({....});

回答1:

If you're creating the tree from JSON, then I've found the easiest way to remove the nodes is using some css.

In the actual JSON, set the a_attr field of the nodes you want to be disabled to "no_checkbox" as below. This will add the class "no_checkbox" to the <a> element that contains the node text, icons and checkboxes.

node = { text: "foo", a_attr: { class: "no_checkbox" } }
In the css, create a selector like this:

.no_checkbox>i.jstree-checkbox { display:none }
Done!

This will only select checkboxes that are directly inside the <a> element with the no_checkbox class, and it will remove them from the layout. The advantage of this method over the other answers is that you can bring back the checkbox just by removing the class no_checkbox from the <a> element. For example you can do this in the event handlers for the select_node.jstree event, and then get the DOM node that's passed in as an argument.

Of course if you're inputting data using HTML instead of JSON, you can just add the css class into the html manually, or using php/other server side language, and it will work just the same.

回答2:

To completely hide checkbox from the specific node giving that node data is coming from server, add following JS code

$('#tree_2').on('ready.jstree', function () {
  $("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
  $("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";

....
});

and in CSS, add the following style

.no_checkbox > i.jstree-checkbox {
	display: none;
}

It will completely hide checkbox from provided node id, this worked like a charm for me. Thanks to this link.

回答3:

You can also prevent the checkbox plugin from adding them:

Add a class to the <a> tag of any node type that you do not want to have a checkbox (I used the same as my rel).

Edit jquery.jstree.js Checkbox plugin to add the classes to the .not() statement where the checkboxes are added to the DOM. In 1.0-rc3 it looks like this (around line 2870):

$t.children("a" + (_this.data.languages ? "" : ":eq(0)") ).not(":has(.jstree-checkbox) // ADD THE LIST OF CLASSES HERE - BE SURE TO INCLUDE THE DOTS AND SEPARATE WITH COMMAS ").prepend("<\ins class='jstree-checkbox'>&#160;<\/ins>").parent().not(".jstree-checked, .jstree-unchecked").addClass( ts ? "jstree-unchecked" : c );

This way, you don't have to add, then remove them (bad practice if it can be avoided).

回答4:

try this,

$("#right-tree2").bind("loaded.jstree", function(e, data) {
    var currentNode = data.rslt.obj.attr("id");
    var nodeLevel = data.inst.get_path().length;
    if(nodeLevel == 4){
         $('#'+currentNode).find('> a > .jstree-checkbox').remove();
    }
})

回答5:

I found another solution using css. This simple code hides the checkbox in the first layer

.jstree-container-ul>li>a>i.jstree-checkbox
{
    display:none
}

来源：https://stackoverflow.com/questions/6112567/jstree-hide-checkbox

标签

jquery

jstree