Плагин 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="#">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 в элементе списка и выяснит, что с ним делать из этих определений.

Ответ 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" ]
});

Ответ 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>

Ответ 3

Типы jsTree doc

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.