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”类添加到包含节点文本、图标和复选框的 元素。

   节点 = {
       文本：“foo”，
       a_attr: {
           类：“no_checkbox”
       }
   }
   

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

   .no_checkbox>i.jstree-checkbox
   {
       显示：无
   }
   

3. 完成！

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

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

Answer 2

要完全隐藏特定节点的复选框（假设该节点数据来自服务器），请添加以下 JS 代码

$('#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";

....
});

并在 CSS 中添加以下样式

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

它将完全隐藏提供的节点 ID 中的复选框，这对我来说就像一个魅力。 感谢此链接。

Answer 3

您还可以阻止复选框插件添加它们：

1. 将一个类添加到您不希望有复选框的任何节点类型的 标记中（我使用的与my rel)。

2. 编辑jquery.jstree.js复选框插件，将类添加到 .not() 语句，其中复选框将添加到 DOM。在 1.0-rc3 中，它看起来像这样（大约第 2870 行）：

   $t.children("a" + (_this.data.languages ? "" : ":eq(0)") ).not(":has(.jstree-checkbox) // 添加此处的类列表 - 请务必包含点并用逗号分隔 ").prepend("<\ins class='jstree-checkbox'> <\/ins>").parent( ).not(".jstree-checked, .jstree-unchecked").addClass( ts ? "jstree-unchecked" : c );
   

这样，您不必添加然后删除它们（如果可以避免的话，这是不好的做法）。

Answer 4

试试这个，

$("#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();
    }
})

Answer 5

我找到了另一个使用 css 的解决方案。这个简单的代码隐藏了第一层中的复选框

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

Answer 6

我在 @Migwell 的答案中添加了我自己的开发，其中我使用了“Types”jstree 插件。

对于 OP 的用例，他可以简单地向每个级别添加一种类型，或者仅向最后一个级别添加一个类型，以最简单的为准。他不想要复选框的级别将类添加到其 a_attr 中。 Types 插件的 a_attr 接受一个对象。

            "types": {
                "lvl5": {
                    "a_attr": {class: "no_checkbox"}
                }