How to set custom icon for jstree with html source

Question

I need to have a jstree that is configurable from the database and I'm having trouble 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 build this list by adding the background-image:url('path'); attribute to point the image in the <a> tag but I keep getting that folder icon displayed (the image is not repeated but I include it for easyer visualization of the problem).

How can I make jstree to not display that folder? It seems that jstree just builds one image for the entire tree (or at least each level). I dont know how to modify that.

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 the tree; ajax calls receive 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

Rather than specifying the icon explicitly, use the Types Plugin that comes with jstree. Then for each <li> in your html, assign its 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 a sample snippet of your tree node html:

<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>, the <li> will recieve the properties defined for the type web, which includes the custom icon defined above.

For more info, you can look at the official jstree documentation.