javascript - bootstrap - jstree search

¿Cómo cambiar el icono en jstree?

Question

Tengo el siguiente código:

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

Tengo una lista desordenada básica que me gustaría haber mostrado como una lista de archivos. Estoy tratando de usar los "tipos" para cambiar el ícono pero no puedo, por mi vida, averiguar cómo hacerlo. Revisé el link sus documentos e incluso cuando uso un código casi idéntico, nada parece suceder.

Desde mi entendimiento del código anterior, el tipo predeterminado de mi árbol debería tener el ícono que especifiqué, pero no pasa nada, todo lo que obtengo es el ícono de la carpeta predeterminada.

¿Algunas ideas? Lo siento si la pregunta parece básica, pero me resulta difícil seguir la documentación al intentar hacer cosas básicas. :)

Answer 1

Después de probar tantas configuraciones sin éxito, ¡encontré una gran idea!

Al usar el editor de fotos en línea https://pixlr.com/editor/ , he abierto el archivo de imagen de icono debajo de la ruta:

jstree/themes/default/32px.png

Y abrí el icono de carpeta que quiero reemplazar.

Reemplázalo fácilmente y ahorra :) Creo que es lo mejor después de 2 horas de lucha.

Answer 2

Después de un dolor de cabeza ... encontré una solución.

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

Sugiero no modificar el código css.

PS El complemento "tipos" no es necesario.

Answer 3

Dos problemas:

1. Necesitaba agregar el "tipo" en mi atributo rel de los objetos de mi lista (creé un tipo de archivo y predeterminado).

2. Olvidé un nivel en mi matriz declarando los tipos, el código tenía que ser como el siguiente:

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

Realmente no entiendo por qué mi código se está rompiendo en el WYSIWYG, lo siento si es feo. De todos modos, espero que esto pueda ayudar a alguien.

Answer 4

El siguiente script funciona para mí:

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

Answer 5

La forma de cambiar el icono basado en el nivel:

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

Answer 6

Para ocultar el ícono de la carpeta usa lo siguiente:

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

Answer 7

Pude reemplazar varios íconos usando el siguiente CSS, sin usar el complemento de Tipos. ¡Espero que esto ayude a alguien más también!

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

Answer 8

Puede cambiar el icono con la nueva API, sin HTML, CSS o complementos.

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

Answer 9

jstree incluye su propio icono de archivo (además del icono de carpeta predeterminado), agregue ''icon'': ''jstree-file'' propiedad ''icon'': ''jstree-file'' al nodo para mostrarlo

Answer 10

prueba este código:

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