单击jstree更改图标

Posted 2023-03-08

【中文标题】单击jstree更改图标

【英文标题】：Change icon on click jstree

【发布时间】：2015-08-05 05:25:43

【问题描述】：

我有这段代码使用 jstree 插件。

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

它可以工作，但现在我想将文件夹中的图标更改为关闭打开，有没有办法实现这个？

注意

已经尝试使用data.node.state.opened = true 只是为了查看文件夹图标是否发生变化。

【参考方案1】：

如果您需要更改每个选定节点的图标，Adnan 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 - 这会将其恢复为默认图标（如果这是您需要的）。

【参考方案2】：

这可以使用jstree 的types 插件来完成。

这是一个示例，文件夹图标使用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>

【参考方案3】：

$("#jstree2").on('changed.jstree', function(evt, data)
  $("#jstree2").jstree(true).set_icon(data.node, 'http://jstree.com/tree-icon.png')
)