एचटीएमएल स्रोत

Question

के साथ jstree के लिए कस्टम आइकन कैसे सेट करें मुझे डेटाबेस से कॉन्फ़िगर करने योग्य एक jstree होना चाहिए और मुझे आइकन के साथ समस्या हो रही है (यह आइकन के नाम वाली मेरी क्वेरी में बस एक और कॉलम है) । समस्या यह है कि मैं इसे सही तरीके से प्रदर्शित नहीं कर सकता।

मैं <a> टैग में मौजूद चित्र इंगित करने के लिए background-image:url('path'); विशेषता जोड़कर इस सूची का निर्माण, लेकिन मैं हो रही है उस फ़ोल्डर चिह्न प्रदर्शित (छवि दोहराया नहीं है, लेकिन मैं इस समस्या के लिए easyer दृश्य के लिए इसे शामिल रखना)।

मैं उस फ़ोल्डर को प्रदर्शित करने के लिए जेस्ट्री कैसे बना सकता हूं? ऐसा लगता है कि 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 कॉल एक एचटीएमएल सूची प्राप्त करते हैं:

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

बल्कि स्पष्ट रूप से आइकन को निर्दिष्ट की तुलना में, Types Plugin कि jstree के साथ आता है का उपयोग करें। फिर अपने एचटीएमएल में प्रत्येक <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"] 
    }); 
}); 

यहाँ अपने पेड़ नोड एचटीएमएल का एक नमूना टुकड़ा है:: यहाँ एक सरल उदाहरण है

<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 के लिए परिभाषित प्राप्त होगा , जिसमें ऊपर परिभाषित कस्टम आइकन शामिल है।

अधिक जानकारी के लिए, आप आधिकारिक जेएसटी दस्तावेज देख सकते हैं।

Answer 2

अपने दस्तावेज़ में निम्नलिखित सीएसएस जोड़ें:

.jstree-icon { 
    display: none; 
}