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

Question

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

我将Symfony 3.4.x与jsTree v3.3.5一起使用。

问题

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

我正在使用官方jstree documentation中的示例。

如果我以data格式对json进行硬编码，则树显示时没有任何障碍，但是当我在调用json的过程中返回相同的ajax时-树是未显示（我只有一个项目，显示为文件夹，没有名称）。

我想完全打开所有树节点-因此需要加载所有项目。

CODE

  

我的数据以json格式（根据jstree文档，我使用的是 alternative json表示法）

{"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"}
]}

  

使用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" ]
    });
}

  

我的控制器中的代码以json格式准备树项数据

$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的其他讨论，但是我认为这些讨论并没有解决当前的问题，并且/或者没有参考过早的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
5. https://stackoverflow.com/a/22965656

结论

我在做什么错了？

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

谢谢您的评论和回答。

更新1

当我只返回数据时

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

仅当以json格式返回仅 有关树节点的数据时，此方法有效。

  

工作示例

return new JsonResponse($build_my_tree_json);

那么如何使jstree响应中的其他数据与ajax一起使用？

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

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"
        },
        ...
        ...
]