Comment changer 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 liste non ordonnée de base que je souhaiterais afficher en tant que liste de fichiers. J'essaie d'utiliser les "types" pour changer l'icône, mais je ne peux pas pour la vie de moi comprendre comment le faire. J'ai vérifié leur lien docs et même quand j'utilise un code presque identique, rien ne semble se produire.

Selon ma compréhension du code ci-dessus, le type par défaut de mon arbre devrait avoir l'icône que j'ai indiquée, mais rien ne se passe, tout ce que je reçois est l'icône de dossier par défaut.

Des idées? Désolé si la question semble basique mais je trouve la documentation difficile à suivre lors de la tentative de faire des choses de base. 🙂

J'ai pu remplacer plusieurs icônes en utilisant le CSS suivant, sans utiliser le plugin Types. Espérons que cela aide quelqu'un d'autre aussi 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; }

Deux problèmes:

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

J'ai oublié un niveau dans mon tableau en déclarant les types, le code devait ê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 pas vraiment pourquoi mon code est en train de briser le WYSIWYG, désolé si c'est laid. Quoi qu'il en soit, j'espère que cela peut aider quelqu'un.

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


     <Li data-jstree = '{"icone": "chemin / fichier.png"}'> </ li>

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

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

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

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

Pour cacher l'icône du dossier, utilisez ce qui suit:

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

Jstree inclut son propre icône de fichier (en plus de l'icône du dossier par défaut), ajouter 'icon': 'jstree-file' propriété 'icon': 'jstree-file' au nœud pour le montrer

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

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

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

En utilisant l'éditeur de photo en ligne https://pixlr.com/editor/ J'ai ouvert le fichier image d'icône sous le chemin d'accès:

 jstree\themes\default\32px.png

Et j'ai ouvert l'icône de dossier que je souhaite remplacer

Entrez la description de l'image ici

Remplacez-le facilement et enregistrez 🙂 Je pense que c'est le meilleur après 2 heures de lutte.

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