在jsTree树中的节点图标,字体很棒

Question

我有一个使用jsTree的树结构,像这样:

<div id="jstree">
        <ul>
           <li>Root 1
             <li> Child 1</li>  
           </li>   
        </ul>
</div>

我想为root和children添加font-awesome的图标.下面解释如何使用bootstrap,下面和示例:

 <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>Child</li>

我试过这样做:

<li data-jstree='{"icon":"fa fa-user fa-2x"}'>

这是浏览器告诉我的错误:

表达式"icon"中的字符(:)无效:"fa fa-user fa-2x"

我还要提一下,我正在使用XML和XSL.

有没有人对这个问题有所了解？

Answer 1

如果您<li data-jstree='{"icon":"fa fa-user fa-2x"}'>确实使用XSLT代码,那么我认为您希望<li data-jstree='{{"icon":"fa fa-user fa-2x"}}'>阻止XSLT引擎将属性值作为属性值模板进行处理.

Answer 2

您可以使用以下设计:

<div id="jstree">
<ul>
  <li data-jstree='{"opened":true,"icon":"fa fa-folder-open"}'>Accounts
    <ul>
      <li data-jstree='{"icon":"fa fa-folder"}'>Account 1
      <ul>
        <li data-jstree='{"icon":"fa fa-file"}'>File 1</li> 
        <li data-jstree='{"icon":"fa fa-file"}'>File 2</li> 
      </ul>
      </li>
      <li data-jstree='{"icon":"fa fa-folder"}'>Account 2
      <ul>
        <li data-jstree='{"icon":"fa fa-file"}'>File 1</li> 
        <li data-jstree='{"icon":"fa fa-file"}'>File 2</li> 
      </ul>
      </li>
    </ul>
  </li>
</ul>
</div>

并且您在文件夹打开或关闭后更改其外观:

// bind customize icon change function in jsTree open_node event. 
$('#jstree').on('open_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder').addClass('fa-folder-open');
});

// bind customize icon change function in jsTree close_node event. 
$('#jstree').on('close_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder-open').addClass('fa-folder');
});