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

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

3 个答案:

HTML

的Javascript