Cómo establecer un ícono personalizado para jstree con html source

Question

Necesito tener un jstree configurable desde la base de datos y tengo problemas con los íconos (esta es solo otra columna en mi consulta que contiene el nombre del ícono) . El problema es que no puedo mostrarlo correctamente.

construyo esta lista añadiendo el atributo background-image:url('path'); señalar la imagen en la etiqueta <a> pero me siguen dando muestra que icono de la carpeta (la imagen no se repite, pero lo incluyo para easyer visualización del problema)

¿Cómo puedo hacer que jstree no muestre esa carpeta? Parece que jstree solo crea una imagen para todo el árbol (o al menos cada nivel). No sé cómo modificar eso.

Este es el html de la imagen de arriba.

<ul style=""><li id="1227_1226" class="leaf jstree-leaf"> 
<ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/Estrategia desarrollo.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Instructivo desarrollo 
      </a> 
     </li> 

     <li id="1227_1228" class="leaf jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0001 FormatoMantenimientoPlanificado-V1.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Mantenimiento planificado 
      </a> 
     </li> 

     <li id="1227_1229" class="leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0002 FormatoAnalisisRequisitos.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Análisis de requisitos 
      </a> 
     </li> 

     <li id="1227_1230" class="leaf jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0003 FormatoInstructivoInstalacion.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Instructivo de instalación 
      </a> 
     </li> 

     <li id="1227_1231" class="leaf jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0004 FormatoControlCalidadConstruccion.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Control de calidad 
      </a> 
     </li> 

     <li id="1227_1232" class="leaf jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0005 FormatoPruebasUsuario.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Pruebas de usuario 
      </a> 
     </li> 

     <li id="1227_1233" class="leaf jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0007 FormatoActas-V1.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Actas 
      </a> 
     </li> 

     <li id="1227_1263" class="leaf jstree-last jstree-leaf"><ins class="jstree-icon">&nbsp;</ins> 
      <a href="/arco/formatos/FO-0006 FormatoSolicitudSoporte V1.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon">&nbsp;</ins> 
       Solicitud de soporte 
      </a> 
     </li></ul> 

Así es como creo el árbol; llamadas ajax reciben una lista HTML:

$(function() { 
    $("#arbolMenu").jstree({ 
     "plugins" : [ "themes", "html_data", "cookies"], 
     "html_data" : { 
      "ajax" : { 
       "url" : "/arco/CtrlMenu", 
       "data" : function (n) { 
        return { id : n.attr ? n.attr("id") : -1 }; 
       } 
      } 
     } 
    }); 
}).delegate(".jstree-open>a", "click.jstree", function(event){ 
    $.jstree._reference(this).close_node(this, false, false); 
}).delegate(".jstree-closed>a", "click.jstree", function(event){ 
    $.jstree._reference(this).open_node(this, false, false); 
}); 

Answer 1

En lugar de especificar explícitamente el icono, utilice el Types Plugin que viene con jstree. Luego, para cada <li> en su html, asigne su propiedad rel al tipo que defina. Aquí está un ejemplo sencillo:

$(function() { 
    $("#demo1").jstree({ 
     "types" : { 
      "valid_children" : [ "web" ], 
      "types" : { 
       "web" : { 
        "icon" : { 
         "image" : "/arco/Menu/images/web.png" 
        }, 
       }, 
       "default" : { 
        "valid_children" : [ "default" ] 
       } 
      } 
     }, 
     "plugins" : ["themes","html_data","dnd","ui","types"] 
    }); 
}); 

Aquí está un fragmento de muestra de su árbol html nodo:

<li id="1227_1228" rel="web"> 
    <a href="some_value_here">Mantenimiento planificado</a> 
    <!-- UL node only needed for children - omit if there are no children --> 
    <ul> 
     <!-- Children LI nodes here --> 
    </ul> 
</li> 

Desde que ha especificado rel="web" para usted <li>, la <li> va a recibir las propiedades definidas para el tipo web , que incluye el icono personalizado definido anteriormente.

Para obtener más información, puede consultar la documentación oficial de jstree.

Answer 2

Añadir el siguiente CSS a su documento:

.jstree-icon { 
    display: none; 
}