Fancytree根未呈现

Question

我有一棵树是这样的：

var tree: Fancytree.Fancytree;

var options: any = <Fancytree.FancytreeOptions>{
    clickFolderMode: 1,
    source: $.ajax({
        url: ..., // some url to source
        type: "POST",
    }),
    extensions: ["dnd"],
    dnd: {
        autoExpandMS: 1000,
        preventVoidMoves: true,
        dragStart: function (node) {
            ...
        },
        dragStop: function (node) {
            ...
        },
        dragEnter: function (node, sourceNode) {
            ...
        },
        dragOver: function (node, sourceNode, hitMode) {
            ...
        },
        dragDrop: function (node, sourceNode, hitMode) {
            ...
        },
        revert: true
    },
    init: function (isReloading, isError) {
        ...
    }
};

tree = $('#tree3').fancytree(options);

加载到树源的数据如下所示：

res = {
    ContentEncoding: null,
    ContentType: null,
    Data: {
        activate: false,
        children: {
            [0]: {
                activate: false,
                children: null,
                expand: false,
                extraClasses: null,
                focus: false,
                hideCheckbox: false,
                href: null,
                icon: null,
                isFolder: false,
                isLazy: false,
                key: "2",
                layerId: "node2",
                noLink: false,
                @select: false,
                title: "I am node 2",
                tooltip: null,
                @type: Layer,
                unselectable: false
            },
            [1] : {
                ...
            },
            [2] : {
                ...
            },
            ...
        },
        expand: true,
        extraClasses: null,
        focus: false,
        hideCheckbox: false,
        href: null,
        icon: null,
        isFolder: true,
        isLazy: false,
        key: "1",
        layerId: null,
        noLink: false,
        @select: false,
        title: "root",
        tooltip: null,
        @type: Group,
        unselectable: false
    },
    JsonRequestBehavior: DenyGet,
    MaxJsonLength: ...,
    RecursionLimit: null
}

res是System.Web.Mvc.JsonResult的类型。

但是当我的树被渲染的时候，我看到了这样的东西：

|
--- I am node 2
|
--- I am node 3
|
--- I am node 4
|
...

但我希望看到这样的树：

root
    |
    --- I am node 2
    |
    --- I am node 3
    |
    --- I am node 4
    |
    ...

我不得不说我有两个版本的这棵树。他们中的第一个是天生的。这贵族生活得很好。它有同样的来源和数据。

我做了一个决定，我想把“自然树”变成“情趣树”。

我的jquery代码没有删除树根，也没有禁用它，所以我觉得它可能是树配置中的一个问题。我认为这可能是树选项的问题，或者数据格式或者某些参数是错误的？我真的不知道。

如果我尝试在树被输入后检查根节点，我可以看到这样的情况：

​

​

所以这棵树有根--只是没有呈现出来。

有什么建议吗？

我得补充点东西。我不是在等小费。我仍然在为我的错误寻找答案，我刚才尝试了一些东西。

我将树源从动态ajax post替换为静态json，这是这个ajax帖子的答案。就像这样：

发自：

source: $.ajax({
        url: ..., // some url to source
        type: "POST",
    }),

这是HTML中的fancytree -没有根节点：

​

​

到静态：

source: [
    {
        "title": "root",
        "layerId": null,
        "isFolder": true,
        "key": "1",
        "expand": true,
        "isLazy": false,
        "tooltip": null,
        "href": null,
        "icon": null,
        "extraClasses": null,
        "noLink": false,
        "activate": false,
        "focus": false,
        "select": false,
        "hideCheckbox": false,
        "unselectable": false,
        "type": 0,
        "children": [
            { 
                "title": "I am node 2", 
                "layerId": "node2", 
                "isFolder": false, 
                "key": "2", 
                "expand": false, 
                "isLazy": false, 
                "tooltip": null, 
                "href": null, 
                "icon": null, 
                "extraClasses": null, 
                "noLink": false, 
                "activate": false, 
                "focus": false, 
                "select": false, 
                "hideCheckbox": false, 
                "unselectable": false, 
                "type": 1,
                "children": null 
            },
            { ... },
            { ... },
            { ... },
            { ... }
        ]
    }

我的树被渲染成了我所期望的--有根。

这是HTML中的fancytree --具有根节点：

​

​

我真的很困惑。这对我意味着什么？我发布数据的方式有什么问题吗？

我改变了获取数据的方式：

source: $.ajax({
            url: ..., // some url to source
            type: "POST",
        }),

至：

source: {
            url: ..., // some url to source
            type: "POST",
        },

这对我来说并不重要，因为我仍然有这个bug，但是我想说我不需要使用额外的$.ajax语句-- jquery.fancytree.js会这么做。

Answer 1

Fancytree维护一个不可见的根节点。如果您传递一个子节点列表，它们将显示为顶级节点。

为了创建一个可见的顶层节点，您应该传递一个包含子节点列表的节点(否则如何定义其标题和其他属性)：

[
  {
    "title": "My root",
    "children": [
      {"title": "I am node 2", ...},
      {"title": "I am node 3", ...},
      ...
    ]
  }
]