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


javascript jstree
person gdanko    schedule 04.02.2011    source источник
comment
Решено. Я не знал о rel=. Добавил это по мере необходимости, и я в порядке.   -  person gdanko    schedule 05.02.2011
comment
если решено, добавьте правильный ответ и обновите этот вопрос. Спасибо.   -  person MGOwen    schedule 28.02.2011
comment
@MGOwen Наконец-то понял ответ ..   -  person Gaurav Shah    schedule 05.10.2011

Ответы (3)


arrow_upward
11
arrow_downward

В версии 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" ]
});
person a11r    schedule 04.06.2014

arrow_upward
9
arrow_downward

Используйте атрибут 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>
person Gaurav Shah    schedule 05.10.2011
comment
Это больше не работает для более новых версий jsTree, обязательно проверьте ответ Фло Аджира, который работает с более новыми версиями. - person Sutty1000; 09.01.2016

arrow_upward
4
arrow_downward

документ по типам 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.
person Radek    schedule 05.10.2011