jstree 类型插件不显示自定义图标
[英]jstree types plugin does not display custom icons
问题描述
I have a simple HTML layout that looks like this:
我有一个简单的 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>
The jstree definition looks like this 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" ]
});
However, I am still getting the generic theme icons for the files.但是，我仍然获得了文件的通用主题图标。 Category should have a folder and the sub-categories should have a file.类别应该有一个文件夹，子类别应该有一个文件。 Am I missing something?我错过了什么吗？
Here is the answer.这是答案。 For each type, "folder", "file", etc you put in the list item rel= where something is "folder" and whatnot.对于每种类型，“文件夹”、“文件”等，您都将其放入列表项 rel= 中，其中某些内容是“文件夹”之类的。 Then in your jstree configuration, you have these settings for the types plugin:然后在你的 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' },
}
}
},
We define what to do with each "rel" type here.我们在这里定义了如何处理每个“rel”类型。 This way, jstree will pick up the rel type in the list item and figure out what to do with it from these definitions.这样，jstree 将在列表项中选取 rel 类型，并从这些定义中找出如何处理它。
3 个解决方案
解决方案1
11 2014-06-04 12:38:27
In version 3.x you should use data-jstree li attribute like this :在 3.x 版中，您应该使用data-jstree li 属性，如下所示：
HTML HTML
<html>
<ul id="browser">
<li data-jstree='{"type":"folder"}'>My folder</li>
<li data-jstree='{"type":"file"}'>My file</li>
</ul>
</html>
Javascript Javascript
$("#browser").jstree({
"types" : {
"folder" : {
"icon" : "icon-folder-open"
},
"file" : {
"icon" : "icon-file"
}
},
"plugins" : [ "types" ]
});
解决方案2
9 2011-10-05 04:08:41
Use the rel attribute使用rel属性
<div id="foo">
<ul>
<li id="id1" rel="folder"><a href="#">some category 1</a>
<ul><li rel="file"><a href="#">some text</a></li></ul>
<ul><li rel="file"><a href="#">some text</a></li></ul>
</li>
<li id="id2" rel="folder"><a href="#">some category 2</a>
<ul><li rel="file"><a href="#">some text</a></li></ul>
<ul><li rel="file"><a href="#">some text</a></li></ul>
</li>
</ul>
</div>
解决方案3
4 2011-10-05 22:25:00
type_attr
A string. Default is "rel".
Defines the attribute on each li node, where the type attribute will be stored.
For correct usage in IE - do not assign to "type" - it triggers an IE bug.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.