Comment changer l'icône en 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. 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é leurs docs lien et même en utilisant un code presque identique, rien ne semble se produire.
D'après ma compréhension du code au-dessus du type par défaut de mon arbre devrait avoir l'icône que j'ai spécifié mais rien n'arrive, 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 en essayant de faire des choses basiques. :)
10 réponses
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!
/* 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;
}
Après un mal de tête... J'ai trouvé une solution.
<li data-jstree='{"icon":"path/file.png"}'></li>
je suggère d' ne pas modifier le code css.
PS le plug-in "types" n'est pas nécessaire.
Deux problèmes:
- j'avais besoin d'ajouter le "type" dans mon attribut rel de mes objets list (j'ai créé un défaut et un type de fichier).
j'ai oublié un niveau dans mon tableau déclarant les types, le code devait être comme 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 se brise dans le WYSIWYG, désolé si c'est laid. De toute façon, j'espère que cela peut aider quelqu'un.
Vous pouvez changer l'icône avec la nouvelle API, sans HTML, CSS, ou plugins.
$("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");
Pour masquer l'icône de dossier, utilisez la commande suivante:
<style type="text/css">
.jstree li > a > .jstree-icon { display:none !important; }
</style>
jstree inclut sa propre icône de fichier( en plus de l'icône de dossier par défaut), ajouter 'icon': 'jstree-file' propriété au noeud 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 bonne idée!
en utilisant l'éditeur de photos en ligne https://pixlr.com/editor/ j'ai ouvert le fichier image d'icône sous le chemin:
jstree\themes\defaultpx.png
Et j'ai ouvert l'icône de dossier que je veux remplacer
Remplacer facilement et enregistrer :) 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');
});