Question

我使用jstree插件获得此代码。

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

它确实有效，但现在我想将文件夹中的图标更改为关闭打开，是否有办法实现此目的？

注意

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

Answer 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 - 这会将其恢复为默认图标（如果这是您需要的）。

Answer 2

可以使用jstree的{{1}}插件完成此操作。

以下是一个示例，使用types作为文件夹图标。

font-awesome

Answer 3

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

单击jstree上的更改图标

3 个答案: