我有一个简单的 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 类型，并从这些定义中找出如何处理它。
