Javascript jstree类型插件不显示自定义图标_Javascript_Jstree

Javascript jstree类型插件不显示自定义图标

javascript

Javascript jstree类型插件不显示自定义图标,javascript,jstree,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="#">

我有一个简单的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>

然而，我仍然得到文件的通用主题图标。类别应该有一个文件夹，子类别应该有一个文件。我错过什么了吗

答案是这样的。对于每种类型，“文件夹”、“文件”等，您都会将其放在列表项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类型，并从这些定义中找出如何处理它。

使用

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.x版中应使用数据jstree li属性，如下所示：

HTML

断然的。我不知道“rel=”的事。根据需要添加，我很好。如果问题解决，请添加正确答案并更新此问题。谢谢。@MGOwen终于找到了答案。。这对新版本的jsTree不再有效。请务必检查Flo Ajir的答案，后者对新版本有效。

<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>

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.

<html>
   <ul id="browser">
      <li data-jstree='{"type":"folder"}'>My folder</li>
      <li data-jstree='{"type":"file"}'>My file</li>
    </ul>
</html>

$("#browser").jstree({
    "types" : {
        "folder" : {
            "icon" : "icon-folder-open"
        },
        "file" : {
            "icon" : "icon-file"
        }
    },
    "plugins" : [ "types" ]
});