JSTree - 禁用父节点上的选择，但允许单击展开答案

【问题标题】：JSTree - disable selection on a parent node, but allow expansion on clickJSTree - 禁用父节点上的选择，但允许单击展开
【发布时间】：2014-06-29 22:19:55
【问题描述】：

我正在试用优秀的 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);
});

关于如何防止选择父节点的任何想法？

【问题讨论】：

这可能对您有所帮助：groups.google.com/forum/#!topic/jstree/Av0gRAVr1TM
我检查了该链接，但无法使其正常工作-也许该语法在 JSTree 3.0.2 中不起作用。最后我决定允许父节点是可选的，我会解决它。

标签： javascript jquery jstree

【解决方案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);                    
            }
        })

基本上，如果节点有子节点，则在它被选中后立即取消选择它，然后展开它。

【讨论】：

感谢这个技巧，我建议在回调中使用data.instance 而不是$('#divCCSS').jstree(true)

【解决方案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>

【讨论】：

感谢您的跟进！

【解决方案3】：

我有不同的问题来阻止禁用项目的 select_node.jstree 事件，但我认为它适用于您的情况。

我通过使用“条件选择”插件解决了我的问题。

$('#jstree').jstree({
  'conditionalselect' : function (node) {
    // Check node and call some method
    return (node['someProperty']) ? true : false;
  },
  'plugins' : ['conditionalselect'],
  'core' : {
    <core options>
  }
});

您可以在单击时检查节点并触发一些展开折叠逻辑。你也可以查看这个帖子：prevent jsTree node select

【讨论】：