html kaynağıyla jstree için özel simge nasıl ayarlanır

Question

Veritabanından yapılandırılabilen bir jstree'ye sahip olmalı ve simgelerle sorun yaşıyorum (bu, simgemin adını içeren başka bir sütundur). . Sorun şu ki doğru şekilde görüntüleyemem.

ben <a> etiketinde görüntüyü işaret edecek background-image:url('path'); özellik ekleyerek bu liste oluşturmak ama bu klasör simgesi (görüntü tekrar edilmez ama sorunun easyer görselleştirme için dahil görüntülenen almaya devam).

Bu klasörü görüntülememesi için jstree'yi nasıl yapabilirim? Görünüşe göre jstree, tüm ağaç için bir görüntü oluşturuyor (ya da en azından her seviye). Bunu nasıl değiştireceğimi bilmiyorum.

Yukarıdaki görüntünün html'si.

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

Bu şekilde ağacı yapıyorum; ajax çağrıları bir html liste alırsınız:

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

Aksine açıkça simgeyi belirtmek yerine jstree ile gelir Types Plugin kullanın. Sonra html'nizdeki her <li> için, tanımladığınız türe rel özelliğini atayın. İşte

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

sizin ağaç düğümü html bir örnek parçacık edilir: Burada basit bir örnek

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

sizin <li> için rel="web" belirtilen beri tip web için tanımlanan özelliklere alacaksınız <li> Yukarıda tanımlanan özel simgeyi içerir.

Daha fazla bilgi için resmi jstree belgelerine bakabilirsiniz.

Answer 2

belgenize aşağıdaki CSS ekleyin:

.jstree-icon { 
    display: none; 
}