JsTree: changing the "open" icon for folders using the "types" plugin

Question

It's easy to specify what the icon should be for a closed folder using the "types" plugin. But can the types plugin also be used to specify what an open folder should look like, or can I only do this with CSS (like below) ?

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

score 8 · Answer 1 · edited May 23 '17 at 12:10

A possible solution is to have two types - one for an open folder, and one for a closed folder. Changing the node type is easy.

From another answer of mine:

<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>

score 6 · Answer 2 · answered Feb 21 '13 at 05:42

6

@Seventh element:

Your code in the question itself is the answer.It works pretty fine. For open node use

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

For closed nodes use

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

Cheers

answered Feb 21 '13 at 05:42

jeev

478
10
25

3

I know the CSS above works, that's why I posted it. However, my question was: "can the types plugin be used instead"... – Captain Sensible Mar 04 '13 at 14:41

score 6 · Answer 3 · edited Mar 30 '15 at 09:12

If you guys want to use jQuery and bootstrap icon, here is my solution.

[Note: I use glyphicon-folder-open bootstrap icon for folder open and glyphicon-folder-close bootstrap icon for folder close.]

// 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');
});

or if you are using 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');
});

score 0 · Answer 4 · answered Apr 08 '16 at 21:31

At today, there is a function called "set_icon" (see API), that allow you to set the desider icon, from a path string or a class name.

$.jstree.reference('#jstree').set_icon(node, "/assets/contextMenu_icons/folderOpened.png")

score 0 · Answer 5 · answered Nov 22 '11 at 00:21

Looks like you need to use 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; }

more info in the jsTree forum

JsTree: changing the "open" icon for folders using the "types" plugin

5 Answers5