web-dev-qa-db-ja.com

JSTree-親ノードでの選択を無効にしますが、クリックすると拡張できます

優れたJSTree3.0.2を試しています。 1レベルの子ノードを持つツリーがあります。親ノードがクリックされたときに展開したいのですが、親ノードを選択可能にしたくありません。子ノードのみを選択可能にする必要があります。

次を使用して、クリックすると親ノードを開くことができます。

$("#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);
});

親ノードの選択を防ぐ方法についてのアイデアはありますか？

javascriptjqueryjstree
11
JohnOT

私はこれがここでのパーティーにかなり遅れていることを知っています、しかし私はこれと同じ問題を抱えていました。

これは私がそれを回避した方法です-多分それはこの問題を抱えている他の誰かを助けるでしょう。

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

基本的に、子がある場合は、ノードが選択された直後にノードの選択を解除してから、展開します。

18
Kirbos

パーティーに非常に遅れていますが、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
RickL

無効化されたアイテムの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>
  }
});

クリックするとノードを確認し、展開折りたたみロジックをトリガーできます。この投稿を確認することもできます： jsTreeノードの選択を防ぐ

2
Kaloyan Stamatov