如何更改jstree中的图标？答案

【问题标题】：How to change icon in jstree?如何更改jstree中的图标？
【发布时间】：2011-08-23 14:04:22
【问题描述】：

我有以下代码：

$('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
            getFileById(data.args[0].hash.replace('#', ''));
        }).jstree({
            'plugins' : ['html_data','themes','ui','types'],
            'ui' : {
                'select_limit' : 1
            },
            'core' : {
                'animation' : 0
            },
            'types': {
                'default' : {
                    'icon' : {
                        'image' : '/admin/views/images/file.png'
                    }
                }
            }
        });

我有一个基本的无序列表，我希望将其显示为文件列表。我正在尝试使用“类型”来更改图标，但我一生都无法弄清楚如何去做。我检查了他们的文档link，即使使用几乎相同的代码似乎也没有发生任何事情。

根据我对上面代码的理解，我的树的默认类型应该有我指定的图标但没有任何反应，我得到的只是默认文件夹图标。

有什么想法吗？抱歉，如果问题看起来很基本，但我发现在尝试做基本事情时很难遵循文档。 :)

【问题讨论】：

标签： javascript jstree

【解决方案1】：

头痛之后... 我找到了解决办法。

我建议不要修改css代码。

PS“类型”插件不是必需的。

【讨论】：

我可以验证这是一个正确且有效的解决方案。因此，如果您将一个小 png 放入您的根 images 文件夹，那么您应该使用类似 <li data-jstree='{"icon":"../images/services.png"}'> 的路径
如果有人需要添加字体真棒图标，你可以写<li data-jstree='{"icon":"fa fa-check"}'>

【解决方案2】：

我能够使用以下 CSS 替换几个图标，而无需使用 Types 插件。希望这对其他人也有帮助！

    /* replace folder icons with another image, remove leaf image */        
    li.jstree-open > a .jstree-icon {background:url("imageOpen.gif") 0px 0px no-repeat !important;}
    li.jstree-closed > a .jstree-icon {background:url("imageClosed.gif") 0px 0px no-repeat !important;}
    li.jstree-leaf > a .jstree-icon { display: none; }


    /* replace checkbox icons */
    li.jstree-unchecked > a .jstree-checkbox, li.jstree-undetermined > a .jstree-checkbox 
    {
        background:url("uncheckedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }
    li.jstree-checked > a .jstree-checkbox
    {
        background:url("checkedImage.png") 0px 0px no-repeat !important;
        width: 32px;
        height: 29px;
        padding-top: 5px;
    }

【讨论】：

感谢您的回答。虽然这会起作用，但它也会改变我页面上所有树的图标。在我的情况下，我有一棵只有文件夹的树和一个只有文件的树，所以我不会将此更改为全局的。
有什么方法可以将 jstree 中的堆叠字体真棒图标用作 HTML 或类名（而不是图像）？你试过吗？

【解决方案3】：

您可以使用新 API 更改图标，无需 HTML、CSS 或插件。

$("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");

【讨论】：

嗯，对于那些使用新 jstree vesion 的人来说，这是最好的解决方案。
这是最好的解决方案！
nodeId 是节点 ID..（或 jstree 节点引用对象）例如您可以这样做：var nodeId = $(#tree).jstree(true).get_node("node_name");

【解决方案4】：

两个问题：

我需要在列表对象的 rel 属性中添加“类型”（我创建了默认和文件类型）。

我忘了在我的数组中声明类型的一级，代码必须如下所示：

$('.wpFolders.co_files').bind('select_node.jstree', function (event, data) {
    getFileById(data.args[0].hash.replace('#', ''));
}).jstree({
    'plugins' : ['html_data','themes','ui','types'],
    'ui' : {
        'select_limit' : 1
    },
    'core' : {
        'animation' : 0
    },
    'types': {
        'types' : {
            'file' : {
                'icon' : {
                    'image' : '/admin/views/images/file.png'
                }
            },
            'default' : {
                'icon' : {
                    'image' : '/admin/views/images/file.png'
                },
                'valid_children' : 'default'
            }
        }

    }
});

我真的不明白为什么我的代码在 WYSIWYG 中出现问题，如果它很难看，我很抱歉。无论如何，我希望这可以帮助某人。

【讨论】：

你必须为 ui & types 插件导入哪些 js 文件？基本的 jstree.js 文件足够了吗？

【解决方案5】：

要隐藏文件夹图标，请使用以下命令：

<style type="text/css">
 .jstree li > a > .jstree-icon {  display:none !important; } 
</style>

【讨论】：

【解决方案6】：

jstree包含自己的文件图标（除了默认的文件夹图标），添加'icon': 'jstree-file'属性到节点显示它

【讨论】：

【解决方案7】：

根据等级改变图标的方式：

jQuery('#tree-edit').on('changed.jstree', function(e, data) {

      //do something
    }).on("open_node.jstree", function(event, data) {
        jQuery.each(data.instance._model.data, function(key, val) {
            console.log(key + ", " + val);
           if (key.length < 4 || key=='#') {
               jQuery.jstree.reference("#tree-edit").set_type(val, "selectable");
           }
        });
    }).on("loaded_node.jstree", function(event, data) {
        console.log(data);

    }).jstree({
        'plugins': ["search", "types"],
        'core': {
            'data': {
                'url': 'http://www.google.com/json',
                'data': function(node) {
                    return {'id': node.id};
                }
            }
        },
        'types': {
            'selectable': {
                'icon': 'http://elpidio.tools4software.com/images/icon-ok-small.png'
            },
            'default': {
                'icon': 'http://www.fabulatech.com/printer-for-remote-desktop-server-help/img/icons/warning-small.gif'
            }
        },
    });

【讨论】：

【解决方案8】：

在尝试了这么多配置都失败后，我发现了一个好主意！

通过使用在线照片编辑器https://pixlr.com/editor/我打开了路径下的图标图像文件：

jstree\themes\default\32px.png

我打开了我要替换的文件夹图标

轻松更换并保存 :) 我认为这是经过 2 小时的奋斗后最好的。

【讨论】：

【解决方案9】：

试试这个代码：

lst_item = [];
$('#city_tree li').each(function(){ lst_item.push($(this).attr('id')); });
$('#city_tree').jstree(true).set_icon(lst_item, "/static/global/plugins/jstree/province.png");

【讨论】：

【解决方案10】：

以下脚本适用于我：

$('div#jstree').on('ready.jstree click', function (e, data) {
        $('i.jstree-icon').removeClass('jstree-themeicon jstree-icon').addClass('fa fa-lg fa-user');
    });

【讨论】：