JsTree：使用「類型」插件更改文件夾的「打開」圖標

Question

使用「類型」插件指定關閉文件夾的圖標應該很容易。但是類型插件也可以用來指定打開文件夾應該看起來像什麼，或者我只能用CSS（如下所示）來做這件事嗎？

li.jstree-open > a .jstree-icon 
{ 
    background:url("folder_open.png") 0px 0px no-repeat !important; 
} 

Answer 1

看起來你需要使用CSS

li.jstree-open[rel=TYPE]{ background:url("openimage.gif") 0px 0px no-repeat !important; } 
li.jstree-closed[rel=TYPE]{ background:url("closedimage.gif") 0px 0px no-repeat !important; } 
li.jstree-leaf[rel=TYPE]{ background:url("leafimage.gif") 0px 0px no-repeat !important; } 

更多信息在jsTree forum

Answer 2

@Seventh元素：

你在這個問題本身的代碼是answer.It作品挺好的。 對於開放節點使用

li.jstree-open > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; } 

對於閉節點使用

li.jstree-closed > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; } 

乾杯

Answer 3

如果你們想用jQuery和引導圖標，這裏是我的解決方案。

[注：我用glyphicon文件夾打開引導圖標文件夾打開和 的文件夾密切glyphicon文件夾關閉引導圖標]

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

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

，或者如果你正在使用的字體-awesome：

// 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'); 
}); 

Answer 4

在今天，有一個名爲「set_icon」（見API）功能，允許您設置desider圖標，從路徑〜應變g或班級名稱。

$.jstree.reference('#jstree').set_icon(node, "/assets/contextMenu_icons/folderOpened.png") 

Answer 5

一種可能的解決方案是具有兩個type秒 - 一個用於打開的文件夾，和一個用於關閉的文件夾。更改節點type很容易。

從another answer of mine：

<div id="jstree_menu"></div> 
<script> 
/* Load menu tree data */ 
$('#jstree_menu').jstree(
    { 
     'core' : { 
      'data' : { 
       'url' : '/jstree-menu-data/index.html', 
      } 
     }, 
     'plugins' : [ "types" ], 
     'types' : { 
      'default' : { 
       'icon' : 'fa fa-angle-right fa-fw' 
      }, 
      'f-open' : { 
       'icon' : 'fa fa-folder-open fa-fw' 
      }, 
      'f-closed' : { 
       'icon' : 'fa fa-folder fa-fw' 
      } 
     } 
    } 
); 

/* Toggle between folder open and folder closed */ 
$("#jstree_menu").on('open_node.jstree', function (event, data) { 
    data.instance.set_type(data.node,'f-open'); 
}); 
$("#jstree_menu").on('close_node.jstree', function (event, data) { 
    data.instance.set_type(data.node,'f-closed'); 
}); 
</script>