JsTree загружает все данные, используя ajax с параметром

Question

Я хочу показать данные в jstree с вызовом ajax. Но ничего не показывает. Ниже я поставлю свой собственный код

Html Код

<div id="jstreeChart"></div>

<button onclick="reload_chart()">Show Tree</button>

И это jquery код

function reload_chart() {
        $(function () {
            $.ajax({
                async: true,
                type: "Post",
                url: "/Controller/Action?id=3",
                dataType: "json",

                success: function (json) {
                    //Bind Data Function
                    createJSTrees(json.jsonvar);
                    //For Refresh Chart
                    $('#jstreeChart').jstree(true).refresh();
                }
            });
        });
    }


function createJSTrees(jsonparams) {
        $('#jstreeChart').jstree({
            "core": {
                "themes": {
                    "variant": "large"
                },
                "data": jsonparams,
            },
            "checkbox": {
                "keep_selected_style": false
            },
        });

    }

И в методе действия

    [HttpPost]
    public IActionResult LoadChartList(int id)
    {
        //some code 
        return Json(new { jsonvar = JsonConvert.SerializeObject(nodes) });
    }

Я думаю, что все правильно, и когда я использую alert(jsonparams); в createJSTrees(jsonparams) json, данные показывают отлично. Но дерево не показывает ничего. Что не так в моем коде?

Answer 1

Я могу воспроизвести ту же проблему с данными тестирования, и чтобы исправить ее, мы можем вручную вызвать JSON.parse(jsonparams), указав json источник данных для jsTree, как показано ниже.

function createJSTrees(jsonparams) {
    console.log(jsonparams);
    $('#jstreeChart').jstree({
        "core": {
            "themes": {
                "variant": "large"
            },
            "data": JSON.parse(jsonparams),
        },
        "checkbox": {
            "keep_selected_style": false
        },
    });

} 

LoadChartList действие

[HttpPost]
public IActionResult LoadChartList(int id)
{
    //some code 
    var nodes = new List<Node>
    {
        new Node
        {
            id = "ajson1",
            parent = "#",
            text = "Simple root node"
        },
        new Node
        {
            id = "ajson2",
            parent = "#",
            text = "Root node 2"
        },
        new Node
        {
            id = "ajson3",
            parent = "ajson2",
            text = "Child 1"
        },
        new Node
        {
            id = "ajson4",
            parent = "ajson2",
            text = "Child 2"
        }
    };


    return Json(new { jsonvar = JsonConvert.SerializeObject(nodes) });
}

Класс узла

public class Node
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

Результат теста