jsTree隐藏复选框 [英] jsTree Hide Checkbox

问题描述

我正在使用jsTree jQuery插件显示5级深树.我不想在最后一级显示复选框.有什么方法可以在设置中执行此操作，还是可以在以后进行一些jquery处理以删除这些复选框?我可以使用它们键入插件来禁用它们，但我真的希望它们不可见.

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.

这是我的树的一个"[x]" =复选框

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

这里是我想要的"[x]" =复选框的一个例子

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

编辑答案

找到了答案.添加将在加载树时调用的.bind，然后添加一些简单的jquery来隐藏复选框.

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

推荐答案

如果您要通过JSON创建树，那么我发现删除节点的最简单方法是使用CSS.

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

1. 在实际的JSON中，将要禁用的节点的a_attr字段设置为"no_checkbox"，如下所示.这会将类"no_checkbox"添加到包含节点文本，图标和复选框的<a>元素中.

node = { text: "foo", a_attr: { class: "no_checkbox" } }

node = { text: "foo", a_attr: { class: "no_checkbox" } }

在CSS中，创建一个如下所示的选择器:

In the css, create a selector like this:

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

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

完成！

这只会选择no_checkbox类直接位于<a>元素内部的复选框，并将其从布局中删除.与其他答案相比，此方法的优点在于，只需从<a>元素中删除类no_checkbox，就可以带回该复选框.例如，您可以在select_node.jstree事件的事件处理程序中执行此操作，然后获取作为参数传递的DOM节点.

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.

当然，如果您要使用HTML而不是JSON输入数据，则只需将css类手动添加到html中，或使用php/其他服务器端语言，即可使用.

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.

这篇关于jsTree隐藏复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！