Javascript 如何更改jstree中的图标？

How to change icon in jstree?

提问by Gazillion

I have the following code:

我有以下代码：

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

I have a basic unordered list I would like to have displayed as a list of files. I'm trying to use the "types" to change the icon but I can't for the life of me figure out how to do it. I checked their docs linkand even when using almost identical code nothing seems to happen.

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

From my understanding of the code above the default type of my tree should have the icon I specified but nothing happens, all I get is the default folder icon.

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

Any ideas? Sorry if the question seems basic but I find the documentation hard to follow when trying to do basic things. :)

有任何想法吗？对不起，如果这个问题看起来很基本，但我发现在尝试做基本的事情时很难遵循文档。:)

采纳答案by Gazillion

Two problems:

两个问题：

1. I needed to add the "type" in my rel attribute of my list objects (I created a default and file type).

2. I forgot one level in my array declaring the types, the code had to be like the following:

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

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

2. 我忘记了数组中的一层声明类型，代码必须如下所示：

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

I don't really understand why my code is breaking in the WYSIWYG, sorry if it's ugly. Anyway, I hope this can help someone.

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

回答by FabioSorre

After an headache... I found a solution.

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

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

I suggest to don'tmodify the css code.

我建议不要修改css代码。

PS The "types" plug-in is not necessary.

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

回答by http203

I was able to replace several icons using the following CSS, without using the Types plugin. Hopefully this helps someone else as well!

我能够使用以下 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;
    }

回答by Henrik

You may change the icon with the new API, without HTML, CSS, or plugins.

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

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

回答by Mike

To hide the folder icon use the following:

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

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

回答by Severian

jstree includes its own file icon (in addition to the default folder icon), add 'icon': 'jstree-file'property to node to show it

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

回答by Jason

The way to change icon based on the level:

根据级别更改图标的方法：

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

回答by efirat

After trying so many configurations unsuccessfully, I found a great idea!

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

By using online photo editor https://pixlr.com/editor/I have opened icon image file under the path:

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

jstree\themes\defaultpx.png

And I opened the folder icon I want to replace

然后我打开了我想替换的文件夹图标

Replace it easily and save :) I think it is the best after 2 hour struggle.

轻松更换并保存:) 我认为经过 2 小时的努力，这是最好的。

回答by Saeed Gharedaghi

try this code:

试试这个代码：

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

回答by user6753106

The following script works for me:

以下脚本对我有用：

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