¿Cómo creo un nuevo nodo HTML jsTree con el plugin CRRM correctamente?

Question

Aquí está mi situación: usando PHP y MySQL como mi backend, jQuery y jsTree para mi interfaz.

Mi árbol está a la izquierda, y al hacer clic en un nodo se activará cierta información que se cargará en un cuadro flotando a la derecha del árbol. Pueden agregar/editar/eliminar nodos en este árbol con este comportamiento (sin recargar página, todo Ajax).

Actualmente, puedo agregar correctamente un nodo al árbol. Tomo la entrada del usuario para el nuevo nodo, y si todo pasa la validación (primero del lado del cliente, segundo del lado del servidor), se agrega un nuevo "nodo" a mi base de datos MySQL, y luego actualizo jsTree sobre la marcha con algún Javascript agregando un nuevo nodo a su padre (en la carga de la página inicial, PHP construye correctamente un árbol HTML con listas desordenadas y elementos de la lista).

Mi pregunta simple: ¿cómo agrego un nuevo nodo al jsTree con un atributo "ID" para el elemento de la lista ("LI")?

Como referencia, así es como se ve mi árbol HTML. Esto se entregó a jsTree y es HTML_DATA plugin:

<ul> 
    <li class="plant" id="plant_3"><a href="javascript:void();">Plant Three</a> 
    </li> 
    <li class="plant" id="plant_1"><a href="javascript:void();">Plant One</a> 
    <ul> 
      <li class="area" id="area_2"><a href="javascript:void();">Area Two</a> 
     </li> 
      <li class="area" id="area_1"><a href="javascript:void();">Area One</a> 
    <ul> 
      <li class="building" id="building_1"><a href="javascript:void();">Building One</a> 
     <ul> 
       <li class="floor" id="floor_2"><a href="javascript:void();">1st Floor</a> 
      </li> 
       <li class="floor" id="floor_3"><a href="javascript:void();">2nd Floor</a> 
      </li> 
       <li class="floor" id="floor_1"><a href="javascript:void();">Ground Floor</a> 
      </li> 
      </ul> 
     </li> 
     </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

Mis clics con el ratón están codificados en los números de identificación que cada nodo tiene ("Plant_1", "area_3", etc.) En la actualidad, cuando agrego un nodo jsTree , lo hago de esta manera (a través del plug-in CRRM):

$("#my_tree").jstree("create", null, false, name, {attr : "id=plant_"+id}, true); 

#my_tree se inicializa con esto:

$("#my_tree").jstree({ 
"ui" : { 
    "select_limit" : 1, 
    "selected_parent_close" : "select_parent" 
}, 
"html_data" : { 
    "ajax" : { 
    "url" : "file.php?action=get_my_tree", 
    "data" : function (n) { 
     return { 
    id : n.attr ? n.attr("id"): 0 
    }; 
    } 
    } 
}, 
"core" : { 
    "animation" : 0 
}, 
"plugins": [ "ui", "themes", "html_data", "hotkeys", "crrm"] 
    }); 

¿Alguna idea? La documentación del complemento CRRM menciona un tercer parámetro (en mi código anterior, el "{attr:" id = planta _ "+ id}") que define los datos 'attr' en forma de objeto.

Una solución ideal sería el objeto adecuado para pasar a jsTree + CRRM, pero buscaría incluso una solución pirateada donde una línea adicional de Javascript después de mi línea "crear", donde "manualmente" agregue una ID al elemento LI recién insertado.

Como referencia, aquí está el código HTML que jsTree inserta con mi "crear" línea anterior:

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li> 

Answer 1

Por lo tanto, el problema con esta línea:

$("#my_tree").jstree("create", null, false, name, { 
    attr : "id=plant_" + id 
}, true); 

Es eso attr del objeto, JavaScript es también un objeto. La línea correcta es la siguiente:

$("#my_tree").jstree("create", null, false, name, { 
    attr : { 
     id: 'plant_' + id 
    }, 
    data: name 
}, true); 

Para que pueda determinar varios atributos para dar su nueva hoja. El atributo "id" se le da al LI (elemento de la lista), que es precisamente lo que necesitaba.

La documentación jsTree menciona que los atributos deben ser objetos JS, pero no estoy demasiado familiarizado con mucha de la sintaxis de Javascript, incluidos los objetos.

Sólo para la posteridad, esto es lo que se añade a HTML de la jsTree:

<li id="plant_x" class="jstree-leaf"> 
    <ins class="jstree-icon">&nbsp;</ins> 
    <a href="#"> 
     <ins class="jstree-icon">&nbsp;</ins> 
     New Node! 
    </a> 
</li>