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


jstree - Cannot set icons when using types plugin

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

这是我的javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
$('#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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   <ul class="jstree-no-dots">
      <li id="1" rel="section" class="jstree-open">
         <ins class="jstree-icon"></ins><ins class="jstree-icon"></ins>One
         
<ul>

            <li id="3" rel="section" class="jstree-closed"><ins class="jstree-icon"></ins><ins class="jstree-icon"></ins>One Subsection
</li>

            <li rel="page" class="jstree-open jstree-last"><ins class="jstree-icon"></ins><ins class="jstree-icon"></ins>Page in section one
</li>

         
</ul>

     
</li>

      <li id="2" rel="section" class="jstree-closed jstree-last"><ins class="jstree-icon"></ins><ins class="jstree-icon"></ins>Two
</li>

   
</ul>

谁能看到出什么问题了？

任何建议都值得赞赏。

谢谢

对于在这里使用3.0的用户，

现在有所不同。

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

The type is not read off of the rel attribute. Try using

  • in your markup (and keep the single quotes outside, and the double quotes - inside for the data-jstree attribute).`

    • 所以键是

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

    不确定该答案是否仍然有用，但是我在jsTree中遇到了类似的问题，并且发现了您的问题

    您确定此配置正确吗？您具有：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
       "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"
            }

    我认为应该是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
       "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库在type_attr中查找并获取节点的值，并将其与Types.Types

    中的值列表进行比较