Javascript jstree 类型插件不显示自定义图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4899520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jstree types plugin does not display custom icons
提问by gdanko
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. Then in your jstree configuration, you have these settings for the types plugin:
这是答案。对于每种类型，“文件夹”、“文件”等，您都将其放入列表项 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' },
}
}
},
We define what to do with each "rel" type here. This way, jstree will pick up the rel type in the list item and figure out what to do with it from these definitions.
我们在这里定义了如何处理每个“rel”类型。这样，jstree 将在列表项中选取 rel 类型，并从这些定义中找出如何处理它。
回答by FAjir
In version 3.xyou should use data-jstreeli attribute like this :
在 3.x 版中，您应该使用data-jstreeli 属性，如下所示：
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" ]
});
回答by Gaurav Shah
Use the relattribute
使用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>
回答by Radek
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.
