Question

我正在使用带有复选框插件的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，我不确定是否可以使用此方法。

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

谢谢！

麦克

Answer 1

如果您没有对功能进行更改，并且只是想要在视觉上隐藏某些节点的复选框，则应使用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中的execellent开发工具来帮助我破译jstree样式以找出上面的CSS。

Answer 2

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

Answer 3

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

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

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

Answer 4

只需添加 CSS ：

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

隐藏jsTree中的复选框

4 个答案: