jsTree Ocultar casilla de verificación

Question

Estoy usando el plugin jQuery jsTree para mostrar un árbol de 5 niveles de profundidad. Me gustaría no mostrar casillas de verificación en el último nivel. ¿Hay alguna forma de hacerlo en la configuración o algún procesamiento jquery que pueda hacer luego para eliminar esas casillas de verificación? Puedo desactivarlos usando el plugin de tipos, pero realmente quiero que no sean visibles.

Aquí es un exmple de mi árbol "[x]" = una casilla

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

Aquí es un exmple de lo que quiero "[x]" = una casilla

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

EDITAR RESPUESTA ENCONTRADA

Encontrado la respuesta. Agregue el .bind que se llamará cuando se cargue el árbol y luego un simple jquery para ocultar la casilla de verificación.

$("#right-tree2").bind("loaded.jstree", function(event, data) { 
    $('.lvl4').find('ins.jstree-checkbox').hide(); 
}) 
.jstree({....}); 

Answer 1

También puede evitar que el plugin casilla de verificación de la suma de ellas:

1. agregar una clase a la etiqueta de cualquier tipo de nodo <a> que no quiere tener una casilla de verificación (que se utilizó el mismo como mi rel).

2. Editar jquery.jstree.js de casilla de verificación de plugins para agregar las clases a la .no() Declaración donde se añaden las casillas de verificación para el DOM. En 1,0-RC3 Parece que este (alrededor de la línea 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); 
   

De esta manera, usted no tiene que añadir, a continuación, eliminarlos (mala práctica si puede ser evitado).

Answer 2

probar esto,

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

Answer 3

Si va a crear el árbol de JSON, a continuación, he encontrado la manera más fácil para eliminar los nodos está usando un poco de CSS.

1. En el JSON real, defina el campo a_attr de los nodos que desea desactivar para "no_checkbox" de la siguiente manera. Esto agregará la clase "no_checkbox" al elemento <a> que contiene el texto del nodo, los iconos y las casillas de verificación.

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

2. En el css, cree un selector de la siguiente manera:

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

3. hecho!

Esto sólo se seleccione las casillas de verificación que se encuentran directamente en el interior del elemento <a> con la clase no_checkbox, y se eliminarán de la disposición. La ventaja de este método sobre las otras respuestas es que puede traer la casilla de verificación simplemente eliminando la clase no_checkbox del elemento <a>.Por ejemplo, puede hacer esto en los controladores de eventos para el evento select_node.jstree y luego obtener el nodo DOM que se transfiere como argumento.

Por supuesto, si está ingresando datos usando HTML en lugar de JSON, puede simplemente agregar la clase css al html manualmente, o usar php/otro idioma del lado del servidor, y funcionará de la misma manera.

Answer 4

Encontré otra solución usando css. Este código simple oculta la casilla de verificación en la primera capa

.jstree-container-ul>li>a>i.jstree-checkbox 
{ 
    display:none 
}