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 }'>

在调用时打开root并禁用click。希望它有所帮助。

<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>

Answer 3

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

我使用'conditionalselect'插件解决了我的问题。

$('#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

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

3 个答案: