隐藏jsTree中的复选框

Posted 2021-04-29

我正在使用带有复选框插件的jsTree来显示树。我只是使用无序列表（UL，LI）来定义我的树，然后：

    $(function() {
        $("#treeId").jstree({
        "themes" : {
            "theme" : "default",
            "dots": true,
            "icons": false
         },
            "plugins": ["themes", "html_data", "checkbox",
                        "ui", "crrm", "hotkeys"]
        });
    });

我用它来生成树。我需要一些方法来隐藏某些节点上的复选框。理想情况下，我会在我不想要复选框的节点上添加一个类，然后使用javascript相应地隐藏它们，但我还没有找到方法来执行此操作。一些solutions使用JSON属性来识别节点，但由于我没有使用JSON，我不确定我是否可以使用此方法。

我应该提到我的最终目标是隐藏所有非叶节点上的复选框，但基于类的通用解决方案会更有帮助。或者两种解决方案都很棒:)

谢谢！

麦克风

答案

如果您没有对功能进行更改，并且只是想要在视觉上隐藏某些节点的复选框，则应使用CSS。

例如，您的最终目标是隐藏所有非叶节点的复选框，这是实现该目标所需的CSS。

// First hide all checkboxes
ins.jstree-checkbox {
    display:none;
}

// Then display only checkboxes on leaf nodes
li[class~="jstree-leaf"] > a > ins.jstree-checkbox {
    display: inline-block;
} 

在顺便说一下，为什么你不能在工作中使用Chrome？我使用Chrome中优秀的开发人员工具来帮助我破译jstree样式以找出上面的CSS。

另一答案

对jsTree不太了解，我觉得你可以简单地看一下chrome中的DOM来识别你想要隐藏的节点。或者找到复选框插件创建的特定id或足迹，用于DOM中的复选框。一旦你知道这一点，你可以轻松地枚举它们并使用jQuery或纯javascript隐藏它们。

另一答案

终于搞定了这个。我在我想要隐藏复选框的所有节点上添加了一个class =“node”，然后在加载树之后我做了一些javascript：

$(".node").children().hide();

希望这可以帮助任何有同样问题的人。

另一答案

只需添加CSS：

.jstree-leaf .jstree-checkbox {
    display: none;
}