Symfony v3.4 с jsTree v3.3.5 и данными в формате JSON - PullRequest
Новая
       7

Symfony v3.4 с jsTree v3.3.5 и данными в формате JSON

0 голосов
/ 15 сентября 2018

Я пытаюсь отобразить древовидную структуру в моем веб-проекте.

Я использую Symfony 3.4.x с jsTree v3.3.5 .

ПРОБЛЕМА

Не могу отобразить дерево при использовании json и ajax.

Я использую пример из официальной jstree документации .

Если у меня жесткий код data в формате json, дерево отображается без заминки, но когда я возвращаю тот же json как часть вызова ajax - дерево не отображается (я получаю только один элемент , отображается как папка без имени).

Я хочу, чтобы все узлы дерева были полностью открыты, поэтому требуется загрузка всех элементов.

код

мои данные в формате json (я использую альтернативные обозначения json согласно jstree документации) 

{"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 не может загрузить корневые узлы из вызова AJAX
  2. jsTree - загрузка подузлов через ajax по запросу
  3. JSTree - Загружать узлы динамически
  4. JStree и 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 ответе?

Должен быть способ извлечь все данные о дереве из ответа, который содержит статус и данные (ответ, как показано в разделе КОДА моих вопросов).

1 Ответ

0 голосов
/ 17 сентября 2018

Структура вашего ответа 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"
        },
        ...
        ...
]
...