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。

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

node = { text: "foo", a_attr: { class: "no_checkbox" } }
在css中，创建一个这样的选择器：

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

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

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

Answer 2

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

＆＃13;

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

＆＃13;

并在CSS中添加以下样式

＆＃13;

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

＆＃13;

它将完全隐藏所提供节点ID的复选框，这对我来说就像一个魅力。 Thanks to this link

Answer 3

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

将类添加到您不希望有复选框的任何节点类型的<a>标记中（我使用与我的rel相同）。

编辑 jquery.jstree.js Checkbox插件，将类添加到.not（）语句中，其中复选框已添加到DOM中。在1.0-rc3中它看起来像这样（围绕第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 );

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

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的类中。类型插件的a_attr接受一个对象。

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

jsTree隐藏复选框

6 个答案: