Изменить значок при нажатии jstree

У меня есть этот код с использованием плагина jstree.

$(".gems-tree").on('changed.jstree' , function( event , data ){
  console.log("folder clicked");
});

И это работает, но теперь я хочу изменить значок папки с закрытия на открытие, есть ли способ добиться этого?

ПРИМЕЧАНИЕ

Уже попробуйте с data.node.state.opened = true просто посмотреть, изменится ли значок папки, но не.


javascript css meteor jstree
person carloss medranoo    schedule 23.05.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Если вам нужно изменить значок каждого выбранного узла, ответ Аднана Y будет работать (просто убедитесь, что data.action равно "select_node"):

$("#jstree2").on('changed.jstree', function(evt, data) {
  if(data.action === "select_node") {
    data.instance.set_icon(data.node, 'http://jstree.com/tree-icon.png');
  }
});

Если вам нужно реагировать на открытие и закрытие узлов, используйте аналогичный код:

$("#jstree2")
  .on('open_node.jstree', function(evt, data) {
    data.instance.set_icon(data.node, 'http://jstree.com/tree-icon.png');
  })
  .on('close_node.jstree', function(evt, data) {
    data.instance.set_icon(data.node, true);
  });

Во втором примере значок установлен на true - это восстановит его до значка по умолчанию (если это то, что вам нужно).

person vakata    schedule 23.05.2015

arrow_upward
6
arrow_downward

Это можно сделать с помощью плагина types от jstree.

Вот пример использования font-awesome для значков папок.

<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>
person Li-aung Yip    schedule 12.08.2016