jstree types plugin does not display custom icons

 ̄綄美尐妖づ 提交于 2019-12-18 11:32:02

问题


I have a simple HTML layout that looks like this:

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

The jstree definition looks like this

$('#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" ]
});

However, I am still getting the generic theme icons for the files. Category should have a folder and the sub-categories should have a file. Am I missing something?

Here is the answer. For each type, "folder", "file", etc you put in the list item rel= where something is "folder" and whatnot. Then in your jstree configuration, you have these settings for the types plugin:

'types' : {
    'valid_children' : [ 'folder' ],
    'types' : {
        'folder' : {
            'valid_children' : [ 'file'],
            'max_depth' : 1
        },

        'file' : {
            'valid_children' : [ 'none' ],
            'icon' : { 'image' : safari.extension.baseURI + 'images/file.png' },
        }
    }
},

We define what to do with each "rel" type here. This way, jstree will pick up the rel type in the list item and figure out what to do with it from these definitions.


回答1:


In version 3.x you should use data-jstree li attribute like this :

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:


Use the rel attribute

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


来源:https://stackoverflow.com/questions/4899520/jstree-types-plugin-does-not-display-custom-icons

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!