单击jstree更改图标
Change icon on click jstree
我有使用 jstree 插件的代码。
$(".gems-tree").on('changed.jstree' , function( event , data ){
console.log("folder clicked");
});
它有效,但现在我想将文件夹中的图标更改为关闭打开,有没有办法实现这个?
注意
已经尝试 data.node.state.opened = true
只是为了看看文件夹图标是否改变但没有改变。
$("#jstree2").on('changed.jstree', function(evt, data){
$("#jstree2").jstree(true).set_icon(data.node, 'http://jstree.com/tree-icon.png')
})
如果您需要更改每个选定节点的图标,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
- 这会将其恢复为默认图标(如果这是您需要的)。
这可以使用 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>
我有使用 jstree 插件的代码。
$(".gems-tree").on('changed.jstree' , function( event , data ){
console.log("folder clicked");
});
它有效,但现在我想将文件夹中的图标更改为关闭打开,有没有办法实现这个?
注意
已经尝试 data.node.state.opened = true
只是为了看看文件夹图标是否改变但没有改变。
$("#jstree2").on('changed.jstree', function(evt, data){
$("#jstree2").jstree(true).set_icon(data.node, 'http://jstree.com/tree-icon.png')
})
如果您需要更改每个选定节点的图标,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
- 这会将其恢复为默认图标(如果这是您需要的)。
这可以使用 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>