Comment modifier l'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 base de liste non ordonnée, je voudrais afficher une liste de fichiers. Je suis en train d'utiliser les "types" pour changer l'icône, mais je ne peux pas pour la vie de me comprendre comment le faire. J'ai vérifié leurs docs lien et même lors de l'utilisation de presque identiques code rien ne semble se produire.

À partir de ma compréhension du code ci-dessus le type par défaut de mon arbre devrait avoir l'icône que j'ai précisé mais rien ne se passe, tout ce que j'obtiens est le dossier par défaut de l'icône.

Des idées? Désolé si la question semble de base, mais je trouve la documentation de mal à suivre lorsque vous essayez de faire des choses de base. 🙂

InformationsquelleAutor Gazillion | 2011-08-23

javascript jstree

J'ai été en mesure de remplacer plusieurs icônes en utilisant le code CSS suivant, sans utiliser les Types de plugin. Espérons que cela aide quelqu'un d'autre que du bien!

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

Merci pour la réponse. Si cela fonctionnerait il serait également modifier les icônes de tous les arbres sur ma page. Dans ma situation, j'ai eu un arbre qui n'avait rien de mais des dossiers et une avec rien, mais les fichiers donc je ne serait pas ce changement de dimension mondiale.
Un moyen d'utiliser empilés font-awesome icônes dans jstree comme HTML ou les noms de classe (pas comme sur l'image)? Avez-vous déjà essayé?

InformationsquelleAutor http203

21

Après un mal de tête...
J'ai trouvé une solution.
```
 
<li data-jstree='{"icon":"chemin/fichier.png"} " ></li> 
```
Je suggère à ne pas modifier le code css.

PS Les "types" plug-in n'est pas nécessaire.
- Je peux vérifier que c'est une solution correcte et professionnelle. Ainsi, si vous mettez un peu de png à la racine de votre images dossier alors vous devriez utiliser le chemin d'accès comme <li data-jstree='{"icon":"../images/services.png"}'>
- fonctionne aussi avec bootsrap des polices et des icônes awasome
- Si quelqu'un à besoin d'ajouter de la police génial icône, vous pouvez simplement écrire <li data-jstree='{"icon":"fa fa-check"}'>
InformationsquelleAutor FabioSorre

Deux problèmes:

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

J'ai oublié dans mon tableau de déclarer les types, le code doit être comme suit:

$('.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 vraiment pas pourquoi mon code est la rupture dans le WYSIWYG, désolé si c'est moche. De toute façon, j'espère que cela peut aider quelqu'un.

Quelles sont les js fichiers que vous aviez à l'importation pour l'interface utilisateur & types de plugin ? a la base jstree.js fichier assez ?

InformationsquelleAutor Gazillion

13

Vous pouvez changer l'icône avec la nouvelle API, sans HTML, CSS, plugins ou.
```
$("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");
```
- Eh bien, c'est la meilleure solution pour ceux qui utilisent les nouvelles jstree vesion.
- C'est la meilleure solution!
- qu'est-ce que nodeId? j'obtiens l'erreur pour que.
- nodeId est les nœuds ID.. (ou jstree nœud de l'objet de référence), par exemple, vous pouvez faire: var nodeId = $(#tree).jstree(true).get_node("node_name");
InformationsquelleAutor Henrik
8

Pour masquer l'icône de dossier, utilisez la commande suivante:
```
<style type="text/css">
 .jstree li > a > .jstree-icon {  display:none !important; } 
</style>
```
- ce cache également la case à cocher si vous avez activé ....
InformationsquelleAutor Mike
4

jstree comprend sa propre icône du fichier (en plus de le dossier par défaut de l'icône), ajouter 'icon': 'jstree-file' propriété de noeud pour montrer qu'il

InformationsquelleAutor Severian

La façon de changer l'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'
            }
        },
    });

InformationsquelleAutor Jason

1

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

Par l'aide en ligne de l'éditeur de photo https://pixlr.com/editor/ j'ai ouvert l'image de l'icône de fichier sous le chemin:
```
jstree\themes\default2px.png
```
Et j'ai ouvert l'icône de dossier que je veux remplacer

Le remplacer facilement et enregistrer 🙂
Je pense que c'est le meilleur après 2 heures de lutte.

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

InformationsquelleAutor Saeed Gharedaghi

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

InformationsquelleAutor user6753106

Vous devez vous connecter pour publier un commentaire.