[英]Change icon on click jstree
I have this code using jstree plugin. 我有使用jstree插件的代码。
$(".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. 已经尝试使用data.node.state.opened = true
来查看文件夹图标是否发生了变化。
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"
): 如果您需要更改每个所选节点的图标,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');
}
});
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). 在第二个示例中,图标设置为true
- 这会将其恢复为默认图标(如果这是您需要的)。
This can be done using jstree
's types
plugin. 这可以使用jstree
的types
插件来完成。
Here's an example, using font-awesome
for the folder icons. 这是一个例子,使用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>
$("#jstree2").on('changed.jstree', function(evt, data){
$("#jstree2").jstree(true).set_icon(data.node, 'http://jstree.com/tree-icon.png')
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.