JSTree - deaktiviert die Auswahl auf einen übergeordneten Knoten, sondern ermöglichen Erweiterung auf klicken Sie auf

Ich versuche die ausgezeichnete JSTree 3.0.2. Ich habe eine Baumstruktur mit einer Ebene der untergeordneten Knoten. Wenn Sie einen übergeordneten Knoten geklickt wird, will ich ihn zu erweitern, aber ich möchte nicht den übergeordneten Knoten wählbar - nur die Kind-Knoten wählbar sein müssen.

Bekomme ich den übergeordneten Knoten zu öffnen, klicken Sie auf auf mit:

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

Aber ich kann nicht herausfinden, wie man die übergeordneten Knoten nicht wählbar.

Ich habe eine Art und eingestellt haben "select_node" auf "false":

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

Dann zugewiesen, dass auf den übergeordneten Knoten mit:

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

Aber die übergeordneten Knoten sind noch wählbar. Ich habe ein jsfiddle hier:
http://jsfiddle.net/john_otoole/RY7n6/7/
In diesem Beispiel verwende ich im folgenden zu zeigen, ob etwas ist wählbar:

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

Irgendwelche Ideen auf, wie um zu verhindern, dass die Auswahl von einem übergeordneten Knoten?

  • Dies könnte Ihnen dabei vielleicht helfen: groups.google.com/forum/#!Thema/jstree/Av0gRAVr1TM
  • Ich habe das link, aber konnte es nicht zu funktionieren - vielleicht-syntax funktioniert nicht mit JSTree 3.0.2. Am Ende habe ich beschlossen, damit die übergeordneten Knoten auswählbar sein und ich werde arbeiten, um es.
InformationsquelleAutor JohnOT | 2014-06-29
  1. 13

    Ich weiß, das ist so spät zur party hier, aber ich hatte das gleiche problem.

    Dies ist, wie ich um ihn herum-vielleicht hilft es jemand anderen, der mit diesem problem.

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

    Grundsätzlich deaktivieren Sie die Knoten, nachdem es ausgewählt wurde, wenn es Kinder hat, dann erweitern Sie es.

    • Ihr timing war perfekt, vielen Dank 😉
    • Vielen Dank für diesen trick, ich schlage vor, mit data.instance statt $('#divCCSS').jstree(true) aus dem Rückruf
    InformationsquelleAutor Kirbos
  2. 3

    Mehr als sehr spät zur party, aber mit jsTree 3.0.4, die Dekoration der root-Knoten wie folgt:

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

    öffnet den root, wenn aufgerufen, und klicken Sie auf deaktiviert. Hoffe, es hilft.

    <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>
    • Danke für das follow up!
    InformationsquelleAutor RickL
  3. 2

    Ich hatte ein anderes Problem, um zu verhindern, dass select_node.jstree-event für deaktivierte Elemente, aber ich denke, es kann für Ihren Fall.

    Ich mein problem gelöst, indem Sie 'conditionalselect' plugin.

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

    Können Sie die Knoten auf und klicken Sie auf trigger einige expand collapse Logik.
    Kannst du auch diesen post : verhindern jsTree-Knoten auswählen

    InformationsquelleAutor Kaloyan Stamatov
Schreibe einen Kommentar