问题
I want to add a folder open close icon for closing and expanding and a leaf icon for the leaf nodes.
Please help
EDIT:
Tried adding the types plugin but doesn't seem to work.
var data = {
'core': {
'data': dataObj
},
"search": {
"case_insensitive": true,
"show_only_matches": true
},
"plugins": ["search", "themes"]
};
$('#jstree_category').jstree(data);
$('#jstree_category').on("loaded.jstree", function (e, data) {
_this.treeLoaded = true;
if (!_this.dataFetched) {
return;
}
});
// bind customize icon change function in jsTree open_node event.
$('#jstree_category').on('open_node.jstree', function (e, data) {
$('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
.removeClass('glyphicon glyphicon-folder-close').addClass('glyphicon glyphicon-folder-open');
$('#' + data.node.id).find('i.jstree-icon.jstree-themeicon')
.addClass('glyphicon glyphicon-leaf');
});
// bind customize icon change function in jsTree close_node event.
$('#jstree_category').on('close_node.jstree', function (e, data) {
$('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first()
.removeClass('glyphicon glyphicon-folder-open').addClass('glyphicon glyphicon-folder-close');
$('#' + data.node.id).find('i.jstree-icon.jstree-themeicon')
.addClass('glyphicon glyphicon-leaf');
});
回答1:
Here is working fiddle for you. You should mention the type of your node in JSON dataObj.
var jsonData = [
{
id : 1,
text : "Folder 1",
type: "root",
state : {
selected : false
},
children : [
{
id : 2,
text : "Sub Folder 1",
type: "child",
state : {
selected : false
},
},
{
id : 3,
text : "Sub Folder 2",
type: "child",
state : {
selected : false
},
}
]
},
{
id: 4,
text : "Folder 2",
type: "root",
state : {
selected : true
},
children : []
}
];
$('#jstree-tree')
.jstree({
core: {
data: jsonData
},
types: {
"root": {
"icon" : "glyphicon glyphicon-plus"
},
"child": {
"icon" : "glyphicon glyphicon-leaf"
},
"default" : {
}
},
plugins: ["search", "themes", "types"]
}).on('open_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-minus");
}).on('close_node.jstree', function (e, data) { data.instance.set_icon(data.node, "glyphicon glyphicon-plus"); });
JSFiddle
来源:https://stackoverflow.com/questions/35644534/customise-icons-on-js-tree