JsTree: изменение значка «открыть» для папок с помощью плагина «types» - PullRequest
Новая
       3

JsTree: изменение значка «открыть» для папок с помощью плагина «types»

7 голосов
/ 21 ноября 2011

Легко указать, какой значок должен быть для закрытой папки, используя плагин "types". Но можно ли использовать плагин типов, чтобы указать, как должна выглядеть папка open , или я могу сделать это только с помощью CSS (как показано ниже)? 

li.jstree-open > a .jstree-icon 
{
    background:url("folder_open.png") 0px 0px no-repeat !important;
}

Ответы [ 5 ]

6 голосов
/ 12 августа 2016

Возможное решение состоит в том, чтобы иметь два type s - один для открытой папки и один для закрытой папки. Изменить узел type очень просто.

С другой мой ответ : 

<div id="jstree_menu"></div>
<script>
/* Load menu tree data */
$('#jstree_menu').jstree(
    {
        'core' : {
            'data' : {
                'url' : '/jstree-menu-data/index.html',
            }
        },
        'plugins' : [ "types" ],
        'types' : {
            'default' : {
                'icon' : 'fa fa-angle-right fa-fw'
            },
            'f-open' : {
                'icon' : 'fa fa-folder-open fa-fw'
            },
            'f-closed' : {
                'icon' : 'fa fa-folder fa-fw'
            }
        }
    }
);

/* Toggle between folder open and folder closed */
$("#jstree_menu").on('open_node.jstree', function (event, data) {
    data.instance.set_type(data.node,'f-open');
});
$("#jstree_menu").on('close_node.jstree', function (event, data) {
    data.instance.set_type(data.node,'f-closed');
});
</script>
5 голосов
/ 21 февраля 2013

@ Седьмой элемент:

Ваш код в самом вопросе является ответом. Он работает довольно хорошо.Для открытых узлов используйте 

li.jstree-open > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; }

Для закрытых узлов используйте 

li.jstree-closed > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; }

Приветствия

4 голосов
/ 27 сентября 2014

Если вы, ребята, хотите использовать значок jQuery и начальную загрузку, вот мое решение.

[Примечание: я использую значок начальной загрузки глификон-папки для открытия папки и значок начальной загрузки глификон-папки для закрытия папки.] 

// bind customize icon change function in jsTree open_node event. 
$('#your-jstree').on('open_node.jstree', function(e, data){
   $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
        .removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
});

// bind customize icon change function in jsTree close_node event. 
$('#your-jstree').on('close_node.jstree', function(e, data){
   $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
        .removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
});

или если вы используете font-awesome: 

// bind customize icon change function in jsTree open_node event. 
$('#jstree').on('open_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder').addClass('fa-folder-open');
});

// bind customize icon change function in jsTree close_node event. 
$('#jstree').on('close_node.jstree', function(e, data){
    var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first();
    icon.removeClass('fa-folder-open').addClass('fa-folder');
});
0 голосов
/ 09 апреля 2016

В настоящее время существует функция под названием set_icon (см. API ), которая позволяет вам установить значок дескриптора из строки пути или имени класса.

0 голосов
/ 22 ноября 2011

Похоже, вам нужно использовать css 

li.jstree-open[rel=TYPE]{  background:url("openimage.gif") 0px 0px no-repeat !important; }
li.jstree-closed[rel=TYPE]{  background:url("closedimage.gif") 0px 0px no-repeat !important; }
li.jstree-leaf[rel=TYPE]{  background:url("leafimage.gif") 0px 0px no-repeat !important; }

подробнее на форуме jsTree

...