jsTree Ausblenden-Checkbox

Ich bin mit dem jQuery-plugin jsTree display eine 5-level-tiefen Baum. Ich möchte nicht zeigen Kontrollkästchen auf der letzten Ebene. Gibt es eine Möglichkeit, das zu tun, in der Einstellung oder einige jquery Verarbeitung kann ich tun, danach entfernen Sie die Checkboxen? Ich bin in der Lage, deaktivieren Sie Sie, verwenden Sie Typen-plugin, aber ich will eigentlich nicht sichtbar sein.

Hier ist eine exmple von meinem Baum "[x]" = eine checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
        [x] lvl 5a
        [x] lvl 5b
        [x] lvl 5c

Hier ist eine exmple, was ich will "[x]" = eine checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
          lvl 5a
          lvl 5b
          lvl 5c

BEARBEITEN ANTWORT GEFUNDEN

Fand die Antwort. Fügen Sie die .binden, die wird aufgerufen wenn sich die Struktur geladen ist, dann einige einfache jquery zum ausblenden der checkbox.

$("#right-tree2").bind("loaded.jstree", function(event, data) {
   $('.lvl4').find('ins.jstree-checkbox').hide();
})
.jstree({....});
  • Sie müssen überprüfen, ob der Letzte Weg in Ihrem Baum. Das Letzte element hat weder nächsten Geschwister noch Kinder. Wenn dem so ist, Lesen Sie die übergeordneten Knoten und die entfernen oder ausblenden Kinder Checkboxen. Ich denke, Sie sollten ausgelagert diesen code in eine extra-Funktion und rufen Sie es, nachdem der Baum generiert wurde. Ich weiß, das nicht sehr effektiv, aber eine Möglichkeit, die funktionieren kann.
  • Ok, ich war in der Lage, entfernen Sie den Knoten mit einem kleinen problem. Wenn ich call $('.lvl4').find('ins.jstree-checkbox').hide(); auf eine Schaltfläche klicken, es funktioniert aber nicht gleich nach dem .jstree nennen. Gibt es eine Möglichkeit, einen Befehl auszuführen, nachdem der Baum fertig ist Rendern?
  • Ich weiß nicht, Ihren source-code,so dass ich nicht sagen kann, ob es überhaupt möglich wäre.
InformationsquelleAutor jbrook10 | 2011-05-24
  1. 18

    Wenn Sie beim erstellen der Struktur von JSON, dann fand ich die einfachste Möglichkeit zum entfernen der Knoten wird mit Hilfe einiger css-Dateien.

    1. In der eigentlichen JSON, legen Sie die a_attr Bereich der Knoten, die Sie möchten, deaktiviert werden, um "no_checkbox" als unten. Dies wird fügen Sie die Klasse "no_checkbox" der <a> element enthält: die Knoten-text, icons und Checkboxen.

      node = {
      text: "foo",
      a_attr: {
      class: "no_checkbox"
      }
      }

    2. In der css, erstellen Sie einen Selektor, wie dies:

      .no_checkbox>i.jstree-checkbox
      {
      display:none
      }

    3. Getan!

    Diese werden nur Checkboxen, die direkt in der <a> element mit der no_checkbox Klasse, und es wird entfernen Sie Sie aus dem layout. Der Vorteil dieser Methode gegenüber der anderen Antworten ist, dass Sie zurück bringen kann die checkbox nur durch die Beseitigung der Klasse no_checkbox von der <a> element. Zum Beispiel können Sie diese in das Ereignis-Handler für das select_node.jstree Veranstaltung, und dann erhalten Sie die DOM-Knoten übergeben als argument.

    Natürlich, wenn Sie die Eingabe von Daten über HTML-Code anstelle von JSON ist, können Sie fügen Sie einfach die css-Klasse in den html-Code manuell, oder unter Verwendung von php/andere server-side-Sprache, und es wird funktionieren genau das gleiche.

    InformationsquelleAutor Miguel
  2. 4

    Komplett ausblenden checkbox aus dem bestimmten Knoten geben, die Knoten-Daten kommen vom server, fügen Sie die folgende JS-code

    JS:

    $('#tree_2').on('ready.jstree', function () {
  $("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
  $("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";

....
});

    - und CSS, fügen Sie den folgenden Stil

    CSS:

    .no_checkbox > i.jstree-checkbox {
	display: none;
}

    Wird es komplett ausblenden Kontrollkästchen aus gegebenen Knoten-id, das arbeitete wie ein Charme für mich. Dank diesem link.

    InformationsquelleAutor Khateeb321
  3. 2

    Können Sie auch verhindern, dass die checkbox plugin hinzufügen:

    1. Hinzufügen einer Klasse zum <a> tag jeder node-Typ, den Sie wollen nicht zu haben, eine checkbox (ich habe die gleiche wie meine rel).

    2. Bearbeiten jquery.jstree.js Checkbox plugin zum hinzufügen von Klassen zu .nicht () - Anweisung, wo die Markierungsfelder werden Hinzugefügt, um den DOM. In 1.0-rc3 sieht es so aus (um die Zeile 2870):

      $t.children("a" + (_this.data.languages ? "" : ":eq(0)") ).not(":has(.jstree-checkbox) //ADD THE LIST OF CLASSES HERE - BE SURE TO INCLUDE THE DOTS AND SEPARATE WITH COMMAS ").prepend("<\ins class='jstree-checkbox'>&#160;<\/ins>").parent().not(".jstree-checked, .jstree-unchecked").addClass( ts ? "jstree-unchecked" : c );

    Diese Weise werden Sie nicht haben, um hinzuzufügen, dann entfernen Sie Sie (schlechte Praxis, wenn Sie vermieden werden kann).

    InformationsquelleAutor SnydeComments
  4. 0

    versuchen, diese,

    $("#right-tree2").bind("loaded.jstree", function(e, data) {
    var currentNode = data.rslt.obj.attr("id");
    var nodeLevel = data.inst.get_path().length;
    if(nodeLevel == 4){
         $('#'+currentNode).find('> a > .jstree-checkbox').remove();
    }
})
    InformationsquelleAutor mathi
  5. 0

    Ich eine andere Lösung gefunden, mit css. Dieser einfache code blendet das Kontrollkästchen in der ersten Schicht

    .jstree-container-ul>li>a>i.jstree-checkbox
{
    display:none
}
    InformationsquelleAutor regufo
Schreibe einen Kommentar