jsTree树中的节点图标，字体真棒答案

【问题标题】：Node icon in a jsTree tree with font-awesomejsTree树中的节点图标，字体真棒
【发布时间】：2014-01-01 10:44:14
【问题描述】：

我有一个使用 jsTree 的树形结构，如下所示：

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

我想把font-awesome 的图标放在根和孩子上。 Here 解释了如何使用引导程序，下面和示例：

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

有人知道这个问题吗？

【问题讨论】：

标签： xml xslt jstree font-awesome

【解决方案1】：

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

【讨论】：

如果我们将 JSON 数据用于树而不是 HTML 标记，我们如何实现这一点？

【解决方案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');
});

【讨论】：

但对我来说，虽然我使用的是 json-stream

【解决方案3】：

您还可以在加载树后和打开节点时添加要与 FA 一起使用的类，如下所示：

$('#my-tree').jstree({
    // --
    // your options 
    // --
}).on('open_node.jstree', function(e, data){
    $(".jstree-icon.jstree-themeicon").removeClass("jstree-icon jstree-themeicon").addClass("fa fa-users");
}).on('loaded.jstree', function(e, data) {
     $(".jstree-icon.jstree-themeicon").removeClass("jstree-icon jstree-themeicon").addClass("fa fa-users");
});

【讨论】：