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

He básicos de una lista desordenada me gustaría tener muestran como una lista de archivos. Estoy tratando de utilizar los «tipos» para cambiar el icono pero no puedo por la vida de averiguar cómo hacerlo. He comprobado su docs enlace e incluso cuando se utiliza casi idéntica a la del código de nada parece suceder.

De mi comprensión del código sobre el tipo predeterminado de mi árbol debe tener el icono que he especificado, pero no pasa nada, todo lo que me sale es el icono de la carpeta por defecto.

Alguna idea? Lo siento si la pregunta parece básico pero me parece que la documentación difícil de seguir cuando se trata de hacer cosas básicas. 🙂

InformationsquelleAutor Gazillion | 2011-08-23

10 Comentarios

  1. 24

    Yo era capaz de reemplazar varios iconos utilizando el siguiente CSS, sin necesidad de utilizar los Tipos de plugin. Esperemos que esto ayude a alguien así!

        /* 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;
        }
    • Gracias por la respuesta. A pesar de que esto iba a funcionar, sería también cambiar los iconos de todos los árboles en mi página. En mi situación en la que había un árbol que no tenía nada, pero las carpetas y uno con nada pero los archivos por lo que no lo este cambio global.
    • De cualquier manera el uso de apilado de la fuente impresionante iconos en jstree como HTML o los nombres de clases (no como el de la imagen)? Has probado alguna vez?
  2. 24

    Después de un dolor de cabeza…
    He encontrado una solución.

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

    Sugiero no modificar el código css.

    PS El «tipo» plug-in no es necesario.

    • Puedo comprobar que esto es correcto y la solución de trabajo. Así que si usted va a poner un poco png a su raíz images carpeta, a continuación, usted debe usar la ruta como <li data-jstree='{"icon":"../images/services.png"}'>
    • funciona también con bootsrap y fuente awasome iconos
    • Si alguien necesita agregar fuente impresionante icono sólo se pueden escribir <li data-jstree='{"icon":"fa fa-check"}'>
  3. 16

    Dos problemas:

    1. Tuve que agregar el «tipo» en mi atributo » rel » de mi lista de objetos (he creado un defecto y el tipo de archivo).
    2. Me olvidé de un nivel en mi matriz declarar los tipos, el código tenía que ser como la 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 está rompiendo en el WYSIWYG, lo siento si es feo. De todos modos, espero que esto pueda ayudar a alguien.

    • ¿Cuáles son los ficheros js había que importar para la interfaz de usuario & tipos de plugin ? era el basic jstree.js archivo suficiente ?
  4. 13

    Usted puede cambiar el icono con la nueva API, sin HTML, CSS, o plugins.

    $("#tree").jstree(true).set_icon(nodeId, "/images/blabla.png");
    • Bien, esta es la mejor solución para aquellos que utilizan nuevas jstree vesión.
    • Esta es la mejor solución!
    • nodeId es el ID de los nodos.. (o jstree nodo de objeto de referencia), por ejemplo, usted puede hacer: var nodeId = $(#tree).jstree(true).get_node("node_name");
  5. 8

    Para ocultar el icono de la carpeta utilice el siguiente:

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

    jstree incluye su propio archivo de icono (además del icono de la carpeta por defecto), agregar 'icon': 'jstree-file' propiedad de nodo para mostrar

  7. 3

    La manera 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'
                }
            },
        });
  8. 2

    Después de probar muchas configuraciones sin éxito, me pareció una gran idea!

    Mediante el editor de fotos en línea https://pixlr.com/editor/ he abierto la imagen del icono de archivo en la ruta:

    jstree\themes\default\32px.png

    Y me abrió el icono de la carpeta que quiero reemplazar

    Cómo cambiar el icono en jstree?

    Reemplazar fácilmente y guardar 🙂
    Creo que es la mejor después de 2 horas de lucha.

  9. 0

    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");
  10. 0

    La siguiente secuencia de comandos que 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');
        });

Dejar respuesta

Please enter your comment!
Please enter your name here