如何使用html源爲jstree設置自定義圖標

Question

我需要一個可從數據庫配置的jstree，並且對圖標有問題（這只是查詢中包含圖標名稱的另一列） 。問題是我無法正確顯示它。

我通過添加background-image:url('path');屬性在<a>標籤指向圖像建立這個清單，但我不斷收到該文件夾​​圖標顯示（圖像不會重複，但我有它的問題easyer可視化）。

如何讓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", "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 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文檔。

Answer 2

添加以下CSS到您的文檔：

.jstree-icon { 
    display: none; 
}