javascript – jstree类型插件不显示自定义图标
作者：互联网
我有一个简单的HTML布局,如下所示：
<div id="foo">
<ul>
<li id="id1"><a href="#">some category 1</a>
<ul><li><a href="#">some text</a></li></ul>
<ul><li><a href="#">some text</a></li></ul>
</li>
<li id="id2"><a href="#">some category 2</a>
<ul><li><a href="#">some text</a></li></ul>
<ul><li><a href="#">some text</a></li></ul>
</li>
</ul>
</div>
jstree定义看起来像这样
$('#foo').jstree({
"core" : {
"animation" : 0
},
"themes" : {
"theme" : "classic",
"dots" : false,
"icons" : true
},
"sort" : function (a, b) {
return this.get_text(a) > this.get_text(b) ? 1 : -1;
},
"types" : {
"valid_children" : [ "folder" ],
"types" : {
"folder" : {
"valid_children" : [ "file" ],
"icon" : { "image" : "/path/to/images/folder.png"},
"max_depth" : 1
},
"file" : {
"valid_children" : [ "none" ],
"icon" : { "image" : "/path/to/images/file.png" },
}
}
},
"plugins" : [ "html_data", "themes", "contextmenu", "search", "sort", "types" ]
});
但是,我仍然获得文件的通用主题图标.
类别应该有一个文件夹,子类别应该有一个文件.我错过了什么吗？
这是答案.对于每个类型,“文件夹”,“文件”等您放入列表项rel =其中的东西是“文件夹”和诸如此类的东西.然后在你的jstree配置中,你有类型插件的这些设置：
'types' : {
'valid_children' : [ 'folder' ],
'types' : {
'folder' : {
'valid_children' : [ 'file'],
'max_depth' : 1
},
'file' : {
'valid_children' : [ 'none' ],
'icon' : { 'image' : safari.extension.baseURI + 'images/file.png' },
}
}
},
我们在这里定义如何处理每个“rel”类型.这样,jstree将在列表项中选取rel类型,并从这些定义中找出如何处理它.
解决方法:
在版本3.x中,您应该使用data-jstree li属性,如下所示：
HTML
<html>
<ul id="browser">
<li data-jstree='{"type":"folder"}'>My folder</li>
<li data-jstree='{"type":"file"}'>My file</li>
</ul>
</html>
使用Javascript
$("#browser").jstree({
"types" : {
"folder" : {
"icon" : "icon-folder-open"
},
"file" : {
"icon" : "icon-file"
}
},
"plugins" : [ "types" ]
});
标签：jstree,javascript 来源： https://codeday.me/bug/20191004/1852844.html