JSTree - 禁用父节点上的选择,但允许单击时进行扩展

Question

我正在尝试优秀的JSTree 3.0.2.我有一个具有一级子节点的树.单击父节点时,我希望它展开,但我不希望父节点可选 - 只应选择子节点.

我可以在点击时打开父节点:

$("#jstree_div").bind("select_node.jstree", function (e, data) {
return data.instance.toggle_node(data.node);
});

但我无法弄清楚如何使父节点不可选.
我创建了一个类型并将"select_node"设置为false:

"treeParent" : {
    "hover_node" : true,
    "select_node" : false
}       

然后使用以下命令将其分配给父节点:

data-jstree='{"type":"treeParent"}'

但是父节点仍然是可选择的.我在这里创建了一个jsfiddle:http: //jsfiddle.net/john_otoole/RY7n6/7/ 在该示例中,我使用以下内容来显示是否可以选择某些内容:

$('#jstree_div').on("changed.jstree", function (e, data) {
  $("#selected_element_div").text("Selected built-in: " + data.selected);
}); 

有关如何阻止选择父节点的任何想法？

Answer 1

我知道这在聚会方面已经很晚了,但我遇到了同样的问题.

这就是我如何解决它 - 也许它会帮助其他有这个问题的人.

$('#divCCSS').on('select_node.jstree', function (e, data) {
            if (data.node.children.length > 0) {
                $('#divCCSS').jstree(true).deselect_node(data.node);                    
                $('#divCCSS').jstree(true).toggle_node(data.node);                    
            }
        })

基本上,如果节点有子节点,则在选择节点后立即取消选择该节点,然后展开它.

Answer 2

聚会已经很晚了，但是使用 jsTree 3.0.4，像这样装饰根节点：

<li data-jstree='{ "opened" : true, "disabled" : true }'>

调用时打开根目录并禁用单击。希望能帮助到你。

<div id="js_tree_container">
    <ul>
        <li data-jstree='{ "opened" : true, "disabled" : true }'>
            <a href="javascript:void(0);" tite="Root Category">
                ROOT NODE
            </a>
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <span>Child One</span>
                    </a>
                    <ul>
                        <li>
                            <a href="javascript:void(0);">
                                <span>Child A</span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">
                                <span>Child B</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <span>Child Two</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
    $('#js_tree_container').jstree({
        'core': {
            'themes': {
                'name': 'default',
                'responsive': true
            },
            'check_callback': true
        }
    }).bind("select_node.jstree", function (e, data) {
        var href = data.node.a_attr.href;
        document.location.href = href;
    });
</script>