Javascript 如何更改jstree中的图标？

我有以下代码：

$('.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'
                    }
                }
            }
        });

我有一个基本的无序列表，我想显示为一个文件列表。我试图用“类型”来改变图标，但我一辈子都不知道该怎么做。我检查了他们的文档，即使使用几乎相同的代码，似乎也没有发生任何事情

根据我对上面代码的理解，我的树的默认类型应该有我指定的图标，但什么也没有发生，我得到的只是默认文件夹图标

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

两个问题：

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

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

$('.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'
            }
        }

    }
});

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

---

我真的不明白为什么我的代码在WYSIWYG中被破坏，如果它很难看的话，很抱歉。无论如何，我希望这能帮助一些人。

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

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

---

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

$('.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'
            }
        }

    }
});

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

.jstree li>a>.jstree图标{显示：无！重要；}

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

<li data-jstree='{"icon":"path/file.png"}'></li>

jQuery（“#树编辑”）.on（'changed.jstree'，函数（e，数据）{
//做点什么
}).on（“open_node.jstree”，函数（事件、数据）{
jQuery.each（data.instance.\u model.data，function（key，val）{
控制台日志（键+”，“+val）；
如果（key.length<4 | | key='#'）{
jstree.reference（“#树编辑”）.set_type（val，“可选”）；
}
});
}).on（“loaded_node.jstree”，函数（事件、数据）{
控制台日志（数据）；
})jstree先生({
'插件'：[“搜索”，“类型”]，
“核心”：{
“数据”：{
“url”：”http://www.google.com/json',
“数据”：函数（节点）{
返回{'id'：node.id}；
}
}
},
“类型”：{
“可选”：{
'图标'：'http://elpidio.tools4software.com/images/icon-ok-small.png'
},
“默认值”：{
'图标'：'http://www.fabulatech.com/printer-for-remote-desktop-server-help/img/icons/warning-small.gif'
}
},
});

jstree包含自己的文件图标（除了默认文件夹图标之外），将

'icon'：'jstree file'

属性添加到节点以显示它

您可以使用新API更改图标，而不使用HTML、CSS或插件

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

请尝试以下代码：

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");

---

以下脚本适合我：

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

---

在尝试了这么多配置都不成功之后，我发现了一个好主意

通过使用在线照片编辑器，我打开了以下路径下的图标图像文件：

jstree\themes\default\32px.png

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

轻松更换并保存：）

---

经过两个小时的努力，我认为这是最好的。

谢谢你的回答。虽然这会起作用，但它也会改变我页面上所有树的图标。在我的情况下，我有一个只有文件夹的树，还有一个只有文件的树，所以我不会把这个更改变成全局的。有没有办法在jstree中使用堆叠的字体图标作为HTML或类名（而不是图像）？你曾经尝试过吗？你必须为ui&types插件导入哪些js文件？基本的jstree.js文件足够了吗？我可以验证这是一个正确且有效的解决方案。因此，如果你想在你的根文件夹

images

中放一点png，那么你应该使用类似于

的路径，如果有人需要添加字体很棒的图标，你可以只写