JsTree 使用 ajax 和参数加载所有数据

Question

我想通过 ajax 调用显示 jstree 中的数据。但是什么都没有显示。下面我会放上我自己的代码

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) });
    }

我认为一切正常，当我在 createJSTrees(jsonparams) json 中使用 alert(jsonparams); 时，数据显示正常。但树视图不显示任何内容。我的代码有什么问题？

Answer 1

我可以用测试数据重现同样的问题，要修复它，我们可以在为 jsTree 指定 json 数据源时手动调用 JSON.parse(jsonparams)，如下所示。

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) });
}

节点class

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

测试结果

JsTree 使用 ajax 和参数加载所有数据

JsTree load all data using ajax with parameter

jquery

asp.net-core

jstree