2

我正在尝试显示一个包含部分及其包含的页面的 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>

谁能看到出了什么问题？

任何建议表示赞赏。

谢谢

4

2 回答 2

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

于 2014-02-17T02:09:42.367 回答
1

对于这里使用 3.0 的人来说，现在不同了。

从这个问题：https ://github.com/vakata/jstree/issues/497

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

所以关键是

<li data-jstree='{ "type" : "section" }'>...</li>
于 2014-04-15T22:06:30.343 回答