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

Question

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

Answer 1

在 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" ]
});

Answer 2

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

Answer 3

jsTree 类型文档

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.

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

问题描述

3 个解决方案

解决方案1
11 2014-06-04 12:38:27

HTML

Javascript

解决方案2
9 2011-10-05 04:08:41

解决方案3
4 2011-10-05 22:25:00

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

问题描述

3 个解决方案

解决方案1 11 2014-06-04 12:38:27

HTML

Javascript

解决方案2 9 2011-10-05 04:08:41

解决方案3 4 2011-10-05 22:25:00

解决方案1
11 2014-06-04 12:38:27

解决方案2
9 2011-10-05 04:08:41

解决方案3
4 2011-10-05 22:25:00