Symfony v3.4 with jsTree v3.3.5 和 JSON 格式的数据

Question

我正在尝试在我的 Web 项目中显示树结构。

我正在使用 Symfony 3.4.x with jsTree v3.3.5。

问题

我无法在使用 json 和 ajax 时显示树。

我用的是官方的例子jstree documentation.

如果我以 json 格式对 data 进行硬编码，则树会顺利显示，但是当我 return 与 ajax 的一部分相同时 json =] 呼叫 - 树不显示（我只得到一个项目，显示为文件夹，没有名称）。

我想显示所有树节点完全打开 - 所以需要加载所有项目。

代码

my data in json format (i am using alternative json notation as per jstree documentation)

{"success":true,
"data":[
    {"id":"50","parent":"#","text":"test_root"},
    {"id":"51","parent":"50","text":"test_1"},
    {"id":"123","parent":"51","text":"test_2"},
    {"id":"73","parent":"51","text":"test_3"},
    {"id":"75","parent":"51","text":"test_4"},
    {"id":"76","parent":"51","text":"test_5"},
    {"id":"74","parent":"51","text":"test_6"},
    {"id":"78","parent":"51","text":"test_7"},
    {"id":"124","parent":"51","text":"test_8"},
    {"id":"77","parent":"50","text":"test_9"}
]}

using jstree

$(document).ready(function()
{
    let project_tree;
    project_tree = $('#file-tree-json');

    project_tree.jstree({
        'core':
        {
            'data':
            {
                'url': '/tree/prepare',
                'dataType': 'json',
                'data': function (node) {
                    console.log(node);
                    return { 'id': node.id };
                },
            }
        },
        "types": {
            "root": {
                "icon": "lnr lnr-home"
            },
            "folder": {
                "icon": "lnr lnr-folder"
            },
            "file": {
                "icon": "lnr lnr-file-empty"
            }
        },
        "search": {
            show_only_matches: true,
            search_callback: function (str, node)
            {
                if (node.text.toLowerCase().indexOf(str) >= 0) { return true; }
                }
        },
        "plugins": [ "types", "search" ]
    });
}

code in my controller that prepares tree items data in json format

$em = $this->getDoctrine()->getManager();
$repo_file_tree = $em->getRepository('App:FileTree');

try
{
    $build_my_tree_json = $repo_file_tree->prepareJsonTree($build_my_tree);

    return new JsonResponse([
        'success' => true,
        'data'    => $build_my_tree_json
    ]);
}
catch (\Exception $exception)
{
    return new JsonResponse([
        'success' => false,
        'code'    => $exception->getCode(),
        'message' => $exception->getMessage(),
    ]);
}

关于 SO 的其他相关讨论，我已经阅读过，但在我看来，它们并没有解决手头的问题or/and 参考 jstree 过时的版本

1. jsTree unable to load root nodes from AJAX call
2. jsTree - loading subnodes via ajax on demand
3. JSTree - Load nodes dynamically
4. JStree and ajax

结论

我做错了什么？

也许我忽略了一些细节或技术性问题？

感谢您的评论和回答。

更新 1

当我return只有数据时

return new JsonResponse([
    $build_my_tree_json
]);

我得到额外的“[]”

[[
    {"id":"50","parent":"#","text":"test_root"},
    {"id":"51","parent":"50","text":"test_1"},
    {"id":"123","parent":"51","text":"test_2"},
    {"id":"73","parent":"51","text":"test_3"},
    {"id":"75","parent":"51","text":"test_4"},
    {"id":"76","parent":"51","text":"test_5"},
    {"id":"74","parent":"51","text":"test_6"},
    {"id":"78","parent":"51","text":"test_7"},
    {"id":"124","parent":"51","text":"test_8"},
    {"id":"77","parent":"50","text":"test_9"}
]]

如何从 json 或引用内部数组中删除多余的“[]”？

更新 2

只有 returned 关于树节点的数据 json 格式。

working example

return new JsonResponse($build_my_tree_json);

那么如何使 jstree 在 ajax 响应中使用附加数据？

应该有一种方法可以从包含状态和数据的响应中提取有关树的所有数据（响应显示在我的问题代码部分）。

Answer 1

您的 JSON 响应的结构不适用于 jsTree。 jsTree 需要一个节点数组。您的输出结构在数据对象中有一个数组。您的回复中应该有如下结构才能正常工作。

 [
        {
            "id": "50",
            "parent": "#",
            "text": "test_root",
            "opened":true
        },
        {
            "id": "51",
            "parent": "50",
            "text": "test_1"
        },
        {
            "id": "123",
            "parent": "51",
            "text": "test_2"
        },
        ...
        ...
]