jquery - jsTree 隐藏复选框

Question

我正在使用 jsTree jQuery 插件来显示 5 层深的树。我不想在最后一级显示复选框。有什么办法可以在设置中做到这一点，或者事后我可以做一些 jquery 处理来删除这些复选框吗？我可以使用它们类型插件禁用它们，但我真的希望它们不可见。

这是我的树“[x]”=一个复选框的示例

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

这是我想要的示例“[x]”=一个复选框

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

编辑找到的答案

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

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

Answer 1

如果您从 JSON 创建树，那么我发现删除节点的最简单方法是使用一些 css。

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

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

2. 在 css 中，创建一个如下选择器:

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

3. 完成!

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

当然，如果您使用 HTML 而不是 JSON 输入数据，您可以手动将 css 类添加到 html 中，或者使用 php/其他服务器端语言，它的工作原理是一样的。