jquery – 如何使用html源为jstree设置自定义图标

我需要有一个可以从数据库配置的jstree,我遇到了图标问题(这只是我查询中包含图标名称的另一列).问题是我无法正确显示它.

我通过添加background-image：url(‘path’)来构建此列表;属性以指向< a>中的图像.标签,但我不断显示该文件夹图标(图像不重复,但我包括它以便轻松可视化问题).

如何让jstree不显示该文件夹？似乎jstree只为整个树(或至少每个级别)构建一个图像.我不知道如何修改它.

这是上图中的html.

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

这就是我构建树的方式; ajax调用接收一个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",function(event){
    $.jstree._reference(this).open_node(this,false);
});

解决方法

不要明确指定图标,而是使用jstree附带的 Types Plugin.然后对于每个< li>在您的html中,将其rel属性分配给您定义的类型.这是一个简单的例子：

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

以下是树节点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>

由于您为< li>指定了rel =“web”,因此< li>将收到为web类型定义的属性,其中包括上面定义的自定义图标.

有关更多信息,您可以查看官方的jstree文档.