2

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

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

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

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

谢谢！

麦克风

4

4 回答 4

8

如果您没有对功能进行更改，并且只想在视觉上隐藏某些节点的复选框，则应该使用 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。

于 2012-08-29T18:04:41.237 回答
0

对 jsTree 不太了解，对我来说，您可以简单地查看 chrome 中的 DOM 来确定要隐藏哪些节点，这似乎是合乎逻辑的。或者为 DOM 中的复选框找到复选框插件创建的特定 id 或封装。然后，一旦您知道这一点，您就可以轻松地枚举它们并使用 jQuery 或纯 javascript 隐藏它们。

于 2012-08-28T22:11:45.640 回答
0

终于得到了这个工作。我在我想隐藏复选框的所有节点上添加了一个 class="node"，然后在加载树后我执行了这段 javascript：

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

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

于 2012-09-13T15:40:51.313 回答
0

只需添加CSS：

.jstree-leaf .jstree-checkbox {
    display: none;
}
于 2019-03-29T08:00:17.737 回答