Jstree - 在所有 Jstree 中每次只允许检查一个节点

Question

我有一个 jstree 填充了数据，我只是想限制用户只检查所有 jstree 中的一个节点，当检查另一个节点时，取消选中第一个节点并检查另一个节点。

复选框属性多为 false 不起作用。我的复选框插件配置如下：

    'checkbox': {
        'whole_node': false,
        'tie_selection': false,
        'multiple': false,
        'three_state': false,
        'cascade': 'down'
    },

谢谢你。

Answer 1

想要限制用户仅检查所有 jstree 中的一个节点，并且在检查另一个节点时取消选中第一个节点并检查另一个节点。

要实现您的上述需求，您可以参考以下代码片段。

隐藏根节点的复选框

<style>
    .jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
    .jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox {
        display: none;
    }
</style>

HTML代码

<div id="tree">
    <ul>
        <li id="pnode_1">
            ParentNode 1
            <ul>
                <li id="child1_1">ChildNode 1</li>
                <li id="child1_2">ChildNode 2</li>
            </ul>
        </li>
        <li id="pnode_2">
            ParentNode 2
            <ul>
                <li id="child2_1">ChildNode 1</li>
                <li id="child2_2">ChildNode 2</li>
                <li id="child2_3">ChildNode 3</li>
            </ul>
        </li>
       
    </ul>
</div>

JS代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
    $(function () {
        var Tree = $("#tree").jstree({
            'checkbox': {
                'whole_node': false,
                'tie_selection': false,
                'keep_selected_style': false,
                'cascade': 'down'
            },
            "plugins": ["checkbox"]
        });

        //overwrite default behaviour of check_node function

        Tree.on("check_node.jstree", function (e, data) {
            var selectedNodes = $("#tree").jstree().get_checked();
            console.log(selectedNodes);

            console.log(data.node.id);

            if (selectedNodes.length > 1) {
                $("#tree").jstree().uncheck_node(selectedNodes[0]);
            }
        });
    });
</script>

测试结果

Answer 2

我相信我已经找到了更好的解决方案来解决这个问题

为了从jsTree隐藏分支节点

的复选框

，请采取

CSS

表格Fei Han答案

<style>
    .jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
    .jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox
    {
        display: none;
    }
</style>

使用以下代码片段本机限制多个树节点的选择

$("#my-tree").jstree({
    "core": {
        "multiple": false
    },
    "plugins": [
        "checkbox",
    ],
    "checkbox":
    {
        "cascade_to_disabled": false,
    },
});

所有的魔法都完成了：

"core": { "multiple": false }

在

jsTree

google组

找到答案