carloss medranoo carloss medranoo - 3 months ago 89
Javascript Question

Change icon on click jstree

I have this code using jstree plugin.

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


And it works, but now i want to change the icon from the folder to close to open, is there a way to achive this?

NOTE

Already try with
data.node.state.opened = true
just to see if the folder icon change but not.

Answer

If you need to change the icon of each selected node, the answer by Adnan Y will work (just make sure data.action is "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');
  }
});

If you need to react on nodes opening and closing, use similar code:

$("#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);
  });

In the second example the icon is set to true - this will restore it to the default icon (if this is what you need).