jstreeのカスタムアイコンをhtmlソースで設定する方法

Question

データベースから設定可能なjstreeが必要です。アイコンに問題があります（これはアイコンの名前を含むクエリの別の列です） 。問題は、正しく表示できないことです。

私は<a>タグで画像をポイントするbackground-image:url('path');属性を追加することで、このリストを構築するが、私は、そのフォルダのアイコンが（画像が繰り返されていませんが、私は、問題のeasyer可視化のためにそれを含んで表示し得続けます）。

jstreeにそのフォルダを表示させないようにするにはどうすればよいですか？ jstreeは、ツリー全体（または少なくとも各レベル）の1つのイメージを作成するようです。私はそれを修正する方法を知らない。

これは上記の画像の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", "click.jstree", function(event){ 
    $.jstree._reference(this).open_node(this, false, false); 
}); 

Answer 1

ではなく、明示的にアイコンを指定して、jstreeが付属していますTypes Pluginを使用しています。次に、あなたのhtmlの各<li>について、定義したタイプにその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>ためrel="web"を指定しているので

<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>はタイプに対して定義されたプロパティを受け取るだろうweb上で定義したカスタムアイコンが含まれています。

詳細については、公式のjstreeのドキュメントをご覧ください。

Answer 2

は、ドキュメントに次のCSSを追加します。

.jstree-icon { 
    display: none; 
}