Как изменить значок в jstree?

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

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

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

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

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

Ответ 1

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

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

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

$('.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, извините, если это уродливо. Во всяком случае, я надеюсь, что это может помочь кому-то.

Ответ 2

Мне удалось заменить несколько значков, используя следующий 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;
    }

Ответ 3

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

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

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

PS Плагин "типы" не требуется.

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 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'
            }
        },
    });

Ответ 8

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

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

Ответ 9

Для меня работает script:

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

Ответ 10

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

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

jstree\themes\default\32px.png

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

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