Question

我正在尝试显示包含部分及其包含的页面的jstree。我为每个设置了一个类型，但我无法为页面类型更改图标，它只是一直显示默认文件夹图标。

这是我的javascript：

$('#demo1').jstree({ 
        "themes" : {
            "theme" : "default",
            "dots" : false,
            "icons" : true
        },
        "types" : {
            "section" : {
                "max_children"  : -1,
                "max_depth"     : -1,
                "valid_children": "all",
                "type_attr"     : "section"
            },
            "page" : {
                "max_children"  : 0,
                "max_depth"     : -1,
                "valid_children": "none",
                "icon" : { 
                        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                    },
                "type_attr"     : "page"
            }
        },
        "core" : {"html_titles" : true,  "load_open" : true },
        "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort", "types" ],
        "json_data" : {
            "ajax" : {
                "type": 'GET',
                "url" : function (node) { 

                    var url = ""

                    if (node == -1)
                    {
                        url = 'localhost/sections';
                    }
                    else
                    {
                        url = 'localhost/sections/'+node.attr("id");
                    }

                    return url;
                },
                "type" : "get",  
                "success" : function(items) {

                  data = []

                  for (i in items) {

                    var item = items[i]
                    var type;

                    if (JSON.stringify(items[i].root)) {

                        type = "section";

                        node = {
                        "data" : item.title, 
                        "attr" : { "id" : item.id, "rel" : type }, 
                        "state" : "closed"
                        }

                    } else {

                        type = "page";

                        node = {
                        "data" : item.title, 
                        "attr" : { "rel" : type }, 
                        "state" : "open"
                        }
                    }

                    this.set_type(type, node);
                    data.push(node);

                  }

                return data; 

            }
        }
    }
});

这是AJAX调用生成的HTML。

<div id="demo1" class="demo jstree jstree-0 jstree-focused jstree-default" style="height:100px;">
   <ul class="jstree-no-dots">
      <li id="1" rel="section" class="jstree-open">
         <ins class="jstree-icon">&nbsp;</ins><a href="#" class="jstree-clicked"><ins class="jstree-icon">&nbsp;</ins>One</a>
         <ul>
            <li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>One Subsection</a></li>
            <li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#" class=""><ins class="jstree-icon">&nbsp;</ins>Page in section one</a></li>
         </ul>
      </li>
      <li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Two</a></li>
   </ul>
</div>

有人能看出出了什么问题吗？

任何建议表示赞赏。

由于

Answer 1

不确定这个答案是否仍然有用，但我遇到了与jsTree类似的问题，我发现了你的问题

你确定这个配置是对的吗？你有：

    "types" : {
        "section" : {
            "max_children"  : -1,
            "max_depth"     : -1,
            "valid_children": "all",
            "type_attr"     : "section"
        },
        "page" : {
            "max_children"  : 0,
            "max_depth"     : -1,
            "valid_children": "none",
            "icon" : { 
                    "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                },
            "type_attr"     : "page"
        }

我认为应该是

    "types" : {
        "type_attr"     : "rel",            // you can remove this. the rel attribute is the default
        "types"         : {
            "section"   : {
                "max_children"  : -1,
                "max_depth"     : -1,
                "valid_children": "all"
            },
            "page" : {
                "max_children"  : 0,
                "max_depth"     : -1,
                "valid_children": "none",
                "icon" : { 
                        "image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
                    }
            }
        }

请注意，Types对象包含一些属性（type_attr选项），它还包含一个嵌套的Types属性，其中包含每种类型。

根据我读过的文档，jsTree lib在type_attr中查找并获取节点的值并将其与Types.Types

中的值列表进行比较

Answer 2

对于那些使用3.0的人来说，它现在不同了。

来自此问题：https://github.com/vakata/jstree/issues/497

不会从rel属性读取类型。尝试在标记中使用<li data-jstree='{ "type" : "floor" }'...（并将单引号保留在外面，双引号 - 在data-jstree属性中）.`

所以关键是

<li data-jstree='{ "type" : "section" }'>...</li>

jstree - 使用类型插件时无法设置图标

2 个答案: