web-dev-qa-db-fra.com

Comment changer d'icône dans jstree?

J'ai le code suivant:

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

J'ai une liste non ordonnée de base que j'aimerais afficher sous forme de liste de fichiers. J'essaie d'utiliser les "types" pour changer l'icône mais je ne peux pas pour la vie me dire comment le faire. J'ai vérifié leurs docs link et même en utilisant un code presque identique, rien ne semble se passer.

Si je comprends bien le code ci-dessus, le type par défaut de mon arbre devrait avoir l'icône que j'ai spécifiée, mais rien ne se produit, tout ce que j'ai est l'icône du dossier par défaut.

Des idées? Désolé si la question semble basique, mais je trouve la documentation difficile à suivre lorsque j'essaie de faire les choses de base. :)

javascriptjstree
25
Gazillion

Deux problèmes:

  1. J'avais besoin d'ajouter le "type" dans mon attribut rel de ma liste d'objets (j'ai créé un type de fichier et par défaut).

  2. J'ai oublié un niveau dans mon tableau en déclarant les types, le code devait ressembler à ceci:

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

    }
});

Je ne comprends pas vraiment pourquoi mon code s'introduit dans le WYSIWYG, désolé si c'est moche. Quoi qu'il en soit, j'espère que cela peut aider quelqu'un.

15
Gazillion

J'ai pu remplacer plusieurs icônes en utilisant le CSS suivant, sans utiliser le plugin Types. Espérons que cela aide aussi quelqu'un d'autre! 

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

Après un mal de tête ... j'ai trouvé une solution.


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

Je suggère de ne pas modifier le code CSS.

PS Le plug-in "Types" n'est pas nécessaire.

20
FabioSorre

Vous pouvez changer l'icône avec la nouvelle API, sans HTML, CSS ni plugins.

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

Pour masquer l’icône du dossier, utilisez ce qui suit:

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

jstree inclut sa propre icône de fichier (en plus de l'icône de dossier par défaut), ajoutez la propriété 'icon': 'jstree-file' au nœud pour l'afficher.

4
Severian

La façon de changer d'icône en fonction du niveau:

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

Le script suivant fonctionne pour moi:

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

Après avoir essayé tant de configurations sans succès, j'ai trouvé une bonne idée!

En utilisant l'éditeur de photos en ligne https://pixlr.com/editor/ j'ai ouvert le fichier image de l'icône sous le chemin:

jstree\themes\default\32px.png

Et j'ai ouvert l'icône du dossier que je veux remplacer

 enter image description here

Remplacez-le facilement et économisez:) Je pense que c'est le meilleur après 2 heures de lutte.

0
efirat

essayez ce 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");
0
Saeed Gharedaghi