How to change icon in jstree?

问题

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 link and 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. :)

回答1:

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

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

回答2:

After an headache... I found a solution.


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

I suggest to don't modify the css code.

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

回答3:

Two problems:

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

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

    }
});

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.

回答4:

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

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

回答5:

To hide the folder icon use the following:

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

回答6:

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

回答7:

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

回答8:

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:

jstree\themes\default\32px.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.

回答9:

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

回答10:

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

来源：https://stackoverflow.com/questions/7162272/how-to-change-icon-in-jstree

标签

javascript

jstree