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更改为fancytree。

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

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

所以这棵树有根-只是不渲染它。

有没有建议？

我必须添加一些内容。我不是在等小费。我仍在寻找错误的答案，不久前我尝试了一些方法。

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

发件人：

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

这是HTML中的花式树-没有根节点：

静态：

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中的花式树-带有根节点：

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

我更改了从以下方法获取数据的方式：

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

收件人：

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

这对我来说并不重要，因为我仍然有此错误，但是我想说的是，我不需要使用其他$ .ajax语句-jquery.fancytree.js就可以了。

Answer 1

Fancytree维护一个 invisible 根节点。如果传递子级列表，则它们将显示为顶级节点。

为了创建一个 visible 顶级节点，您应该传递一个带有子项列表的节点（否则如何定义其标题和其他属性？）：

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

花式树的根尚未被渲染

1 个答案: