如何使用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"> </ins>
<a href="/arco/formatos/Estrategia desarrollo.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon"> </ins>
Instructivo desarrollo
</a>
</li>
<li id="1227_1228" class="leaf jstree-leaf"><ins class="jstree-icon"> </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"> </ins>
Mantenimiento planificado
</a>
</li>
<li id="1227_1229" class="leaf"><ins class="jstree-icon"> </ins>
<a href="/arco/formatos/FO-0002 FormatoAnalisisRequisitos.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon"> </ins>
Análisis de requisitos
</a>
</li>
<li id="1227_1230" class="leaf jstree-leaf"><ins class="jstree-icon"> </ins>
<a href="/arco/formatos/FO-0003 FormatoInstructivoInstalacion.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon"> </ins>
Instructivo de instalación
</a>
</li>
<li id="1227_1231" class="leaf jstree-leaf"><ins class="jstree-icon"> </ins>
<a href="/arco/formatos/FO-0004 FormatoControlCalidadConstruccion.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon"> </ins>
Control de calidad
</a>
</li>
<li id="1227_1232" class="leaf jstree-leaf"><ins class="jstree-icon"> </ins>
<a href="/arco/formatos/FO-0005 FormatoPruebasUsuario.doc" style="background-image:url('/arco/Menu/images/web.png;');" class="nothing"><ins class="jstree-icon"> </ins>
Pruebas de usuario
</a>
</li>
<li id="1227_1233" class="leaf jstree-leaf"><ins class="jstree-icon"> </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"> </ins>
Actas
</a>
</li>
<li id="1227_1263" class="leaf jstree-last jstree-leaf"><ins class="jstree-icon"> </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"> </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", "click.jstree", function(event){
$.jstree._reference(this).open_node(this, false, 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","html_data","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>
由于您rel="web"为自己指定<li>,因此<li>将接收为该类型定义的属性web,其中包括上面定义的自定义图标.
有关更多信息,您可以查看官方的jstree文档.