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

我不得不说这棵树有两个版本。首先是dynatree。这个 dynatree 工作得很好。它具有相同的来源和相同的数据。

我决定将 dynatree 更改为 fancytree。

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

如果我在树初始化后尝试检查根节点，我会看到类似的内容：

所以这棵树有一个根 - 只是没有渲染它。

有什么建议吗？

我要补充一点。我不是在等待准备好的小费。我仍在寻找我的错误的答案，我刚才尝试了一些东西。

我将树源从动态 ajax post 替换为静态 json，这是此 ajax post 的答案。就这样:

发件人：

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 - 根节点：

我很困惑。这对我意味着什么？我去post获取数据的方式有问题吗？

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

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

至：

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

这对我来说无关紧要，因为我仍然有这个错误，但我想说我不需要使用额外的 $.ajax 语句 - jquery.fancytree.js 做到了。

Answer 1

Fancytree 维护着一个不可见的 根节点。如果您传递 children 的列表，它们将显示为 top-level 个节点。

为了创建一个 visible top-level 节点，您应该传递一个包含 children 列表的节点（您将如何定义其标题和否则其他属性？）：

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

Fancytree 根尚未渲染

Fancytree root has not beed rendered

tree

jquery

json

dynatree

fancytree