How to set custom icon for jstree with html source

Question

I need to have jstree that is being configured from the database, and I'm having problems with the icons (this is just another column in my query containing the name of the icon). The problem is that I cannot display it correctly.

I create this list by adding the background-image:url('path'); attribute background-image:url('path'); to indicate the image in the <a> tag, but I continue to receive the icon of this folder (the image does not repeat, but I turn it on to more easily visualize the problem).

How can I make jstree not display this folder? It seems that jstree just creates one image for the whole tree (or at least at each level). I do not know how to change this.

This is the html for the image above.

 <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> 

This is how I build a tree; ajax calls get an html list:

 $(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

Instead of specifying an icon, explicitly use the Type of plugin that comes with jstree. Then for each <li> in your html, set the rel property to the type you define. Here is a simple example:

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

Here is an example of a fragment of your node html tree:

 <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> 

Since you specified rel="web" for you <li> , <li> will get the properties defined for the web type, which includes the custom icon above.

For more information, you can see the official jstree documentation.

Answer 2

Add the following CSS to your document:

 .jstree-icon { display: none; }