Как поменять иконку в jstree?

Question

У меня есть следующий код:

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

У меня есть основной неупорядоченный список, который я хотел бы отобразить в виде списка файлов. Я пытаюсь использовать «типы», чтобы изменить значок, но я не могу понять, как это сделать. Я проверил их документы ссылка и даже при использовании почти идентичного кода ничего не происходит.

Исходя из моего понимания кода выше, тип моего дерева по умолчанию должен иметь указанную мной иконку, но ничего не происходит, все, что я получаю, - это значок папки по умолчанию.

Есть идеи? Извините, если вопрос кажется базовым, но мне трудно следовать документации, когда я пытаюсь сделать что-то простое. :)

Answer 1

Мне удалось заменить несколько иконок, используя следующий CSS, без использования плагина Types.Надеюсь, это поможет кому-то еще!

    /* 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 2

после головной боли ... Я нашел решение.

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

Я предлагаю не изменять код CSS.

PS Подключаемый модуль "types" не требуется.

Answer 3

Две проблемы:

1. Мне нужно было добавить «тип» в мой атрибут rel моих объектов списка (я создал файл по умолчанию и тип файла).

2. Я забыл один уровень в моем массиве, объявляя типы, код должен был выглядеть следующим образом:

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

Я не очень понимаю, почему мой код ломается в WYSIWYG, извините, если он уродлив. Во всяком случае, я надеюсь, что это может кому-то помочь.

Answer 4

Вы можете изменить значок с новым API, без HTML, CSS или плагинов.

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

Answer 5

Чтобы скрыть значок папки, используйте следующее:

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

Answer 6

jstree включает собственный значок файла (в дополнение к значку папки по умолчанию), добавьте свойство 'icon': 'jstree-file' к узлу, чтобы отобразить его

Answer 7

Способ изменения иконки в зависимости от уровня:

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 8

После неудачных попыток стольких конфигураций я нашел отличную идею!

Используя онлайн-редактор фотографий https://pixlr.com/editor/ Я открыл файл изображения значка под путем:

jstree\themes\default\32px.png

И я открыл значок папки, которую я хочу заменить

Заменить ее легко и сохранить :) Я думаю, что это лучший после 2-часовой борьбы.

Answer 9

У меня работает следующий скрипт:

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

Answer 10

попробуйте этот код:

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