JsTree：使用“类型”插件更改文件夹的“打开”图标答案

【问题标题】：JsTree: changing the "open" icon for folders using the "types" pluginJsTree：使用“类型”插件更改文件夹的“打开”图标
【发布时间】：2012-01-03 01:42:31
【问题描述】：

使用“类型”插件可以很容易地指定关闭文件夹的图标应该是什么。但是类型插件是否也可以用于指定 open 文件夹的外观，或者我只能使用 CSS 来执行此操作（如下所示）？

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

【问题讨论】：

标签： javascript jquery jstree

【解决方案1】：

一个可能的解决方案是有两个types - 一个用于打开的文件夹，一个用于关闭的文件夹。更改节点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>

【讨论】：

【解决方案2】：

今天，有一个名为“set_icon”的函数（参见API），它允许您从路径字符串或类名中设置设计者图标。

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

【讨论】：

【解决方案3】：

如果你们想使用 jQuery 和引导图标，这是我的解决方案。

[注意：我使用 glyphicon-folder-open 引导图标来打开文件夹和 glyphicon-folder-close 用于文件夹关闭的引导图标。]

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

或者如果你正在使用 font-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');
});

【讨论】：

【解决方案4】：

@第七元素：

问题本身的代码就是答案。它工作得很好。对于开放节点使用

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; }

干杯

【讨论】：

我知道上面的 CSS 有效，这就是我发布它的原因。但是，我的问题是：“可以使用类型插件代替”...

【解决方案5】：

看来你需要使用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

【讨论】：